CSSのFlexboxでスマホなどで使える横スクロールメニューを作る
よく見かけるようになったCSSだけでできる横スクロールメニューの作り方です。最近、PCではカルーセルでスマホでは横スクロールメニューと使い分けるのが一番いいような気がしています。横並びする方法としていくつかありますが、ここでは Flexbox を使っていきます。
横スクロールメニュー
<div class="container">
<div class="menu">
<div class="item">
<a href="">item #1</a>
</div>
<div class="item">
<a href="">item #2</a>
</div>
<div class="item">
<a href="">item #3</a>
</div>
...
</div>
</div>
.container {
white-space: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.menu {
display: flex;
}
.item > a {
display: block;
}
余計なCSSは省略しています。ポイントは white-space: nowrap;
で 改行させない のと、 overflow-x: auto;
で横スクロール可能にしていることです。
カード型デザイン
<div class="container">
<div class="menu">
<div class="item">
<a href="">long long long long long text.</a>
</div>
<div class="item">
<a href="">long long long long long text.</a>
</div>
<div class="item">
<a href="">long long long long long text.</a>
</div>
...
</div>
</div>
.container {
padding: 20px 0 20px 20px;
white-space: nowrap;
background-color: #3f51b5;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.menu {
display: flex;
margin-left: -20px;
}
.item {
padding-left: 20px;
flex: 0 0 160px;
white-space: normal;
word-wrap: break-word;
}
.item > a {
display: block;
padding: 1em 1.4em;
color: #000;
text-decoration: none;
background-color: #fff;
box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}
/* padding-rightが描画されないのを修正 */
.item:last-child {
position: relative;
}
.item:last-child::after {
position: absolute;
top: 0;
left: 100%;
width: 20px;
height: 1px;
content: '';
}
横スクロールメニューの応用として、カード型デザインをよく見かけます。 white-space: nowrap;
は 子要素に継承 されるため、カード内のテキストは改行されるように white-space: normal;
を指定します。
また、 padding-right
が描画されないバグについては以前記事を書いているので詳しく知りたい場合は見てください。
CSS本執筆しました!!!
CSS本出します!1/29発売予定
— たかもそ@CSS本1/29発売!! (@takamosoo) 2018年12月31日
自分がCSS学びたての頃にもっとはやく知りたかったテクニックを載せています。CSSの基礎知識について解説していないので、中級者〜向けとなります。CSS入門書を読んではみたものの、思い通りに作れない人にオススメです。
よろしくお願いします。https://t.co/fkz1dM03Pj pic.twitter.com/suYyaPqwIs