CSSでロゴとメニューを横並びにしてスマホでは縦並びにする

以前にヘッダーにロゴとメニューをHTMLでマークアップした記事を書いたことがあって、そろそろCSSでロゴの横にメニューを横並びしてみたくなりました。

ロゴとメニューを横並びにしたヘッダーにしているWebサイトやブログをよく見かけることが多いので、CSSでどう記述するか気になりますし、個人的には趣味の延長でCSSを使用しているくらいなのでロゴの横にメニューを横並びにできるように、たまにはマジメにやってみようかと思います。

そして、横並びにしたロゴとメニューをスマホでは縦並びにするCSSについても理解を深められたらなと思います。

CSSでロゴとメニューを横並びにする

CSSでロゴとメニューを横並びにする場合の配置として多いのが、ヘッダーの左にロゴがあって、その右横にメニューを配置して横一列に並べる場合です。

そしてロゴとメニューを横に並べるためにCSSでやることは、縦に並んだメニューを横に並べることと、ロゴの下に配置しているメニューをロゴの横に並べ直すCSSを記述することです。

メニューリストを横並びにするには

メニュー自体は<ul></ul>タグとその子要素の<li></li>タグでマークアップしてメニューリストを作ります。

<ul>
　<li>サンプル</li>
　<li>サンプル</li>
　<li>サンプル</li>
　<li>サンプル</li>
</ul>

<ul>と<li>タグでマークアップした場合のメニューは、そのままだと縦に並びます。つまりマークアップした順番がロゴの次にメニューならロゴの下にメニューが配置します。

縦並びのメニューリストから横並びにするには、縦に並んだメニューリストの<ul>と<li>要素を、CSSのdisplayプロパティの値をinline-blockでインラインブロックボックスにして横並びに変更します。

display: inline-block

メニューリスト自体を横並びにすることができると、あとはロゴの下に配置しているメニューをロゴの横に並べるCSSを記述して完成させます。

ロゴの横にメニューを配置するには

CSSのfloatプロパティで値を「left」と「right」でロゴとメニューの配置を調整するか、displayプロパティの値にflexを指定して値で配置コントロールするか、どちらかの方法を選んでロゴの横にメニューを並べることができます。

そして、どちらの方法を使用してもスマホの場合にはロゴの横に配置したメニューをロゴの下に縦並びにレスポンシブにすることもできます。

先にCSSのfloatでロゴの横にメニューを横並びにする場合
次にCSSのflexでロゴの横にメニューを横並びにする場合

上記の順番でCSSの記述をして理解していこうと思います。

CSSのfloatでロゴの横にメニューを横並び

ロゴの横にメニューを並べることができるCSSのfloatについて説明しておこうと思います。

ロゴの横にメニューを横並びにできるCSSの「float」は、縦に並んだ要素を横並びにすることができるCSSのプロパティです。

要素を横に並べるといっても、その要素をどんな横配置するかでfloatに指定する値が選べます。

ロゴの横にメニューを右寄せしたい場合は「float: right」、左に配置したい場合は「float: left」にして配置をコントロールできます。

もともと要素が配置されている位置floatが右や左に移動できる仕組みは、目的の指定要素を浮かせて移動させて横並びが適用されます。そのため少し扱いづらいCSSとも言えます。

floatで横並びにしたCSSの記述

ロゴの横にメニューを横並びにするCSSの記述と、その要素にするHTMLが以下のコードです。

<div class="inner float">
　<div class="logo">
　　<h1><a href="index.html"><img src="images/site-logo.png" alt="サイトロゴ"></a></h1>
　</div>
　<nav>
　<div class="menu">
　　<ul class="float">
　　　　<li>サンプル</li>
　　　　<li>サンプル</li>
　　　　<li>サンプル</li>
　　　　<li>サンプル</li>
　　</ul>
　</div>
　</nav>
</div>

CSSを適用するヘッダー要素をマークアップしたとして、その中にロゴをマークアップした要素とメニューにする要素を作成します。

そして作成したロゴとメニューをCSSで左右に横並びにします。

.logo h1{
　margin-left: 100px;
　float: left;
}

.float ul{
　display: inline-block;
　margin-top: 25px;
　margin-right: 100px;
　float: right;
}

.float li{
　display: inline-block;
　list-style: none;
　margin-right: 40px;
　padding: 10px;
　background: #333;
　color: #fff;
　border-bottom: 2px solid #2ac5b3;
}

CSSのfloatプロパティの記述をしているのが、ロゴになるlogoクラスのh1(3行目)とメニューになるulのfloatクラス(10行目)です。

ロゴをfloatの値「left」で左配置にします。そしてメニューはロゴの横に並べるのでfloatの値を「right」にして右配置にします。

メニュー自体も横並びにします。floatクラス付与してる<li>要素にdisplay: inline-blockを指定して、横並びメニューにします。

あとは、ロゴとメニューを横並びにした間隔やサイズをパディングやマージンで調整したり、メニューリストに背景色をつけるなどして、いい感じに仕上げるだけです。

スマホでは縦並びレスポンシブメニュー

CSSのfloatでロゴとメニューを横並びにしたままブラウザの画面を縮小していくと、横並びになったメニューがロゴの下に改行で入り込んで行きます。そしてさらに縮小すると、メニューリストが改行されて下に入り込みデザインが崩れていきます。

このときCSSでレスポンシブにして、スマホの画面サイズになったときはロゴとメニューを縦並びになるようにスタイルを調整してデザイン崩れを防ぎます。

@media screen and (max-width: 767px){
　div.float{
　　text-align: center;
　}
　.float h1{
　　display: block;
　　margin: 30px auto;
　　float: none;
　}
　.float ul{
　　width: 150px;
　　margin: 50px auto;
　　display: block;
　　float: none;
　　padding-left: 0;
　}
　.float li{
　　display: block;
　　margin: 5px auto;
　　border-bottom: 2px solid #2ac5b3; 
　}
　}

横並びにするためにロゴの要素(h1)とメニューの要素(ul)にはfloatを指定していました。

ですがスマホのとき縦並びにする場合は、横並びにした状態をメディアクエリでスマホ用サイズのブレイクポイントを決めて、CSSでロゴのh1とメニューのulにfloat: noneを指定します。

floatの値の「none」は配置を指定しない初期値の状態にできます。メディアクエリのブレイクポイントの画面サイズになったとき、メディアクエリの中で指定するfloat: noneがロゴとメニューに適用され、横並びのロゴとメニューが縦に切り替わるようになります。

あとはロゴとメニューを中央配置にしたり、ロゴとメニューの高さを揃える、メニューリストの間隔を空けるなどマージンやパディング等でゴニョゴニョしていくだけで、スマホでは縦並びに切り替わるロゴとメニューが完成します。

CSSのFlexboxでロゴの横にメニューを横並び

ここまで私は珍しくCSSについてマジメに取り組んでおります。この調子で記事最後までたどりつきたいものです。

次はロゴとメニューをFlexboxで横並びにします。

Flexboxは「Flexible Box Layout Module」と言って、柔軟で簡単なレイアウトを組むことができる、いい感じのやつです。

そんなFlexboxでロゴの横にメニューを横並びにする場合は、メニューの親要素にCSSでdisplayプロパティの値にflexを指定します。

そしてjustify-contentプロパティも横並びしたい親要素に指定します。

上記のようなjustify-contentプロパティに指定する値の種類があります。この値でロゴとメニューを横並びにする水平位置をコントロールします。

具体的なCSSの記述も紹介します。

CSSのflexで横並びにしたCSSの記述

flexでロゴの横にメニューを横並びにするCSSの記述と、その要素にするHTMLが以下のコードです。

<div class="inner flex">
　<div class="logo">
　　<h1><a href="index.html"><img src="images/logo.jpg" alt="サイトロゴ"></a></h1>
　</div>
　<div class="menu">
　　　<ul class="flex">
　　　　　<li>サンプル</li>
　　　　　<li>サンプル</li>
　　　　　<li>サンプル</li>
　　　　　<li>サンプル</li>
　　　</ul>
　</div>
</div>

マークアップしたHTMLは先述したfloatのときと同じですが、class名を「float」から「flex」に変更するという小さなこだわりだけは出してしまいました。このマークアップしたメニューをCSSでロゴの横に並べます。

.inner{
　max-width:100%;
　margin:0 auto;
　width:980px;
　align-items: center;
　height:auto;
}
.flex {
　display: flex;
　justify-content: center;
}
.flex li{
　margin-left:30px;
　list-style:none;
　border-bottom: 2px solid #2ac5b3;
}

メニューをマークアップしているul要素のflexクラスに値を「flex」で指定します。値をflexにした段階ではflex-startの初期値で行の開始位置から配置された左揃えになります。

この時点で、すでにロゴの横にメニューが横並びにできていますが、さらにjustify-contentプロパティも指定してロゴの横のメニューの水平配置を調整します。

配置してみた限りだと、ロゴとメニューを横並びにする配置指定はjustify-content: space-betweenで左右に振り分けるのがいいのかもと思いました。が個人的にはロゴとメニューには、いつまでも仲良くしてもらいたいのでcenter配置も悪くないなと思えました。

あとは親要素のボックスやロゴ、メニューの間隔やサイズ、カラーなどを調整して、それぞれのWebサイトに適した、いい感じの配置にします。下の完成画像はjustify-content: centerで「仲良し配置」にしています。

スマホではレスポンシブメニューを縦並び

flexboxでロゴの横にメニューを横並びにした場合も、ブラウザの画面が縮小するとデザインが崩れてしまうので、スマホではメニューを縦並びにしてレスポンシブにしデザイン崩れを防ぎます。

@media screen and (max-width: 767px){
　.flex{
　　text-align: center;
　　display: inline-block;
　　line-height: 50px;
　　flex-direction: column;
　　padding-bottom: 10px;
　　padding-left:0;
　　}
　.flex li{
　　margin: 0 auto;
　　list-style:none;
　　border-bottom: 2px solid #2ac5b3;
　　}
　}

6行目のflex-direction: columnがflexアイテムを縦(上から下)に配置できるようにする指定です。

あとは、中央配置にしたりカラーを入れたりして配置調整をしてflexboxの場合の縦並びは完了です。

縦並び中央配置で少しハマったことがあります。メニューリストの点は消したけど、点が存在する場所の余白が残ってしまい、中央寄せしても右に少しズレました。ナンジャコリャと思いましたが「padding-left: 0」にしたら解決できました。

まとめ

CSSでロゴとメニューを横並びにしてからスマホでは縦並びにする2つのCSSの記述方法+おまけを使用してみました。

• floatで横並び
• flexで横並び
• スマホは縦並び(おまけのやつ)

2つの扱いやすさは、どちらかというとflexで横並びにするcssが扱いやすかったし、簡単でした。

今回使用したfloatとflexはヘッダーのロゴとメニューを横並びにする以外に使用しても、CSSでレイアウトを組む幅が広がるので、またマジメに学ぼうと思ったときには記事にしようと思える手応えでした。