第11回勉強会
- 日 時：
- 2014年11月5日 13:30～16:00
- 場 所：
- アワーズ 研修室
- 出席者：
- 福田、小野、河野、古屋、土生、山縣（敬称略）
新しいページの作成 続き
前回で誤りの多かったフォントの設定につき解説した後、「日曜朝市」のページにCSSを加えて完成させた。
フォントの設定
- 誤りの原因はfontショートハンドプロパティの誤用にある。
- fontプロパティでは、スタイル・変形・太さ・サイズ・行の高さ・種類をまとめて指定する。
（例えば、「font: italic bold 14px/1.2 メイリオ, sans-serif;」とまとめて指定することができる） - ただし、記述順や省略可能な個別プロパティ他指定条件が厳しく定められている。
- フォント関連の各プロパティを一度に指定すれば、ホームページビルダーが文法に合わせてくれるが、バラバラに指定すると不都合な場合が発生する。
- font ショートハンドは利用しない方が無難です。
- 方法はツール→オプション→ソース編集→詳細設定でfontの前のチェックを外す。
野菜画像の配置
- 画像が挿入されている親のボックス（ここでは、div#container）の位置を相対的に設定する。
- 配置する各画像にIDをつける。
- 各ID上方及び左からの配置位置又は上方及び右からの配置位置を絶対位置で指定する。
- 配置位置は画像の大きさに従い調整する。
- 下表のとおり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 | rotate(-15deg) | |
| 上方向マージン | 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 |
|
| img#hidariue | position | absolute |
| top | 350px | |
| left | 15px | |
| img#migiue | position | absolute |
| top | 350px | |
| left | 550px | |
| img#hidarisita | position | absolute |
| top | 630px | |
| left | 15px | |
| img#migisita | position | absolute |
| top | 630px | |
| left | 580px |
注）薄字：前回実施部分
戻るボタン
- 特に指定せず各自設定した
- 一例
| p#modoru | line-height | 30px |
| text-align | center | |
| margin-top | 80px | |
| margin-left | auto | |
| margin-right | auto | |
| width | 4em | |
| height | 30px | |
| p#modoru a | border-top | 3px solid #cfc |
| border-right | 3px solid #333 | |
| border-left | 3px solid #cfc | |
| border-bottom | 3px solid #333 | |
| text-decoration | none | |
| display | bloc | |
| color | white | |
| background-color | fuchsia | |
| p#modoru a:hover | border-top | 3px solid #333 |
| border-right | 3px solid #cfc | |
| border-left | 3px solid #333 | |
| border-bottom | 3px solid #cfc | |
| color | #000 | |
| background-color | #0ff |