フッターのナビゲーション ①

フッターに主要なページへのリンクを追加する

PC 向けレイアウトの時はリンクを横一列に、モバイル向けレイアウトの時は縦に並べる

配列の切り返しがし易いフレックスボックスを使用する

ナビゲーションのテキストを中央揃えで配置する

5項目のリンクテキストを作成し、PC 向けレイアウトの時は横一列、モバイル向けレイアウトの時は縦に並べて表示する

CSS はフレックスボックスを使うが、全体を中央揃えにするために、リンク同士のスペースを空けるマージンの設定を工夫する

フレックスボックスの子要素を橫に並べつつ中央揃えにするときは、各子要素の左右に同じ大きさのマージンの作る

左だけ、右だけにマージンを付けると、正確な中央揃えにならない

各リンクテキストが含まれる <li> の左右に 1rem のマージンを設定している

PC 向けとモバイル向けレイアウトで子要素が並ぶ方向を変えるには、Labo 241 の flex-direction プロパティを使ったテクニックを使用する