CSSフレックスボックスでモバイル向け縦並びを実現する方法｜flex-direction column完全入門

モバイル向けに縦並びを実現するflex-direction: column

先生と生徒の会話形式で理解しよう

生徒

「スマホで見ると、横並びのレイアウトが見づらいんですが、縦に並べる方法はありますか？」

先生

「CSSのフレックスボックスにあるflex-directionを使うと、簡単に縦並びにできます。」

生徒

「パソコンをほとんど触ったことがなくても理解できますか？」

先生

「箱を上から順番に積むイメージで説明するので大丈夫ですよ。」

1. モバイル向けに縦並びが必要な理由

スマートフォンの画面は、パソコンに比べて横幅がとても狭いです。そのため、横に要素を並べたままだと文字が小さくなったり、画面からはみ出したりします。そこで重要になるのが、縦並びのレイアウトです。

縦並びにすると、上から下へ自然にスクロールできるため、初めてサイトを見る人でも内容を理解しやすくなります。モバイル向けデザインでは、縦並びが基本と考えて問題ありません。

2. flex-directionとは何か

flex-directionは、フレックスボックスで要素を「どの方向に並べるか」を決めるための設定です。難しそうな英単語ですが、意味はとてもシンプルです。 directionは「方向」という意味なので、「並ぶ方向を決める」と覚えてください。

初期状態では、フレックスボックスは横並びになります。これを縦並びに変えるために、flex-directionにcolumnを指定します。 columnは「縦の列」という意味があります。

3. flex-direction columnの基本イメージ

flex-direction columnを理解するには、積み木を想像するとわかりやすいです。横並びは、積み木を横一列に並べる状態です。縦並びは、積み木を上から順番に積み重ねる状態です。

フレックスボックスにcolumnを指定すると、中に入っている要素は自動的に上から下へ並びます。特別な計算や難しい指定は必要ありません。

4. 縦並びを実現する基本コード

ここでは、フレックスボックスを使って要素を縦に並べる基本例を紹介します。親要素にdisplayでフレックスボックスを指定し、directionをcolumnに設定します。


<style>
	.container {
	    display: flex;
	    flex-direction: column;
	}
	.item {
	    border: 1px solid #ccc;
	    padding: 16px;
	    margin: 8px;
	}
</style>

<div class="container">
	<div class="item">メニュー1</div>
	<div class="item">メニュー2</div>
	<div class="item">メニュー3</div>
</div>

ブラウザ表示

このように、特別なことをしなくても自然に縦並びになります。モバイル画面でのナビゲーションやカード表示にとても便利です。