メニューバーを修正する

ぱっと見問題なさそう（デザインの酷さは別問題です）ですが、ウィンドウサイズを小さくしたりすると下に侵略してきます。

メニューバーの修正

メニューバーはヘッダー部にある”Top”とか”Blog”とか書かれている部分です。

ここから様々なコンテンツに飛べるわけですが、このメニューバーがウィンドウサイズを小さくすると下に侵略してきます。

スマホで表示させるだけで下に侵略してくるので問題です。修正しましょう。

フレックスボックスを利用

フレックスボックスは簡単かつ綺麗に横並びにできるCSSレイアウトです。もっと早く知りたかった・・・

リストにして・・・点を非表示にして・・・並べて・・・なんてする必要はありません。

HTML

<div class="header-menubar">
	<a class="header-logo" href="https://nellab.net/" target="_blank" rel="noopener">NEL Laboratory</a>
	<a class="header-menu" href="/">研究室</a>
	<a class="header-menu" href="https://nellab.net/" target="_blank" rel="noopener">Blog</a>
	<a class="header-menu" href="https://twitter.com/electric_clip" target="_blank" rel="noopener">Twitter</a>
	<a class="header-menu" href="https://nellab.net/profile/" target="_blank" rel="noopener">Profile</a>
	<a class="header-menu" href="https://rarara.nellab.net/" target="_blank" rel="noopener">旧ブログ</a>
</div>

私のページの場合はこの様になっています。

要するに”header-menubar”がメニューバー、”header-logo”がロゴ部分、”header-menu”がメニューの中身として割り当てられています。

CSS

.header-menubar{
	background-color : #78909C;	/*背景色*/
	height : 100px;	/*高さ指定*/
	display: flex;	/*フレックスボックス*/
}

.header-logo{
	color: #81D4FA;
	font-size: 30px;
	text-decoration: none;	/*リンク下線非表示*/
	margin: auto 0;	/*横軸中央*/
	padding: 0px 30px;	/*左右30px余白*/
}

.header-menu{
	color: #F5F5F5;
	font-size: 25px;
	text-decoration: none;
	margin: auto 0;
	padding: 0px 20px;
}

“display: flex;”と記述することでフレックスボックスを利用することができます。

フレックスボックスを利用するだけである程度綺麗に並ぶので、後はmarginやpaddingなどをいろいろやって位置を好みにすればOKです。

なお、”justify-content: 配置;”を利用すると均等配置なども可能です。

とりあえずこれで下に侵略してくることはなくなりました。