CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのwriting-modeプロパティ徹底解説！テキストを縦書き・横書きにする方法

writing-modeプロパティとは

CSSのwriting-modeプロパティは、テキストの行を水平方向にレイアウトするか、垂直方向にレイアウトするかを指定するためのプロパティです。日本語の縦書きのように、上から下へ文字を読ませるレイアウトも簡単に実現できます。

基本構文

writing-mode: horizontal-tb | vertical-rl | vertical-lr;

指定できる主な値

  • horizontal-tb … 行が上から下へ流れる標準的な横書き表示（初期値）
  • vertical-rl … 行が右から左へ流れる縦書き表示。日本語や中国語などの縦組みレイアウトに適しています
  • vertical-lr … 行が左から右へ流れる縦書き表示

writing-modeの使用例①

まずは、p要素に対して「vertical-rl」を指定し、テキストを縦書きで表示するシンプルな例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
p {
   writing-mode: vertical-rl;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<p>This is demo text.</p>
</body>
</html>

出力結果

CSSのwriting-modeプロパティ徹底解説！テキストを縦書き・横書きにする方法

このように、テキストが上から下へ縦方向に流れて表示され、全体の行は右側から配置されます。

writing-modeの使用例②

続いて、「vertical-rl」と「horizontal-tb」を組み合わせた別の例を見てみましょう。word-spacingプロパティと併用することで、縦書き・横書きそれぞれの文字間隔も調整できます。

<!DOCTYPE html>
<html>
<head>
<style>
p.demo1 {
   word-spacing: 1cm;
   color: blue;
   writing-mode: vertical-rl;
}
p.demo2 {
   word-spacing: 40px;
   writing-mode: horizontal-tb;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<h2>Heading2</h2>
<p class="demo1">This is demo text.</p>
<h2>Heading2</h2>
<p class="demo2">This is demo text.</p>
</body>
</html>

出力結果

CSSのwriting-modeプロパティ徹底解説！テキストを縦書き・横書きにする方法

demo1クラスの段落は青色の縦書きで表示され、demo2クラスの段落は通常の横書きで表示されていることが確認できます。このようにwriting-modeを使い分けることで、1つのページ内に異なるテキストの流れを混在させることが可能です。

まとめ

writing-modeプロパティを活用すれば、CSSだけで縦書きレイアウトを実装できます。特に和風デザインや雑誌風のレイアウト、サイドメニューの縦書きタイトルなど、表現の幅を大きく広げてくれる便利なプロパティなので、ぜひ活用してみてください。

  1. CSSのwhite-spaceプロパティとは？要素内の空白・改行の扱い方を徹底解説

    CSSのwhite-spaceプロパティを使うと、HTML要素内の半角スペース、タブ、改行などの空白文字をどのように表示するかを細かく制御できます。デフォルトでは連続する空白は1つにまとめられますが、このプロパティを指定することで、ソースコード上の空白や改行をそのまま反映させたり、逆に折り返しを禁止したりすることが可能です。 white-spaceプロパティの基本例 以下は、normalとpreという2つの値を使って、空白の扱いの違いを比較するサンプルコードです。 <!DOCTYPE html> <html> <head> <style>

  2. CSSのpointer-eventsプロパティとは？使い方をコード例で解説

    pointer-eventsプロパティとは CSSのpointer-eventsプロパティは、要素に対してポインターイベントが発生した際に、その要素がアクション（反応）を行うかどうかを指定するためのプロパティです。ポインターイベントは、マウスのクリック、タッチ操作、スタイラスペンなど、さまざまな入力デバイスによって発生します。 このプロパティを活用すると、リンクやボタンへのクリック・ホバー操作を無効化したり、逆に有効化したりできます。主な値は以下のとおりです。 auto：デフォルトの動作。要素が通常どおりポインターイベントに反応します。 none：要素がポインターイベントに反応しなくなります