MENU

個人事業主・女性起業家のためのWordPress・HP・ブログレッスン

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

2022 12/19

2020-07-30 2022-12-19

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コンサルタントを経て、フリーランスに。

・ホームページ作成
・ブログのカスタマイズ
・LINEやメルマガのセットアップ
・Canvaを使ったデザインの作り方
・Googleの分析ツール
・自分の強みを生かした集客
などの、個人レッスンをしています。

「仕事の発信に使えるようになりたい」
「自分でも使えるスキルを身につけたい」
ITが苦手な個人事業主さんに向けて、困ったときのWEB担当として幅広くサポートしています。

HP作成のほかにも、心理カウンセラーとしても活動中。

趣味は、文房具集め、ゲーム（牧場系とモンハン）、手芸（刺繍、洋裁）。
運動が苦手で体が硬いのが悩み。今年、腰痛改善にジムに通い始めたが、果たして続くのか。。。

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

活動実績

【HP個人レッスン】

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

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

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

【ホームページ作成】

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

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

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

【営業時間】平日：10:00~19:00
【休業日】土、日、祝、年末年始