VIDEO LESSON

CSSのflex-directionの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 7:23動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、フレックス・ディレクションです。
0:07これは、フレックスボックスで並べる項目が、どの向きに進んでいくかを決めるプロパティです。
0:13横向きに並べればナビゲーションのような一行のメニューになり、縦向きに並べればスマートフォン向けのリストのような形になります。
0:23並びの向きは、このあと学ぶ余白の配り方や揃え方の効き方にも関わる、レイアウトの土台です。
0:29この動画では、代表的な値であるカラムとロウを比べて違いを確認します。
0:34基本の書き方、主な値、実例、効かないときの確認まで、順番に解説します。
0:39例えば、パソコンでは横並びのメニューを、画面の狭いスマートフォンでは縦並びに切り替える、
0:44といった使い分けの出発点になる指定です。
0:49まず基本の書き方です。
0:51セレクターのあとに、フレックス・ディレクション、コロン、値、セミコロンを書きます。
0:57スライドの例では、デモというクラスを持つ要素に、カラムを指定しています。
1:03ここで大切なのは書く場所です。
1:06このプロパティは、並べられる子ではなく、並べ方を決める親のコンテナーに書きます。
1:12親がディスプレイ、フレックスで並び方を用意し、その親に対して進む向きを指定する、
1:16という役割分担を覚えてください。
1:21子に一つずつ書いても全体の向きは変わらないので、まずは親子関係を確認する習慣をつけましょう。
1:28指定できる主な値を確認します。
1:31全部で四つあります。
1:33ロウは左から右へ横に並べる値で、最も基本の形です。
1:37ロウ・リバースも横並びですが、進む向きが逆になり、右から左へ並びます。
1:43カラムは上から下へ縦に並べる値で、項目を積み重ねたいときに使います。
1:49カラム・リバースも縦並びですが、下から上へ進みます。
1:53迷ったときは、項目を読ませたい順番に沿って進む向きを選ぶと分かりやすくなります。
2:00まずはロウとカラムで、横か縦かという大きな違いを押さえてください。
2:06リバースの二つは、順番の見え方が変わる値として、このあと注意点とあわせて理解しましょう。
2:14初期値と継承を確認します。
2:16フレックス・ディレクションの初期値はロウです。
2:19つまり、何も指定しなければ、項目は左から右へ横に並ぼうとします。
2:24横並びが勝手に縦にならないのは、この初期値のためです。
2:28通常の継承はしないので、親に書いた値が子へ自動で受け継がれることはありません。
2:35向きを決めたいコンテナーごとに指定してください。
2:38また、インヘリットは親の計算値を使う値、イニシャルは仕様の初期値に戻す値です。
2:44ブラウザーの既定スタイルや別のクラスが重なると見た目が変わることもあるので、
2:49最終的には開発者ツールで確認しましょう。
2:53主軸と交差軸の考え方を整理します。
2:56項目が進んでいく方向を主軸、それと直角に交わる方向を交差軸と呼びます。
3:01ロウのとき主軸は横向きなので、項目は左右に広がります。
3:05カラムに変えると主軸は縦向きになり、項目は上下に広がります。
3:10ここが大事なポイントで、主軸が入れ替わると、ジャスティファイ・コンテンツが効く方向と、
3:15アライン・アイテムズが効く方向も入れ替わります。
3:20向きを決める指定は、単に並びを変えるだけでなく、その後の揃え方すべての前提になる、
3:24と考えてください。
3:28向きを先に決めてから揃え方を考えると、指定同士がぶつからず、意図した配置を作りやすくなります。
3:35実例を見ていきます。
3:36まずエイチティーエムエルの用意です。
3:39ステージという外側の箱の中にデモがあり、その中に項目が三つ入っています。
3:45一つ目は短い、二つ目は少し長い文章、三つ目は項目という中身です。
3:50頭の部分、ヘッドにはスタイルシートを読み込むリンクを置いてください。
3:56親と子の構造そのものが例の一部です。
3:59三つの項目は文字数が少しずつ違うため、あとで縦に並ぶか横に並ぶかで、大きさや余白の見え方の違いが分かりやすくなっています。
4:09中身は変えず、向きだけを比べる準備をしましょう。
4:12次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。
4:17デモはディスプレイ、フレックスで並び方を用意し、ギャップで項目の間隔を空けます。
4:23項目にはフレックスで基準の大きさが与えられています。
4:27そのうえで、主役であるフレックス・ディレクション、カラムの指定により、三つの項目は横ではなく、
4:32上から下へ縦に積み重なって表示されます。
4:37土台の指定は違いを見やすくするためのものなので、項目が縦一列に並んでいること、
4:42そして間隔が上下方向に空いていることに注目してください。
4:47値を変えて比べてみましょう。
4:49最後のフレックス・ディレクションの値だけを、カラムからロウへ置き換えます。
4:54ファイルを保存してブラウザーを再読み込みすると、縦に積み重なっていた項目が、
4:58左から右へ横一列に並び直します。
5:02エイチティーエムエルや項目の中身は一切変えていません。
5:05カラムは主軸を縦にする指定、ロウは主軸を横にする指定です。
5:09比較のコツは、変える値を一つだけにすることです。
5:13ほかの指定を同時に変えると、違いの原因が分からなくなります。
5:17画面幅を変えたときの収まり方もあわせて観察すると、向きと幅の関係がよく分かります。
5:23間違えやすい点を整理します。
5:25記事でも特に注意されているのが、リバース系の値です。
5:29ロウ・リバースやカラム・リバースを使うと、画面上の見た目の順番は逆になります。
5:34しかし、エイチティーエムエルに書かれた順序そのものは変わりませんし、キーボードで項目を移動する順番も、
5:40見た目に合わせて逆になるわけではありません。
5:45つまり、目で見る順番と、操作や読み上げの順番がずれてしまうおそれがあります。
5:50本当に順番を変えたいときは、見た目だけを逆にするのではなく、エイチティーエムエルの並び自体を見直す方が安全です。
5:58効かないときの確認手順です。
6:00まずネットワークで、スタイルズ・ドット・シーエスエスが正常に取得できているかを確認します。
6:07次にエレメンツで、対象のクラスとセレクターが一致しているかを見てください。
6:13スタイルズで宣言が無効になっていないか、別の宣言に上書きされていないかも重要です。
6:19コンピューテッドでフレックス・ディレクションの最終的な値を確認し、あわせて親にディスプレイ、
6:24フレックスがあるかどうかも調べましょう。
6:29この指定は親に書くものなので、子へ書いていないかという点も見直してください。
6:35最後に、三百二十ピクセル程度の画面幅やキーボード操作でも内容を利用できるか確かめてください。
6:42最後に互換性とまとめです。
6:43フレックス・ディレクションは、記事ではクローム29以降、エッジ12以降、
6:48ファイアフォックス22以降、サファリ9以降で対応すると紹介されています。
6:53値のロウとカラムについては、さらに古い版からの記録もありますが、現在の主要ブラウザーでは広く使えます。
7:00練習は、まずカラムとロウの違いを自分の言葉で説明し、次に文章量や親の幅だけを変えて結果を比べることです。
7:07まとめます。
7:08フレックス・ディレクションは主軸の向きを決める指定で、初期値はロウ、継承はしません。
7:14お疲れさまでした。
7:15関連するフレックス・ラップやジャスティファイ・コンテンツもあわせて確認すると、
7:19配置の理解がさらに深まります。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

flex-directionの役割と主な指定値を解説。直接の子が縦並びから横並びへ変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのflex-directionの使い方：指定値・実例・効かない原因とブラウザー互換性 →