ブロック方向とインライン方向
ブロックおよびインラインのフロー方向と、それらが垂直軸・水平軸に対応する仕組みを学びます。
「ブロック方向とインライン方向」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
ブロック方向
ブロック方向とは、ブロックレベルボックスが積み重なる方向です。横書きの書字体系（LTR/RTL）では、ブロック方向は上から下です。縦書きの書字モードでは、左から右または右から左に変わります。
インライン方向
インライン方向とは、1行の中でテキストが流れる方向です。LTR言語では、インライン方向は左から右です。RTLでは右から左です。縦書きの書字モードでは上から下になります。
writing-mode プロパティ
writing-modeは、テキストの流れの基本的な向きを設定します。
horizontal-tb— 横書きのテキストを上から下へ（デフォルト）vertical-rl— 縦書きのテキストを右から左へ列配置vertical-lr— 縦書きのテキストを左から右へ列配置
横書きの書字体系
writing-mode: horizontal-tb（デフォルト）では、次のようになります。
- ブロック方向 = 縦方向（上 → 下）
- インライン方向 = 横方向（LTRでは左 → 右、RTLでは右 → 左）
- ブロック開始側 = 上、ブロック終了側 = 下
- インライン開始側 = 左（LTR）または右（RTL）
縦書きの書字体系
writing-mode: vertical-rlでは、次のようになります。
- ブロック方向 = 横方向（右 → 左）
- インライン方向 = 縦方向（上 → 下）
- ブロック開始側 = 右、ブロック終了側 = 左
- インライン開始側 = 上、インライン終了側 = 下
軸を視覚化する
書字モードに合わせて回転する座標系として考えてください。論理プロパティは、固定された画面ではなく、この回転可能な座標系を基準に位置を表します。
text-orientation
縦書きの書字モードでは、text-orientationによって個々の文字の向きを制御します。
mixed: ラテン文字を回転させ、CJK文字は正立させるupright: すべての文字を正立させる（縦書きのCJK向け）sideways: すべての文字を横向きに回転させる
横向きの縦書きラベル
実用例として、横書きのコンテキストで回転させたサイドバーのラベルやグラフの軸ラベルに使えます。
<div class="chart-label">Revenue</div>
書字モードの混在
コンテナに1つの書字モードを設定しながら、個々のインライン要素には別の書字モードを設定できます。これは、同じ段落内でラテン文字とCJK文字を混在させる場合に使われます。
block-size と inline-size
widthとheightに対応する論理プロパティは次のとおりです。
inline-size= horizontal-tbにおけるwidth（インライン方向の寸法）block-size= horizontal-tbにおけるheight（ブロック方向の寸法）
<div class="box">inline-size sets the width in LTR</div>
text-combine-upright プロパティ
数字や略語を含む縦書きのテキストでは、text-combine-upright（tcy）を使うと、短い文字列を1つの縦書きのテキストセル内に正立させ、圧縮して表示できます。
確認問題
LTR言語でwriting-mode: horizontal-tbを指定した場合、「ブロック」軸はどの軸ですか。
まとめ
ブロック軸はブロックボックスを積み重ねる方向で、インライン軸はテキストが流れる方向です。横書きの書字体系では、ブロック軸は縦、インライン軸は横です。縦書きではこれらが入れ替わります。writing-modeが基本的な軸の向きを制御します。論理プロパティは、その時点でブロック軸とインライン軸になっている方向に適応します。
よくある質問
「ブロック方向とインライン方向」レッスンは無料ですか？
はい。「ブロック方向とインライン方向」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「ブロック方向とインライン方向」で何を学びますか？
ブロックおよびインラインのフロー方向と、それらが垂直軸・水平軸に対応する仕組みを学びます。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「ブロック方向とインライン方向」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。