今回作成するヘッダーは、左端にタイトル、右端にメニューが表示される一般的なヘッダーです。ヘッダーボックス全体ボックス内にヘッダーのボックスを作成します。コードを見たときにヘッダーだとすぐにわかるようにheaderタグを使用します。横画面は全体ボックスに合わせ、高さは80px~120pxがベストです。サンプルコードを記載しておきます。htmlは以下の通りです。"wrapper"><header></header></div></body>cssは以下の通りです。100px;}ヘッダーボックスにタイトルとメニューを追加ヘッダーボックスにタイトルとメニューの2つのボックスを追加します。タイトルにはh1タグ、メニューにはnavタグを使います。navはnavigationの略です。ページのリンクがあるメニューなどをまとめたエリアに使用されます。先ほど書いたHTMLのheaderタグの中に、h1とnavの2つのタグを追加します。"wrapper"><header><h1>タイトル用のボックス</h1><nav>メニュー用のボックス</nav></header></div></body>(メニュー用のボックスの中を、ホーム、会社概要、お問い合わせの3メニューにしたい場合、ulタグやliタグを使用します。)しかしこのままだと、タイトル用のボックスとメニュー用のボックスが縦並びになってしまいます。これを解決するのが、フレックスボックスです。フレックスボックスフレックスボックスを使用すると、以下の画像のような状態になります。このように、横並びにするための手順を説明します。記述場所フレックスボックスは、並び替えたいボックスの親ボックスのCSSに書き込んでいきます。(ですので、今回はheaderタグのCSSに指定。)以下のように、displayプロパティにflexを指定します。(displayは、表示するという意味です。flex;}ボックスの並べ方ボックスをどのように並べるか指定することができます。この場合、flex-directionプロパティを使用します。(directionは、方向という意味です。)設定値の代表例は以下の通りです。row(横並び)row-reverse(横並び逆順)column(縦並び)column-reverse(縦並び逆順)今回は横並びにしたいので、rowを指定します。(rowはデフォルト値なので指定しなくても問題ありません。)実際に追加すると以下のようになります。row;}ボックスの横方向の配置ボックスを横方向にどのように配置するのかを指定することができます。この場合、justify-contentプロパティを使用します。(justifyは、整えるという意味です。)設定値の代表例は以下の通りです。flex-start(左揃え)flex-end(右揃え)center(中央揃え)space-between(両端)今回は、タイトルとメニューを両端に設置したいので、space-betweenを指定します。実際に追加すると以下のようになります。space-between}ボックスの縦方向の配置ボックスを縦方向にどのように配置するのかを指定することができます。この場合、align-itemsプロパティを使用します。(alignは、整列という意味です。)設定値の代表例は以下の通りです。strech(余白を埋める)flex-start(上揃え)flex-end(下揃え)center(中央揃え)今回は、タイトルとメニューを中央に揃えたいので、centerを指定します。実際に追加すると以下のようになります。center;}折り返しの指定ウィンドウサイズによってボックスを折り返すか指定することができます。有りにした場合、折り返し方法なども指定する事ができます。この場合、flex-wrapプロパティを使用します。設定値の代表例は以下の通りです。nowrap(折り返さない)wrap(折り返し)また、レスポンシブ対応には、wrap(折り返し)を指定する必要があります。(レスポンシブ対応とは、様々なデバイス(パソコン、スマートフォン、タブレット端末など)で最適化することができる対応のことです。)今回は全体ボックスを固定長ボックスにしているので、nowrapを指定します。(nowrapはデフォルト値なので指定しなくても問題ありません。nowrap;}Reyowプログラミング超初心者の勉強記録です。DiscussionReyowプログラミング超初心者の勉強記録です。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。