MENU

あなたのお仕事を育てるホームページ作成・Web活用

Flexboxで作るヘッダーのサンプル集

2022 3/26

2020-07-30 2022-03-26

Flexboxは、CSSはWebページのレイアウトを設定できるモジュール。

Flexboxを使うと簡単に整列したり、配置できるようになるので、ヘッダーなどのレイアウトに使われています。

今回の記事では、Flexboxを使ったヘッダーの作り方を紹介します。

目次

スポンサーリンク

よくあるヘッダーレイアウトをFlexboxで作る

左にロゴ、右にメニューがあるヘッダーレイアウト

【解説】　右に寄せる要素（今回だとnav）に、margin-left:autoを設定します。

nav {
  margin-left: auto;
}

子要素のmarginにautoを設定すると、空いたスペース分marginを広げるようです。

今回の場合は、navの左の空きスペースを埋めるようにmarginが拡張されるので、navは右側に押し出されます。

逆に、ロゴの方にmargin-right:autoを設定すると、ロゴが左に移動します。

margin:autoは上下中央の配置になります。

【解説記事】

CSS Flexboxとmargin: auto;の自動マージンがどのように相互作用するか、両端揃え・右寄せの実装テクニック

真ん中にロゴ、左右にメニューがあるヘッダーレイアウト

【解説】左右にマージンを設定し、ロゴを真ん中に配置するようにしています。

.logo{
    margin: 0 auto;
}

上にロゴ、下にメニューがあるヘッダーレイアウト

【解説】ロゴとメニューは縦に並べたいので、flex-direction: columnと設定しています。

.header {
  display: flex;
  align-items: center;
  flex-direction: column;
}

よかったらシェアしてね！

中谷恵美

あなたのお仕事を育てるホームページの先生

システムエンジニア、ITコンサルタントを経て、フリーランスに。
ITが苦手な女性の個人事業主さんにホームページ作成・集客・Web活用をトータルでサポートしています。

仕事の戦略、ホームページの作成やWebツールの整理、操作の疑問など、さまざまなお困りごとにお答えします。

詳しいプロフィールを見る

活動実績

【HP個人レッスン】

●ハワイアン伝統ロミロミサロン・Aさま
・２ヶ月でサロンのHPをリニューアル。新サービス立上げ時も自分でHPを作成できるように。
「最初はパソコン音痴の私にできるか不安でしたが、とても丁寧な指導でわかりやすかったです。
私好みの素敵なHPができあがり、とっても嬉しいです！」

●Mさま
・２回のミーティングでWordPress運営スキルを習得。オウンメディアを立上げ。

●Sさま
・5日間で無料ブログからWordPressへのお引越し。
「半ば諦めかけていた移管を短期間で終えることが出来ました」

【ホームページ作成】

●これまでご依頼いただいたお客さま
（個人）写真家・サロン・カウンセラー・占い師

（法人）メーカー代理販売店、コンサルティング企業、人事支援企業

【経歴・資格など】
・基本情報技術者
・簿記２級