レスポンシブな二段メニューの作り方
今回は、HTML&CSSを学び始めたばかりの方でも挑戦できるような基本技を使って、レスポンシブな二段メニューを作ってみます。
<完成イメージ>
こんな感じのメニューボタンはよく見かけますよね。これをデバイスが変わってもレイアウト崩れを起こさないように作っていきます。
～目次～
- listタグでボタンを作る
- ％で幅（width）を指定する
- floatプロパティで二段レイアウトにする
- 高さ（height）を設定する
１．listタグでボタンを作る
まず、listタグで項目を作り、わかりやすいように線で囲って、ボタンを作ります。
displayプロパティをblockに指定して、ボタン同士が重ならいようにしておきましょう。
（参考：CSSの display: inline、display: block、display: inline-block をマスターしよう！ | たねっぱ！
【コード】
HTML
<!DOCTYPE html> <html> <body> <div> <ul> <li><a href="#">HOME</a></li> <li><a href="#">会社概要</a></li> <li><a href="#">事業内容</a></li> <li><a href="#">会社沿革</a></li> <li><a href="#">採用情報</a></li> <li><a href="#">アクセス</a></li> <li><a href="#">コンタクト</a></li> <li><a href="#">個人情報</a></li> </ul> </div> </body> </html>
CSS
ul {
list-style-type: none;
}
a {
padding: 0.5rem;
margin: 0;
border: 1px solid black;
border-radius: 5px;
display: block;
}
こんな感じのボタン達が出来上がります。
２． %を使って幅(width)を設定する
次に、ボタンの幅を決定しましょう。
【追加するコード】
CSS
ul {
width: 25%;
}
ボタンの幅は、％で指定します。
ここでの％は「親要素のwidthに対しての割合」なので、これを利用してブラウザ幅に応じて幅を変化させることができます。
また、もう一つのポイントは、「並べたいものの幅の合計=親要素の幅」とすることです。
これがイコールになっていないと、意図しない改行などレイアウト崩れを生じます。
※この時widthプロパティを適用するのはa要素ではないのに注意です。
a要素に適用すると、↓の画像のようにa要素のmarginができてしまう等、floatを適用した時にうまくいきません。
（参考：CSSでのパーセント指定まとめ | while(isプログラマ)）
今回は4つのボタンを二段に4つずつ並べるので、
ul要素の幅（width）を25％に設定して、合計を100%にします。
こうすることでブラウザの幅に従ってボタンの幅が変化してくれます。
３．floatプロパティで二段レイアウトにする
【追加するコード】
CSS
li {
float: left;
overflow: hidden;
}
floatを適用することで、二段ボックスのレイアウトにします。
ブラウザの幅を動かすと、ボタンも動いてくれるはずです。
この時、２で触れた幅の合計が100%になっていれば、2段レイアウトの構成は崩れないはずです。
ただ、もっともブラウザ幅を狭くすると、字数の違いからレイアウト崩れが起こってしまいます。
これを調整します。
４．高さ（height）を設定する
【追加するコード】
ＣＳＳ
a {
height: 4rem;
}
floatでレイアウトを組んだ場合は、自動で高さを揃えることはできません。
今回は高さを、改行が起きないような値に設定してみます。
これなら、ブラウザを狭くしてもレイアウト崩れは起こりません。
さらにテキストの位置を調整し、
二段メニューができました。
【コード】
ＨＴＭＬ
<!DOCTYPE html> <html> <body> <div> <ul> <li><a href="#">HOME</a></li> <li><a href="#">会社概要</a></li> <li><a href="#">事業内容</a></li> <li><a href="#">会社沿革</a></li> <li><a href="#">採用情報</a></li> <li><a href="#">アクセス</a></li> <li><a href="#">コンタクト</a></li> <li><a href="#">個人情報</a></li> </ul> </div> </body> </html>
ＣＳＳ
ul {
list-style-type: none;
}
li {
width: 25%;
float: left;
overflow: hidden;
}
a {
margin: 0;
padding: 0.5rem;
border: 1px solid black;
border-radius: 5px;
display: block;
text-decoration: none;
height: 4rem;
text-align: center;
}
デモサイトを開いてブラウザ幅を動かしてみてください。
この後、フォントや色などをはじめ修飾していくと、メニューボタンの完成です。
おわりに
いかがでしたでしょうか。
私自身勉強中の身ですが、有益な情報を発信できるよう努力していきたいと思います。
