2022年5月24日SHAREツイートシェアはてブLINEPocket今回は、HTMLとCSSを使ってヘッダーをコーディングしていきます。デザインを元に模写をする流れを解説します。プログラミング初学者やコーディング練習として模写をしたい駆け出しエンジニアにもおすすめです。ヘッダーデザインはどのサイトでも必ずでてくる再頻出のUIパーツです。基礎となるHTMLの構造とCSSの書き方を覚えておくことで、変化に強く汎用性の高いヘッダーをつくることができます。コーディングの準備をする完成形のデザインを確認しましょう一般的なロゴとナビゲーションで構成されたよくあるヘッダーになります。デザインの基本情報ヘッダーをコーディングするにあたって、必要となる情報は以下の通りです。横幅は画面幅に対して100%(100vw)高さは70px内側の余白は画面幅に対して90%(90vw)、ただし最大幅は1152px背景色は黒(#333333)、文字色は白(#ffffff)ロゴ画像の大きさは横幅100px、縦幅35pxナビゲーションの文字の大きさは16pxナビゲーション同士の間隔は60pxヘッダーの影はY方向に2px、ぼかし4px、色は黒(#000000)の透明度20%コーディングの目標時間20分以内でコーディングが終えられるように頑張ってみましょう。Seta上のデザインと基本情報を元にまずは自分なりにコーディングをしてみましょう。コーディングの手順HTMLを書き出すヘッダー全体と内側の余白を確保するためのインナー要素にわけるロゴ部分とナビゲーション部分でわける。ナビゲーションの中の子要素としてナビアイテム一つ一つの要素を配置する。CSSを書き出すヘッダーを画面上部に固定するヘッダー内に余白をもうけるインナー要素をつくるヘッダー内の各要素が上下中央揃えになるようにするロゴ部分とナビゲーション部分を左右に話して設置するフクロウセレクタでナビ要素同士に間隔をあける実際のソースコード実際のソースコードは以下の通りです。コーディングのお手本として参考にしてください。自分なりにコーディングしてみたら、答え合わせをしてみましょう。初心者はまずは見た目を完璧に同じにすることを目標にしてください。中級者はなぜそのようなソースコードになったのか?と考えながら読み進めていってください。上級者はこれよりも優れたコードはないだろうか?と考えながら読み進めていってください。</div></div>ヘッダーのHTMLはこのような構造にしました。ポイントは、.header__innerを設けてヘッダーの内側に余白を確保するようにしているところです。デザイン上で明確な境界線はありませんが、この見えない要素をいれておくことで柔軟なコーディングができます。#fff;}ヘッダーのCSSは上記の通りです。ヘッダーの特徴ヘッダーのコーディングを効率よく進めていく上で、ヘッダーの特徴を把握しておくとよいです。fixed;をつかっていきます。absolute;などを使いましょう。えのコンテナにして、子要素に幅を持たせることで余白をもちつつ中央に揃えてくれるインナー要素がつくれます。center;}display:flex;を指定して子要素を横並びにしたあとに、align-items:cener;を実行することで子要素が上下方向に中央揃えされます。auto;を指定することでflexコンテナ内で余っている余白を左側の余白として利用します。flex内でmarginを思い通りに扱うテクニックになります。CSS中級者向けです。60px;}このような記述をすることで.header__navitemの二番目以降の要素の左側にマージンをとることができます。(*+*)というテクニックになります。CodePenで完成品をデモでみる。CodePen.まとめ今回はヘッダーのコーディングをしてみました。flexboxレイアウトをフルに活用することで画面幅の変更に強いヘッダーをつくることができます。flex-direction:column;をつかったインナー要素やalign-items:center;をつかった上下中央揃えのテクニックはよくつかいます。レイアウトはflexボックスを正しく理解していけば必ず自在に操れるようになります。positionやmarginに頼ったレイアウトは少し画面の幅を変えただけで崩れてしまう変化に弱い実装方法です。あれば、ぜひコメントまってます!▼感想ヘッダーの解説というより、もはやflexレイアウトをおすすめする記事になってしまいました。この記事も再度見直してブラッシュアップを図りたいです。▼書き足したい内容メモ・flex:none;とflex:auto;の使い分け。・レスポンシブでスマホ版の時にハンバーガーメニューを表示する実装方法。・中のコンテンツに最大幅を設定する意味。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。