下表によりスタイルを設定し「css」フォルダーにファイル名「top.css」として保存します。
| body | background-color | azure (背景色 任意の色を指定) |
| font-family | "メイリオ", "ＭＳ Ｐゴシック", Sans-Serif | |
| #container | max-width | 960px |
| width | 100% | |
| margin | 0 auto | |
| background-color | #fff | |
| header | padding-top | 34% (背景画像の縦横比) |
| background-image | url('top画像のURL') | |
| background-repeat | no-repeat | |
| background-size | cover | |
| margin-bottom | 20px | |
| header h1 | margin-top | -20%(h1の縦方向の位置を指定します) |
| text-align | center | |
| color | brown(文字の色 任意の色を指定) | |
| text-shadow | 2px 2px 2px #fff, -2px 2px 2px #fff, 2px -2px 2px #fff, -2px -2px 2px #fff |
|
| main | width | 100% |
| box-sizing | border-box | |
| padding | 5px | |
| ul | margin | 0 |
| padding | 0 | |
| li | display | inline-block |
| list-style-type | none | |
| width | 49.5% | |
| li a | color | #333 |
| border | 1px solid #333 | |
| border-radius | 10px | |
| display | block | |
| text-decoration | none | |
| line-height | 70px | |
| height | 70px | |
| margin | 10px 0 | |
| padding-left | 5% | |
| background-color | aquamarine (背景色 任意の色を指定) | |
| footer | text-align | center |
| color | #ff9380(文字色 任意の色を指定) | |
| margin | 20px 0 |
@media screen and (max-width:540px)
| li | display | block |
| width | 100% |