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

CSSのhanging-punctuationプロパティとは？句読点のぶら下げ設定と使い方を解説

hanging-punctuationプロパティとは

hanging-punctuationプロパティは、句読点（約物）をテキストブロック（行ボックス）の外側に「ぶら下げ」て配置できるかどうかを指定するCSSプロパティです。行頭や行末の句読点が原因で生じる不揃いな余白を整え、日本語などの組版において美しく揃ったテキストレイアウトを実現するために使用されます。

指定できる値の一覧

番号値と説明
1.none
句読点をぶら下げません。初期値です。
2.first
最初の行の開始側（行頭）の外側に、句読点をぶら下げて配置します。
3.last
最後の行の終了側（行末）の外側に、句読点をぶら下げて配置します。
4.force-end
行末の句読点を強制的にぶら下げます。
5.allow-end
行末の句読点のぶら下げを許可します。ただし、ぶら下げることでテキストが詰まる場合に限られます。

基本的な使い方

Webページに適用する際は、次のように記述します。

/* 句読点をぶら下げない（初期値） */
hanging-punctuation: none;

/* 行頭の句読点をぶら下げる */
hanging-punctuation: first;

/* 行末の句読点をぶら下げる */
hanging-punctuation: last;

複数の値を組み合わせることも可能です。例えば、行頭と行末の両方で句読点をぶら下げたい場合は、次のように半角スペースで区切って指定します。

hanging-punctuation: first last;

対応ブラウザに関する注意点

hanging-punctuationプロパティは、現時点ではSafariでのみサポートされており、Chrome・Firefox・Edgeなどの主要ブラウザでは利用できません。実務で使用する場合は、非対応ブラウザでもレイアウトが崩れないよう、装飾的な拡張機能として扱うのが安全です。

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

    writing-modeプロパティとは CSSのwriting-modeプロパティは、テキストの行を水平方向にレイアウトするか、垂直方向にレイアウトするかを指定するためのプロパティです。日本語の縦書きのように、上から下へ文字を読ませるレイアウトも簡単に実現できます。 基本構文 writing-mode: horizontal-tb | vertical-rl | vertical-lr; 指定できる主な値 horizontal-tb … 行が上から下へ流れる標準的な横書き表示（初期値） vertical-rl … 行が右から左へ流れる縦書き表示。日本語や中国語などの縦組みレイアウトに適し

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

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