1月28日(水)2コマ目
今日、やったこと
- 横並びリスト
- Webページのヘッダ部をつくる
今日のホワイトボード
横並びリスト
箇条書き＋リンクを前回使ったdisplay:flex;で横並びにする。
〇第1段階
箇条書きの項目(<li>タグ)を横並びにする。
|
| 図 箇条書きを横並びに |
index.html
style.css
<li>タグの親要素の<ul>タグにdisplay:flex;を指定して、横並びにする。
〇第2段階
<li>タグに余白を設定して、クリックしやすいように。
|
| 図 <li>タグに余白設定 |
index.html
変更なし。
style.css
<li>タグに
- 枠線内余白（左右）
- 枠線外余白（上下左右）
- マーカーなし
を設定。
〇第3段階
<li>タグを中央寄せ。
|
| 図 <li>タグを中央寄せ |
index.html
変更なし。
style.css
中央寄せは、親要素（<ul>タグ）に justify: center; を指定。
Webページのヘッダ部をつくる
PC版ページにありがちなヘッダ部を作成。
背景画像と横並びメニューをつくる。
今日は、
- ヘッダ部に写真を追加
- 写真をヘッダ部の横幅一杯で表示
- ヘッダ部にタイトル追加
- ヘッダ部に箇条書きのリストを追加
までをおこなった。
|
| 図 作成中のヘッダ部 |
index.html
style.css
次回は
ヘッダ部をつくるのつづき。
