CSS テキストの書式設定

CSS のテキストプロパティを使用すると、Word 文書のような日本語版 Web ページの文字間隔、配置、インデントなどを定義できます.CSS で一般的に使用されるテキストプロパティは次のとおりです。

text-align: テキストの水平方向の配置を設定します。
text-decoration: テキストの装飾を設定します。
text-transform: 中国語と英語のテキストの大文字と小文字の変換方法を設定します。
text-indent: テキストのインデント方法を設定します。
line-height: 行の高さを設定します。
letter-spacing: 文字間隔を設定します。
word-spacing: 単語間の間隔を設定します (日本語では無効)。
text-shadow: テキストの影を設定します。
vertical-align: テキストの垂直方向の配置を設定します。
white-space: テキスト内の空白の処理方法を設定します。
direction: テキストの方向を設定します。

コンテンツ 表示

1. テキスト揃え

text-align 属性は、要素の日本語テキストの水平方向の配置を設定するために使用されます. 属性のオプション値は次のとおりです:

価値	説明
left	デフォルト、左揃え
right	右揃え
center	中央揃え
justify	正当化する
inherit	親要素から text-align 属性の値を継承する

[例] text-align 属性を使用して、テキストの水平方向の配置を設定します。

 <!DOCTYPE html>
<html>
<head>
    <style>
        p{
            border: 1px solid black;    /*見やすさを重視して、p要素に境界線を設定しました*/
        }
        .text1 {
            text-align: left;    /*左揃え*/
        }
        .text2 {
            text-align: right;    /*右揃え*/
        }
        .text3 {
            text-align: center;    /*中央揃え*/
        }
    </style>
</head>
<body>
    <p class="text1">左揃え</p>
    <p class="text2">右揃え</p>
    <p class="text3">中央揃え</p>
</body>
</html>

実行結果は次の図のとおりです。

text-align が justify に設定されている場合、テキストの各行が同じ幅 (最後の行を除く) になるように、テキストの各行が引き伸ばされます (文字間のスペースが増えます)。この配置は通常、雑誌や雑誌などの出版物で使用されます。新聞。要素内のテキストが 1 行未満の場合、両端で揃えることができないことに注意することが重要です (既定では、左揃えで表示されます)。要素内のテキストが十分に長く、要素内でワードラップが発生した場合にのみ、最後の行を除くテキストが両端揃えになります。次の例に示すように:

 <!DOCTYPE html>
<html>
<head>
    <style>
        p{
            border: 1px solid black;    /*文本の配置方法をより明確にするため、pタグにフレームを設定します*/
        }
        .text {
            width: 125px;
            text-align: justify;        /*両端揃えを設定します*/
        }
    </style>
</head>
<body>
    <p class="text">両端揃え、両端揃え</p>
</body>
</html>

実行結果は次の図のとおりです。

2. テキスト装飾

text-decoration 属性は、テキストの装飾を設定または削除するために使用されます. 最も一般的な方法は、 text-decoration 属性を使用して<a>タグのデフォルトの下線を削除することです.もちろん、 text-decoration 属性を使用すると、ハイライト効果を実現するために必要な要素内のテキストに装飾を追加することもできます。

text-decoration 属性のオプションの値は次のとおりです。

価値	説明
none	デフォルト値、標準テキスト、追加装飾なし、既存のテキスト装飾を削除するために使用できます
underline	テキストの下に下線を追加する
overline	テキストの上にスライドラインを追加する
line-through	テキストの途中でテキストを横切る線を定義します (取り消し線と同様)
blink	点滅するテキストを定義します (現在、主要なブラウザーではサポートされていません)。
inherit	親要素から text-decoration 属性の値を継承する

【例】 text-decoration 属性を使用して、テキストに装飾を追加します。

 <!DOCTYPE html>
<html>
<head>
    <style>
    .none {
        text-decoration: none;
    }
    .underline {
        text-decoration: underline;
    }
    .overline {
        text-decoration: overline;
    }
    .line-through {
        text-decoration: line-through;
    }
    </style>
</head>
<body>
        <p class="none">装飾なしのテキスト</p>
        <p class="underline">下線の付いたテキスト</p>
        <p class="overline">上線の付いたテキスト</p>
        <p class="line-through">取り消し線の付いたテキスト</p>
</body>
</html>

実行結果は次の図のとおりです。

3. テキスト変換

text-transform 属性は、テキスト内の英字の大文字と小文字を制御するために使用されます. この属性を使用すると、元のテキストを変更することなく、テキスト内の英語を小文字、大文字、または大文字に一律に変更できます.

text-transform 属性のオプションの値は次のとおりです。

価値	説明
none	デフォルト値、元のテキストで表示、テキストの英語を変更しない
capitalize	テキスト内のすべての単語を大文字で始めるように変更する
uppercase	テキスト内のすべての英字を大文字に変更します
lowercase	テキスト内のすべての英字を小文字に変更します
inherit	親要素から text-transform 属性の値を継承する

[例] text-transform を使用して、中国語と英語のテキストの大文字と小文字を定義します。

 <!DOCTYPE html>
<html>
<head>
    <style>
    .none {
        text-transform: none;
    }
    .uppercase {
        text-transform: uppercase;
    }
    .lowercase {
        text-transform: lowercase;
    }
    .capitalize {
        text-transform: capitalize;
    }
    </style>
</head>
<body>
    <p>原文： text-transform &emsp;<span class="none">変換後：text-transform</span></p>
    <p>原文： text-transform &emsp;<span class="uppercase">変換後：TEXT-TRANSFROM</span></p>
    <p>原文： TEXT-TRANSFROM &emsp;<span class="lowercase">変換後：text-transform</span></p>
    <p>原文： text-transform &emsp;<span class="capitalize">変換後：Text-Transform</span></p>
</body>
</html>

実行結果は次の図のとおりです。

4. テキストインデント

The text-indent attribute is used to indent in the first line of text in the element in the element. この属性のオプションの値は次のとおりです。

価値	説明
length	固定値と単位 (たとえば 2em) の形式でインデント距離を定義します。デフォルト値は 0 です。
%	親要素の幅に基づくパーセンテージとしてインデント距離を定義します
inherit	親要素から text-indent 属性の値を継承する

ヒント: 特定の値またはパーセンテージのいずれを使用する場合でも、負の値を設定できますが、そうすると、テキストコンテンツが要素領域からはみ出す可能性があります。

[例] text-indent を使用して、テキストに 1 行目のインデント効果を追加します。

 <!DOCTYPE html>
<html>
<head>
<style>
    p {
        border: 1px solid #ccc;
        text-indent:2em;
    }
</style>
</head>
<body>
    <p>text-indentプロパティは、要素内のテキストに首行をインデントする効果を追加するために使用されます。左側からインデントするのか、右側からインデントするのかは、directionプロパティで定義されたテキストの方向に依存します。</p>
</body>
</html>

実行結果は次の図のとおりです。

注: テキストが左からインデントされるか右からインデントされるかは、方向属性で定義されたテキストの方向によって異なります。

5.行の高さ

line-height 属性は、テキストの行の高さを設定するために使用され、属性のオプションの値は次のとおりです。

価値	説明
normal	デフォルト値、デフォルトの行の高さを使用、行の高さを追加設定しない
number	行の高さを特定の数値で設定します。この数値は現在のフォントサイズで乗算され、結果の値が行の高さとして設定されます。
length	固定の行の高さを数値と単位として設定します
%	行の高さを現在のフォントサイズに基づいたパーセンテージで設定します
inherit	親要素から line-height 属性の値を継承する

[例] line-height を使用して、テキストの行の高さを設定します。

 <!DOCTYPE html>
<html>
<head>
    <style>
    p.small {
        line-height: 0.8;
    }
    p.big {
        line-height: 200%;
    }
    </style>
</head>
<body>
    <p>
        これはデフォルトの標準行間<br>
        これはデフォルトの標準行間<br>
        これはデフォルトの標準行間<br>
    </p>
    <p class="small">
        数字を使用して小さな行の高さを定義する<br>
        数字を使用して小さな行の高さを定義する<br>
        数字を使用して小さな行の高さを定義する<br>
    </p>
    <p class="big">
        パーセント形式を使って大きな行間を定義する<br>
        パーセント形式を使って大きな行間を定義する<br>
        パーセント形式を使って大きな行間を定義する<br>
    </p>
</body>
</html>

実行結果は次の図のとおりです。

6. 文字間隔

letter-spacing 属性は、文字間の間隔を設定するために使用されます. 属性のオプションの値は次のとおりです:

価値	説明
normal	文字間に余分なスペースがないことを意味するデフォルト値
length	文字間の固定間隔を値プラス単位として設定します (負の値を使用できます)
inherit	親要素から letter-spacing 属性の値を継承する

[例] 文字間のスペースを設定するには、letter-spacing プロパティを使用します。

 <!DOCTYPE html>
<html>
<head>
    <style>
    p {
        letter-spacing: 2px;
    }
    </style>
</head>
<body>
    <p>
        letter-spacing 属性は、文字と文字の間隔を設定するために使用されます。<br>
        letter-spacing 属性は、文字と文字の間隔を設定するために使用されます。<br>
        letter-spacing 属性は、文字と文字の間隔を設定するために使用されます。<br>
    </p>
</body>
</html>

実行結果は次の図のとおりです。

7.単語間隔

word-spacing 属性は、単語間の間隔を設定するために使用されますが、日本語では無効です. 属性のオプション値は次のとおりです:

価値	説明
normal	デフォルト値。単語間に余分なスペースがないことを意味します
length	単語間の固定間隔を数値と単位として設定します (負の値を使用できます)
inherit	親要素から word-spacing 属性の値を継承する

[例] word-spacing 属性を使用して、文字間の間隔を設定します。

 <!DOCTYPE html>
<html>
<head>
    <style>
    p {
        word-spacing: 2em;
    }
    </style>
</head>
<body>
    <p>
        word-spacing属性は、単語と単語の間の間隔を設定するために使用されますが、日本語には効果がありません。<br>
        word-spacing属性は、単語と単語の間の間隔を設定するために使用されますが、日本語には効果がありません。<br>
        word-spacing属性は、単語と単語の間の間隔を設定するために使用されますが、日本語には効果がありません。<br>
    </p>
</body>
</html>

実行結果は次の図のとおりです。

8.テキストシャドウ

text-shadow 属性は、テキストに影とぼかし効果を追加するために使用されます。属性の構文は次のとおりです。

text-shadow: h-shadow v-shadow ぼかし色;

構文は次のように説明されています。

h-shadow: 必要な値。影の水平位置を設定します。負の値を使用できます。
v-shadow: 必要な値。影の垂直位置を設定します。負の値を使用できます。
blur: オプションの値。ぼかし距離を設定します。
color: オプションの値。影の色を設定します。

注: text-shadow 属性は、1 つまたは複数の影の効果を設定できます。必要なのは、各グループの値をコンマで区切ることだけです, background 属性の使用法と同様)。

[例] text-shadow 属性を使用して、テキストの影効果を設定します。

 <!DOCTYPE html>
<html>
<head>
    <style>
    p {
        text-shadow: 2px 15px red,
                     0px -15px 5px blue; /* テキストに影とぼかしを追加するtext-shadowプロパティ */
    }
    </style>
</head>
<body>
    <p>text-shadow 属性は、テキストに影とボケ効果を追加することができます</p>
</body>
</html>

実行結果は次の図のとおりです。

9. 垂直整列

vertical-align 属性は、要素内のテキストの垂直方向の配置を定義するために使用されます. 属性のオプションの値は次のとおりです:

価値	説明
baseline	デフォルトでは、要素のベースラインを親要素のベースラインに揃えます
sub	添え字の配置は、親要素のベースラインに対して要素のベースラインを下げます
super	親要素のベースラインに対して要素のベースラインを上げる、上付き文字の配置
top	上揃え、要素のインラインボックスの上部をラインボックスの上部に揃えます。
text-top	テキストの上部を揃え、要素の上部を親要素のフォントの上部に揃えます
middle	画像で通常使用される中央揃えは、画像の垂直方向の中心線をテキストの中心線 (テキスト要素のインラインボックスの中心線) に揃えます。
bottom	下揃え、要素のインラインボックスの上部をラインボックスの下部に揃えます。
text-bottom	テキストの下部を揃えます。これは、要素のインラインボックスの下部を行ボックスの下部の行に揃えることです。
length	要素のベースラインと親要素のベースラインの間の距離を数値と単位の形式で設定します (負の値を指定できます)。
%	「line-height」属性のパーセンテージ値を使用してこの要素を並べます。負の値を使用できます
inherit	親要素から vertical-align 属性の値を継承する

上記の表には、ベースライン、ボトムライン、トップライン、ミッドラインの概念が記載されていますが、これらは正確には何を指していますか?

上段：日本語の漢字の上端。
正中線: 英小文字 x の中央を通る線。
ベースライン: 小文字の x の下端。
結論：日本語の漢字の下端。
コンテンツ領域: 下の行と上の行で囲まれた領域を指します。
行の高さ: コンテンツ領域と、コンテンツ領域に基づいて対称的に拡張される空白領域を含めて、行の高さと呼びます。これは、隣接するテキスト行のベースライン間の距離と見なすこともできます。
行間隔: 前のテキスト行の最下行と、隣接するテキスト行の間の次のテキスト行の最上行との間の距離を指します。
インラインボックス: 表示できないブラウザーレンダリングモデルの概念ですが、存在し、その高さは行の高さと同じです。
ラインフレーム: 同じラインの内側のフレームと同様に、ラインフレームは、ラインの仮想的な長方形のフレームを指し、ブラウザーのレンダリングモードの概念でもあります。ラインボックスの高さは、行内のすべての要素の中でインラインボックスの最大値に等しくなります (行の高さが最大のインラインボックスがベンチマークとして使用され、他のインラインボックスは独自の配置を使用してベンチマークに合わせられます)。方法、および行ボックスの高さが最終的に計算されます)。

[例] vertical-align 属性を使用して、要素の垂直方向の配置を設定します。

 <!DOCTYPE html>
<html>
<head>
    <style>
    img.btn {
        vertical-align: super;
    }
    img.top {
        vertical-align: text-top;
    }
    </style>
</head>
<body>
    <p>vertical-alignの<img class="btn" src="./eg_cute.gif">属性は、要素内のテキストの垂直方向の配置方法を定義するために使用されます。</p>
    <p>vertical-alignの<img class="top" src="./eg_cute.gif">属性は、要素内のテキストの垂直方向の配置方法を定義するために使用されます。</p>
</body>
</html>

実行結果は次の図のとおりです。

10.空白

white-space 属性は、要素内の空白の処理方法を設定するために使用されます. 属性のオプションの値は次のとおりです:

価値	説明
normal	デフォルト、テキスト内の空白は無視されます
pre	`<pre>`タグの効果と同様に、テキスト内の空白を保持します
nowrap	`<br>`タグが出現するまで、テキストは折り返しなしで 1 行に表示されます。
pre-wrap	テキスト内の空白を保持しますが、行を通常どおり折り返します
pre-line	テキスト内の空白をマージしますが、改行は保持します
inherit	親要素から空白属性の値を継承する

[例] 要素内の空白を処理するには、white-space 属性を使用します。

 <!DOCTYPE html>
<html>
<head>
    <style>
        p {
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <p>
        white-space属性は、要素内の空白の処理方法を設定するために使用されます。                         
        white-space属性は、要素内の空白の処理方法を設定するために使用されます。
    </p>
</body>
</html>

実行結果は次の図のとおりです。

direction 属性は、テキストの方向を設定するために使用され、属性のオプション値は次のとおりです。

価値	説明
ltr	デフォルトでは、テキストは左から右に出力されます
rtl	テキストは右から左方向に出力されます
inherit	親要素から方向属性の値を継承する

[例] direction 属性を使用して、テキストの方向を設定します。

 <!DOCTYPE html>
<html>
<head>
    <style>
        .ltr {
            direction: ltr;
        }
        .rtl {
            direction: rtl;
        }
    </style>
</head>
<body>
    <p class="ltr">direction 属性はテキストの方向を設定するために使用されます</p>
    <p class="rtl">direction 属性はテキストの方向を設定するために使用されます</p>
</body>
</html>

実行結果は次の図のとおりです。