• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

ヘッダーでよく見るレイアウトの作り方(Flexboxとmargin:autoを使用)

投稿者アイコン
2019/10/07
書いた人:
rurippa!
カテゴリ:
CSS   HTML
208 views

左右に離れたレイアウトを作ります。Flexboxを使えば簡単にできるので、ぜひお試しください。

ヘッダーでよく見るレイアウトの作り方(Flexboxとmargin:autoを使用)

目次

今回作るもの

bnr_nav_flex

画像のような よく見るレイアウトです。片方にロゴがあり、反対側にメニューが並んでいます。この左右に別れたレイアウトを作る方法も複数ありますが、今回はFlexboxを使い HTMLもシンプルになるように作ります。

実装方法

ベースになるHTML・CSSはこちらです!

	<header>
		<div>Logo</div>
		<div>Menu01</div>
		<div>Menu02</div>
		<div>Menu03</div>
	</header>
	
	header div{
		display:flex;

		/*  下記は装飾部分です。なくてもOK  */
		padding: 10px;
		border: 1px solid #333;
		background: pink;
	}
	

はじめに

まず、headerタグにFlexを使って、divを横並びにします。

	header{
		display:flex;
	}
	

その2

1番目のdiv(Logo)に対して、「margin-right:auto;」をかけます。
すると、左右に離れました。もう、ほぼ完成です‥!

	header div:first-child{
		margin-right:auto;
	}
	

その3

必要に応じて 余白など微調整して完成です。

	header div{
		margin-left: 10px;
	}
	header div:first-child{
		margin-left: 0;
	}
	

完成ソースコード

	<header>
		<div>Logo</div>
		<div>Menu01</div>
		<div>Menu02</div>
		<div>Menu03</div>
	</header>
	
		header{
			display:flex;
		}

		header div{
			display:flex;

			/*  ▼装飾など  */
			margin-left: 10px;
			padding: 10px;
			border: 1px solid #333;
			background: pink;
		}

		header div:first-child{
			margin-right:auto;

			/*  ▼装飾など  */
			margin-left: 0;
		}
	

今回のポイント&まとめ

コーディングの流れをみていきましたが、ポイントは「marginに対してautoをかける」ことです!
中央寄せでよくみる「margin: 0 auto;」これと同じです!これが、Flexboxにもかけれるというのが一番大事だと思います。

また、このやり方が一番良いかは 状況によると思いますが、よければ試してみてくださいね。
もしピンと来てない方は、こちらの記事も合わせて読んでみてください♪

参考記事


この記事を読んだ人はこんな記事も読んでいます