章末仕上げ ナビバー完成
第 1 章でやったことをふりかえる
親に display: flex と書けば子が横にならぶ。主軸方向のそろえ方が justify-content、交差軸方向が align-items。主軸の向きは flex-direction、あふれたときの折り返しは flex-wrap、すきまは gap、伸び縮みは flex-grow と flex-shrink。この 7 つでヘッダーナビはひととおり組めます。
まだ残っている粗さがある
いまのページには、縦にならんでいたころの指定が残ったままの場所が 3 か所あります。次の通りです。
- ナビのリンクが本文と同じ太さで、メニューらしく見えない
- 自己紹介の文章に p の既定の上下 margin が残っていて、写真と中心がわずかにずれている
- 趣味の項目に縦ならび時代の
margin-bottomが残り、gap と二重に余白があいている
片づけて完成させる
ナビのリンクに font-weight: bold を足し、.profile-text に margin: 0 を足し、.hobby-item の margin-bottom は行ごと削除します。余白の指定を子の margin から親の gap に一本化するのが、Flexbox に移したあとの正しい片づけ方です。ここまでできればヘッダーナビは完成、第 1 章は終わりです。
.site-nav a {
font-weight: bold;
}
.profile-text {
margin: 0;
}課題
- .site-nav a に font-weight の bold を追加してメニューらしい太さにする
- .profile-text に margin の 0 を追加して p の既定の余白を消す
- .hobby-item から margin-bottom の行を削除する