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

CSSのhanging-punctuationプロパティで句読点を行ボックスの外側に配置する方法

hanging-punctuationプロパティとは

CSSのhanging-punctuationプロパティを使用すると、句読点（カンマや句点など）をテキストの行ボックスの外側に「ぶら下げ」て配置できるかどうかを指定できます。特に日本語や中国語などの組版において、行頭や行末の句読点を美しく揃えたい場合に役立つプロパティです。

指定できる値の一覧

番号値と説明
1.none
句読点をぶら下げません。これが初期値です。
2.first
先頭行の開始側（行頭）の外側に句読点を配置できるようにします。
3.last
最終行の終了側（行末）の外側に句読点を配置できるようにします。

基本的な使い方

Webページでは、次のようにCSSを記述して指定します。

hanging-punctuation: none;
hanging-punctuation: first;
hanging-punctuation: last;

補足：ブラウザ対応について

hanging-punctuationプロパティは、現在のところ主要ブラウザの中ではSafariがサポートしており、ChromeやFirefoxなどでは利用できません。実際のサイトで使用する場合は、対応していない環境でもレイアウトが崩れないよう、フォールバックのスタイルを用意しておくことをおすすめします。

  1. CSSでタブ文字の幅を設定する方法｜tab-sizeプロパティの使い方を解説

    CSSでタブ文字（タブキーで挿入される空白）の表示幅を変更したい場合は、tab-size プロパティを使用します。デフォルトではタブ幅は8文字分に設定されていますが、このプロパティを使うことで任意のスペース数に調整できます。tab-sizeプロパティの基本tab-sizeプロパティは、主に <pre> や <code> など、整形済みテキストを表示する要素に対して効果を発揮します。指定できる値は以下のとおりです。数値： タブ1つあたりの幅をスペースの文字数で指定します（例： tab-size: 12;）length値： pxやemなどの単位で幅を指定することも可能ですi

  2. CSSのuser-selectプロパティでテキスト選択の可否を設定する方法

    CSSでは、user-selectプロパティを使用することで、要素内のテキストがユーザーによって選択可能かどうかを制御できます。例えば、ボタンやコピーライト表記など、ユーザーに選択されたくないテキストに対してuser-select: none;を指定すると、ドラッグしてもテキストが選択されなくなります。基本的な使い方以下の例では、div要素にuser-select: none;を適用しています。このスタイルが設定された要素内のテキストは、マウスやタッチ操作でも選択できません。サンプルコード<!DOCTYPE html> <html> <head>