第10回勉強会
- 日 時：
- 2014年10月29日 13:30～17:00
- 場 所：
- アワーズ 研修室
- 出席者：
- 福田、小野、河野、古屋、土生、山縣（敬称略）
新しいページの作成
FOM出版「なるほど楽しいワード2013ドリル」のチャレンジ18を題材にワードで作成した文章をwebサイト化した。
- ワードで挿入した4つの画像をサイトの「img」フォルダに保存する。
ファイル名はxx_06_1.gif、xx_06_2.gif、xx_06_3.gif、xx_06_4.gifとする。 - ホームページビルダーでサイトを開き、新規ページを作成する。
- ワードで作成した「日曜朝市」のテキスト部分をメモ帳に貼り付け、コピーする。
- ホームページビルダーのHTMLソース<body>と</body> の間に貼り付ける。
- 文末に「戻る」と入力する。
- 次のマークアップを実施する。
1行目をh2、2行目をh1、3～5行目をp、6～8行目をpにし、 各ｐについて改行する。「戻る」をpで括る。
全体を選択してレイアウトコンテナを挿入する（divで括る）。
divのIDをcontainerに、最初のpのIDをhonbunに、2番目のpのIDをyoteiに、3番目のpのIDをmodoruに設定する - 下表のとおりCSSを設定する。
各背景色及び枠線の色は「カラーパレット」の「スポイド」を用いてワード画面上の色を採取した。
| * | 4方向パディング | 0 |
| 4方向マージン | 0 | |
| body | 4方向パディング | 0 |
| 4方向マージン | 0 | |
| div#container | 4方向マージン | 自動 |
| 幅 | 700px | |
| 上方向ボーダー | 40px solid #4fadf3 | |
| 下方向ボーダー | 40px solid #4fadf3 | |
| 下方向パディング | 30px | |
| h1 | フォントサイズ | 100pt |
| 前景色 | 赤 | |
| 水平方向の位置 | 中央揃え | |
| 上方向マージン | 10px | |
| フォント | "HGPｺﾞｼｯｸE", sans-serif | |
| h1 span | フォントサイズ | 48pt |
| h2 | フォントサイズ | 48pt |
| 前景色 | 白 | |
| 背景色 | #80d31a | |
| 4方向ボーダー | 1px solid #7ecf19 | |
| 4方向パディング | 20px | |
| 幅 | 300px | |
| 水平方向の位置 | 中央揃え | |
| transform (注1） | rotate(-15deg) (注2） | |
| 上方向マージン | 10px | |
| 右方向マージン | 0 | |
| 下方向マージン | 0 | |
| 左方向マージン | 20px | |
| フォント | "HG創英ﾌﾟﾚｾﾞﾝｽEB", sans-serif |
|
| p#honbun | フォントサイズ | 20pt |
| 水平方向の位置 | 中央揃え | |
| 行の高さ | 1.5 | |
| フォント | "HGPｺﾞｼｯｸE", sans-serif | |
| p#yotei | フォントサイズ | 28pt |
| 4方向ボーダー | 2px solid #81d31a | |
| 上方向マージン | 20px | |
| 上下方向パディング | 50px | |
| 左右方向パディング | 20px | |
| border-radius | 50px | |
| 行の高さ | 1.5 | |
| フォント | "HGP創英角ｺﾞｼｯｸUB", sans-serif |
注1：transform は文字や画像を拡大・縮小、移動、回転などを指定出来るCSS3で新しく追加されたプロパティで、未だビルダーでは対応していません。
注2：rotate(deg)を用いて段落を回転させました。括弧内は回転させる角度を指定します。