Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
水平方向に並ぶメニューのためのスタイルまとめ
<html>
<head>
<title>水平方向に並ぶメニュー(メインメニューなど)のためのスタイルまとめ</title>
<style>
/**
* レイアウト用のスタイル(メニューとは無関係)
*/
body {
position: relative;
font-family: sans-serif;
}
.page {
position: absolute;
box-sizing: border-box;
margin: auto;
padding: 30px;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 50%;
background-color: #eee;
}
/**
* メニューのための共通スタイル
*/
/* ul メニューラッパ */
.menu {
background-color: #ddd;
list-style: none;
padding: 0;
}
/* li メニューアイテム */
.menu-item {
background-color: #999;
}
/* a メニューリンク */
.menu-link {
background-color: #333;
color: #fff;
text-decoration: none;
}
/* メニューがアクティブなときのスタイル */
.menu-item-active .menu-link {
position: relative;
background-color: #068;
}
.menu-item-active .menu-link:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
content: " ";
background-color: #39a;
}
/**
* 1. float を使ったメニュー
*/
.menu-float {
overflow: hidden;
}
.menu-float .menu-item {
display: block;
float: left;
width: 25%;
min-width: 100px;
text-align: center;
}
.menu-float .menu-link {
line-height: 24px;
display: block;
padding: 8px 10px;
word-wrap: break-word;
}
/**
* 2. inline-block を使ったメニュー
*/
.menu-inline {
text-align: center;
}
.menu-inline .menu-item {
display: inline-block;
vertical-align: middle;
}
.menu-inline .menu-link {
display: block;
margin: 0 10px;
max-width: 200px;
padding: 8px 10px;
word-wrap: break-word;
}
/**
* 3. table を使ったメニュー
*/
.menu-table {
display: table;
table-layout: fixed;
width: 100%;
}
.menu-table .menu-item {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.menu-table .menu-link {
display: block;
padding: 8px 10px;
word-wrap: break-word;
}
</style>
</head>
<body>
<div class="page">
<h1>メニューの実装方法</h1>
<h2>float</h2>
<ul class="menu menu-float">
<li class="menu-item"><a href="" class="menu-link">ホーム</a></li>
<li class="menu-item menu-item-active"><a href="" class="menu-link">アバウト</a></li>
<li class="menu-item"><a href="" class="menu-link">serviceserviceserviceserviceservice</a></li>
<li class="menu-item"><a href="" class="menu-link">コンタクト</a></li>
</ul>
<ul>
<li>◯ 要素と要素の間に隙間が空かないので指定した幅( 100% など)にぴったり合わせられる。</li>
<li>◯ min-width を決めて幅がしきい値よりも狭い場合に末尾の要素を 2 行目に送ることができる。</li>
<li>× 改行が発生するとその要素だけ高さが大きくなり、また縦方向の中央寄せもできないので、セル内での改行が発生しないよう調整が必要。</li>
</ul>
<h2>inline-block</h2>
<ul class="menu menu-inline">
<li class="menu-item"><a href="" class="menu-link">ホーム</a></li>
<li class="menu-item menu-item-active"><a href="" class="menu-link">アバウト</a></li>
<li class="menu-item"><a href="" class="menu-link">serviceserviceserviceserviceservice</a></li>
<li class="menu-item"><a href="" class="menu-link">コンタクト</a></li>
</ul>
<ul>
<li>◯ レスポンシブでの中央寄せがやりやすい。</li>
<li>◯ 幅が足りない場合は、行内での縦方向の中央揃えを維持しながらスムーズに改行してくれる。</li>
<li>× 要素間にスペースが空くので厳密に幅を指定できない(対策はあるが、どのモダンブラウザでも問題なく解決できる方法がなさそう)。</li>
</ul>
<h2>table</h2>
<ul class="menu menu-table">
<li class="menu-item"><a href="" class="menu-link">ホーム</a></li>
<li class="menu-item menu-item-active"><a href="" class="menu-link">アバウト</a></li>
<li class="menu-item"><a href="" class="menu-link">serviceserviceserviceserviceservice</a></li>
<li class="menu-item"><a href="" class="menu-link">コンタクト</a></li>
</ul>
<ul>
<li>◯ 幅 100% ぴったりにしながら( inline アプローチの課題を解決しながら)、かつ、セル内での改行が発生しても縦中央揃えを崩さない( float アプローチの課題を解決する)メニューが作れる。</li>
<li>× float や inline のように改行が発生しないので、幅が狭くてセル内改行が想定以上に発生しないよう調整が必要。</li>
<li>× table 特有の問題が起こる。例えば CSS の仕様だとテーブルのセルに `position: relative` が使えない(効くブラウザが多いけれど)。</li>
</ul>
<h2>flexbox</h2>
<p>割愛。あと数年すれば主流になるかも。</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.