Labo 233: ロゴとボタンのフレックスボックス構造
Labo 233: ロゴとボタンのフレックスボックス構造
モジュールへの分割が終わったらコーディングに入る
ロゴとモバイル向けのボタンを配置するフレックスボックスの親要素を作成する
レイアウトを先に作るので、ここではロゴやボタンの画像は挿入せず、テキストで代入する
モバイル向けレイアウトのときはロゴとボタンを横一列に配置する
PC 向けレイアウトの時はロゴだけを表示する
実際のロゴやボタンはあとで組み込む
表示を確認するために、仮のテキストを入れておく
HTML は ヘッダーコンテナ内
css は style.css に追加する
追加する CSS には 3つのポイントがある
ヘッダーのロゴとボタンは、モバイル向けレイアウトの時はフレックスボックスを使って横一列に並べる
PC 向けレイアウトのときはボタンを非表示にして、さらにフレックスボックスを解除する
フレックスボックスを解除するには、display プロパティの値を block に切り替える
今回はビューポートの幅が 768px 以上のとき <div class="sitetitle"> の display プロパティの値を block にすることで、フレックスボックスを解除している
フレックスボックスは、子要素のボックスの横方向への配置（行揃え）と、縦方向の整列をコントロールできる
どちらも親要素に適用する
横一列に並ぶ要素の行揃えを決めるプロパティ
設定できる値は以下のとおり
横一列に並んでいる要素の、縦方向の整列を決めるプロパティ
設定できる値は以下のとおり