CSS書き込みモード：テキストの向きを通しての旅

こんにちは、Web開発者を目指している皆さん！今日は、CSS書き込みモードの世界に興味深い冒険をすることになります。あなたの近所の親切なコンピュータ教師として、私はこの魅力的なプロパティを案内します。テキストを文字通り頭の上に持っていくことができるプロパティですので、シートベルトを締めて、一緒に潜りましょう！

CSS書き込みモードとは？

コードを書き始める前に、書き込みモードとは何かを理解しましょう。本を読んでいるとします。英語では、通常左から右へ、上から下へ読みますが、伝統的な日本の本を読んでいるとどうでしょうか？テキストは縦に上から下へ、右から左へ流れます。ここでCSSのwriting-modeが役立ちます！

CSSのwriting-modeプロパティにより、テキストや他のインラインコンテンツの表示方向をコントロールすることができます。まるでテキストを不同方向に踊らせる魔法の杖のようなものです！

使用可能な値

writing-modeプロパティで使用できる異なる値を見てみましょう：

値	説明
horizontal-tb	テキストは左から右へ、上から下へ流れます
vertical-rl	テキストは縦に上から下へ、右から左へ流れます
vertical-lr	テキストは縦に上から下へ、左から右へ流れます
sideways-rl	テキストは縦に上から下へ、すべての文字が90°時計回りに回転します
sideways-lr	テキストは縦に上から下へ、すべての文字が90°反時計回りに回転します

対象要素

writing-modeプロパティはすべての要素、および::first-letterと::first-lineの擬似要素にも適用できます。まるでテキスト方向を操作するユニバーサルリモコンのようです！

DOM構文

では、CSSでwriting-modeを使ってみましょう：

element {
writing-mode: value;
}

シンプルですね？それぞれの値を見て、実際に動作を見てみましょう！

CSS writing-mode - horizontal-tb 値

これは多くの言語、英語を含むデフォルトの書き込みモードです。例を見てみましょう：

<div class="horizontal-tb">
<p>これは左から右へ、上から下へ horizontal テキストです。</p>
</div>

.horizontal-tb {
writing-mode: horizontal-tb;
}

これは你现在読んでいるこの記事と同じようにテキストを表示します。凝ったことはありませんが、始点として重要です！

CSS writing-mode - vertical-rl 値

では、順序を逆にしてみましょう：

<div class="vertical-rl">
<p>このテキストは縦に右から左へ流れます！</p>
</div>

.vertical-rl {
writing-mode: vertical-rl;
height: 200px;
}

これで、テキストが縦に上から下へ流れ、複数の行は右から左へ始まります。まるで伝統的な日本や中国の巻物を読んでいるようなものです！

CSS writing-mode - vertical-lr 値

左から右への縦書きモードを試みましょう：

<div class="vertical-lr">
<p>このテキストは縦に左から右へ流れます！</p>
</div>

.vertical-lr {
writing-mode: vertical-lr;
height: 200px;
}

今度はテキストが縦になり、左から始まります。まるでモンゴルの文字を読んでいるようなものです！

CSS writing-mode - sideways-rl 値

アクロバティックなものに挑戦しましょう。sideways-rlを試みます：

<div class="sideways-rl">
<p>このテキストは横に右から左へ流れます！</p>
</div>

.sideways-rl {
writing-mode: sideways-rl;
height: 200px;
}

これは各文字が90°時計回りに回転します。まるでテキストが宙返りをしているようです！

CSS writing-mode - sideways-lr 値

最後の反転です：

<div class="sideways-lr">
<p>このテキストは横に左から右へ流れます！</p>
</div>

.sideways-lr {
writing-mode: sideways-lr;
height: 200px;
}

今度は各文字が90°反時計回りに回転します。まるでテキストが背宙返りをしているようです！

CSS writing-mode - 英語での美的な使用

これらの異なる書き込みモードは、さまざまな言語をサポートするために重要ですが、英語でも創造的に使用できます。楽しい例を見てみましょう：

<div class="book-spine">
<h2>The CSS Adventure</h2>
</div>

.book-spine {
writing-mode: vertical-rl;
transform: rotate(180deg);
height: 300px;
width: 50px;
background-color: #f0f0f0;
padding: 10px;
}

これで、棚の本の背表紙のように見える縦書きテキストが作成されます。クールですね？

CSS writing-mode - 関連プロパティ

テキストの向きを完全にコントロールするために、writing-modeと一緒に使用するプロパティがいくつかあります：

プロパティ	説明
text-orientation	テキスト文字の向きを定義します
direction	テキスト、インライン要素、テーブル列の方向を設定します
unicode-bidi	テキストの双方向アルゴリズムをオーバーライドします

簡単な例を見てみましょう：

.vertical-mixed {
writing-mode: vertical-rl;
text-orientation: mixed;
}

これは縦書きのテキストで、ラテン文字は回転し、中国文字は直立したままです。

そして、ここまでがCSS書き込みモードの旅です。ウェブはグローバルなプラットフォームであり、これらのプロパティは、言語やスクリプトに関係なく、すべての人にとってアクセシブルで美しいものにする助けとなります。

次回ウェブサイトを構築する際には、これらのプロパティを試してみてください。予想外の素晴らしいものが生まれるかもしれません！ハッピーコーディングを、そしてあなたのテキストが常に正しい方向に流れることを祈っています！

Credits: Image by storyset