Articles
CSS入門
テキストの余白関連のCSSプロパティ

テキストの余白関連のCSSプロパティ

この記事ではテキストの余白関連のCSSプロパティについて説明します。

line-heightやword-spacingなどのプロパティについて、利用用途や記述の仕方を学べます。

YouTube Video

プレビュー用のHTMLの作成

css-text-space.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-text-space.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Text-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Typography (Text-Related)</h2>
 20        </header>
 21        <article>
 22            <h3>line-height</h3>
 23            <section>
 24                <header><h4>line-height: normal</h4></header>
 25                <section class="sample-view">
 26                    <p class="line-height-normal">This is a paragraph with normal line height.</p>
 27                </section>
 28                <header><h4>line-height: 1.5</h4></header>
 29                <section class="sample-view">
 30                    <p class="line-height-150">This is a paragraph with 1.5 line height.</p>
 31                </section>
 32                <header><h4>line-height: 200%</h4></header>
 33                <section class="sample-view">
 34                    <p class="line-height-200">This is a paragraph with 200% line height.</p>
 35                </section>
 36            </section>
 37        </article>
 38        <article>
 39            <h3>letter-spacing</h3>
 40            <section>
 41                <header><h4>letter-spacing: normal</h4></header>
 42                <section class="sample-view">
 43                    <p class="letter-spacing-normal">This is text with normal letter spacing.</p>
 44                </section>
 45                <header><h4>letter-spacing: 4px</h4></header>
 46                <section class="sample-view">
 47                    <p class="letter-spacing-wide">This is text with wide letter spacing.</p>
 48                </section>
 49                <header><h4>letter-spacing: -1px</h4></header>
 50                <section class="sample-view">
 51                    <p class="letter-spacing-narrow">This is text with narrow letter spacing.</p>
 52                </section>
 53            </section>
 54        </article>
 55        <article>
 56            <h3>word-spacing</h3>
 57            <section>
 58                <header><h4>word-spacing: normal</h4></header>
 59                <section class="sample-view">
 60                    <p class="word-spacing-normal">This is text with normal word spacing.</p>
 61                </section>
 62                <header><h4>word-spacing: 4px</h4></header>
 63                <section class="sample-view">
 64                    <p class="word-spacing-wide">This is text with wide word spacing.</p>
 65                </section>
 66                <header><h4>word-spacing: -1px</h4></header>
 67                <section class="sample-view">
 68                    <p class="word-spacing-narrow">This is text with narrow word spacing.</p>
 69                </section>
 70                <header><h4>word-spacing: -0.1em; letter-spacing: -0.05em;</h4></header>
 71                <section class="sample-view">
 72                    <p class="word-and-letter-spacing">This is text with word and letter spacing.</p>
 73                </section>
 74            </section>
 75        </article>
 76        <article>
 77            <h3>word-break</h3>
 78            <section>
 79                <header><h4>word-break: normal</h4></header>
 80                <section class="sample-view">
 81                    <p class="box word-break-normal">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 82                </section>
 83                <header><h4>word-break: break-all</h4></header>
 84                <section class="sample-view">
 85                    <p class="box word-break-break-all">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 86                </section>
 87                <header><h4>word-break: keep-all</h4></header>
 88                <section class="sample-view">
 89                    <p class="box word-break-keep-all">&#12371;&#12428;&#12399;&#26085;&#26412;&#35486;&#12398;&#25991;&#31456;&#12391;&#12377;&#12290;&#12371;&#12398;&#35373;&#23450;&#12391;&#12399;&#33258;&#28982;&#12395;&#25913;&#34892;&#12373;&#12428;&#12414;&#12377;&#12290;</p>
 90                </section>
 91            </section>
 92        </article>
 93        <article>
 94            <h3>hyphens</h3>
 95            <section>
 96                <header><h4>hyphens: none</h4></header>
 97                <section class="sample-view">
 98                    <p class="no-hyphens">
 99                        Supercalifragilisticexpialidocious is a very long word.
100                    </p>
101                </section>
102                <header><h4>HTML</h4></header>
103<pre>
104&lt;p class="no-hyphens"&gt;
105    Supercalifragilisticexpialidocious is a very long word.
106&lt;/p&gt;
107</pre>
108                <header><h4>hyphens: manual</h4></header>
109                <section class="sample-view">
110                    <p class="manual-hyphens">
111                        Super&shy;califragilistic&shy;expialidocious is a very long word.
112                    </p>
113                </section>
114                <header><h4>HTML</h4></header>
115<pre>
116&lt;p class="manual-hyphens"&gt;
117    Super&amp;shy;califragilistic&amp;shy;expialidocious is a very long word.
118&lt;/p&gt;
119</pre>
120                <header><h4>hyphens: auto</h4></header>
121                <section class="sample-view">
122                    <p class="auto-hyphens">
123                        Supercalifragilisticexpialidocious is a very long word.
124                    </p>
125                </section>
126                <header><h4>HTML</h4></header>
127<pre>
128&lt;p class="auto-hyphens"&gt;
129    Supercalifragilisticexpialidocious is a very long word.
130&lt;/p&gt;
131</pre>
132            </section>
133        </article>
134    </main>
135</body>
136</html>

タイポグラフィ（テキストの余白関連）

line-heightプロパティ 

 1/* Line height examples */
 2.line-height-normal {
 3    line-height: normal; /* Default line height */
 4}
 5
 6.line-height-150 {
 7    line-height: 1.5; /* 1.5 times the font size */
 8}
 9
10.line-height-200 {
11    line-height: 200%; /* 200% of the font size */
12}

line-heightは、CSSプロパティの1つで、行間（行の高さ）を設定するために使用されます。line-heightは、文字同士の縦方向のスペースを指定し、可読性を高めたり、デザインの一部として間隔を調整したりするために使われます。

line-heightの主な使い方

単位なしの数値 
1p {
2    line-height: 1.5; /* 1.5 times the font size */
3}
  • フォントサイズに対する相対的な高さを指定します。たとえば、1.5と指定すると、フォントサイズの1.5倍の行の高さになります。この方法はレスポンシブなデザインに便利です。
パーセンテージ 
1p {
2    line-height: 150%;
3}
  • 行の高さをフォントサイズに対するパーセンテージで指定します。たとえば、150%とすると、行の高さはフォントサイズの150%になります。
固定値（px, em, remなど） 
1p {
2    line-height: 20px;
3}
  • 行の高さを絶対的な単位で指定します。たとえば、20pxなど具体的な数値を指定できますが、レスポンシブデザインでは柔軟性が欠ける場合があります。
normal 
1p {
2    line-height: normal;
3}
  • normalを指定するとブラウザのデフォルトの行間設定を適用します。通常は、フォントサイズの1.2倍から1.4倍程度になります。

line-heightの活用例

読みやすい段落
  • 読みやすさを確保するため、通常、1.5から1.6程度のline-heightが推奨されます。行間が狭すぎると文字が詰まりすぎて見えにくくなり、広すぎると文章が間延びします。
見出しのデザイン
  • 見出しやタイトルは文字が大きくなるため、行間は少なくできます。1.1や1.2などの設定がよく使われます。

まとめ

  • line-height は、テキストの可読性やデザイン性を向上させるための重要なプロパティです。
  • 相対値（数値やパーセンテージ）を使うことで、レスポンシブなデザインに適応しやすくなります。
  • 文字が大きい見出しや小さい文字を含む段落では、それぞれ適切な行間設定をすることがポイントです。

このプロパティを活用することで、テキストの見た目をより読みやすく、デザイン性も高めることができます。

letter-spacingプロパティ 

 1/* Letter spacing examples */
 2.letter-spacing-normal {
 3    letter-spacing: normal; /* Default letter spacing */
 4}
 5
 6.letter-spacing-wide {
 7    letter-spacing: 4px; /* Increase letter spacing */
 8}
 9
10.letter-spacing-narrow {
11    letter-spacing: -1px; /* Decrease letter spacing */
12}

letter-spacingは、文字と文字の間隔（字間）を調整するためのCSSプロパティです。このプロパティを使うことで、テキストのデザインを整えたり、可読性を高めたり、特定のスタイルを実現したりできます。

この例では次のように指定されています。

  • normal: デフォルトの文字間隔です。ブラウザやフォントに依存して決まる標準的な値です。
  • 4px: 文字の間隔を広げた例です。各文字の間に4ピクセルの余白を追加します。
  • -1px: 文字の間隔を狭めた例です。各文字の間に1ピクセル分のスペースを減らします。

letter-spacingの使い方

単位付きの数値 
1p.increased {
2    letter-spacing: 2px;  /* Increase letter spacing by 2px */
3}
4p.decreased {
5    letter-spacing: -1em;  /* Decrease letter spacing by 1em */
6}
  • 正の値を設定すると、文字の間隔が広がります。
  • 負の値を設定すると、文字の間隔が狭まります。
  • 単位は通常、px（ピクセル）やemが使用されます。
初期値: normal 
1p {
2    letter-spacing: normal;  /* Default letter spacing */
3}
  • デフォルトの文字間隔を使用します。通常は、フォントによって定義されている標準の文字間隔が適用されます。

letter-spacingの活用例

  • 可読性の向上: 小さいフォントサイズや詰まりすぎたフォントの場合、letter-spacingを広げることで可読性を改善できます。
  • デザイン調整: タイトルやロゴなど、デザイン性が求められる要素に対して、字間を調整して視覚的に強調することができます。
  • 単語間の調整: 単語同士の間隔ではなく、文字単位の間隔を調整することができます。letter-spacingは文字単位の間隔を調整できますが、単語間のスペースを広げるにはword-spacingを使用します。
  • デザインバランス: 文字の間隔を広げすぎると、文章全体が間延びしたように見えることがあります。また、狭めすぎると文字が詰まりすぎて読みにくくなることがありますので、適切なバランスを意識することが重要です。

まとめ

  • **letter-spacing**は、文字間のスペースを調整するためのプロパティで、デザインや可読性に影響します。
  • 正の値で間隔を広げ、負の値で間隔を狭めることができます。
  • タイトルや特定のデザイン要素で使うと効果的ですが、読みやすさを損なわないよう注意が必要です。

このプロパティを使うことで、テキストの外観を調整し、魅力的なデザインを実現できます。

word-spacingプロパティ 

 1/* Word spacing examples */
 2.word-spacing-normal {
 3    word-spacing: normal; /* Default word spacing */
 4}
 5
 6.word-spacing-wide {
 7    word-spacing: 4px; /* Increase word spacing */
 8}
 9
10.word-spacing-narrow {
11    word-spacing: -1px; /* Decrease word spacing */
12}
13
14.word-and-letter-spacing {
15    word-spacing: -0.1em;
16    letter-spacing: -0.05em;
17}

word-spacingは、テキスト内の単語間のスペースを制御するためのCSSプロパティです。このプロパティを適切に使うことで、視覚的なバランスやテキストの読みやすさを向上させることができます。word-spacingは特に、タイポグラフィに重点を置いたデザインやレスポンシブデザインの場面で有用です。

この例では次のように指定されています。

  • normal: ：デフォルトの単語間隔を適用します。ブラウザの初期値です。
  • 4px: 単語の間隔を広げた例です。各単語の間に4ピクセルの余白を追加します。
  • -1px: 単語の間隔を狭めた例です。各単語の間に1ピクセル分のスペースを減らします。
  • word-and-letter-spacing: 単語の間隔と文字の間隔を狭めた例です。単語間のスペースを通常よりも0.1emだけ縮め、文字間のスペースを通常よりも0.05emだけ縮めています。

正の値と負の値の使用

word-spacingに正の値を設定すると、単語間隔が広がります。一方で、負の値を使用すると、単語間のスペースが狭まります。視覚的な効果を強調したい場合や、特定のデザイン上の理由で文字を詰めたい場合に負の値を使用することがあります。

letter-spacingとの違い

word-spacingは単語間のスペースを調整するプロパティですが、letter-spacingは文字間のスペースを調整します。これらのプロパティを組み合わせて使うことで、文章全体のタイポグラフィをより細かく制御できます。

注意点とベストプラクティス

  • 過剰なスペース調整：word-spacingを使いすぎると、読みづらさを招く可能性があります。特に大きすぎるスペースや小さすぎるスペースは、ユーザーにとってストレスになることがあるため、適度な調整が重要です。
  • レスポンシブデザイン：emやremを使った相対的な値指定は、異なる画面サイズでも適切に表示されるため、レスポンシブデザインには有効です。
  • 見出しのスタイル調整：見出しのテキストにおいて、単語間のスペースを広げることで、視覚的な強調を加えられます。これにより、コンテンツの階層を明確にしたり、洗練されたデザインに仕上げたりすることが可能です。

word-breakプロパティ 

 1p.box {
 2    width: 200px;
 3    border: 1px solid #000;
 4    margin-bottom: 20px;
 5}
 6
 7.word-break-normal {
 8    word-break: normal;
 9}
10
11.word-break-break-all {
12    word-break: break-all;
13}
14
15.word-break-keep-all {
16    word-break: keep-all;
17}

word-breakは、テキストがコンテナの幅を超える場合にどのように折り返すかを制御するためのCSSプロパティです。通常、ブラウザは単語単位で改行しますが、長い単語やURLが含まれる場合、特定の設定をすることで見た目や可読性を向上させることができます。

word-breakプロパティには、以下の値を指定することができます。

  • normal

    normalはデフォルトの値です。単語がコンテナの幅を超える場合、単語単位で改行されます。英語などの言語ではこの設定が一般的で、単語の途中で改行が入ることはありません。

  • break-all

    break-allは、どの文字でも必要に応じて改行を挿入できる設定です。特に長い単語やURLが含まれている場合、文字単位で改行されるため、レイアウト崩れを防ぐことができます。

  • keep-all

    keep-allは、特にアジア系言語（日本語、中国語、韓国語など）で使用される設定です。この設定では、単語全体が保持され、単語の途中で改行が入ることはありません。ただし、英語などのスペースで区切られた言語に対しては、通常の単語単位で改行が適用されます。

この例では、3つの異なるword-break設定を適用した例を示しています。word-break-normalでは単語全体が保持され、コンテナの幅を超えた場合に単語単位で改行されます。word-break-break-allでは、単語が途中でも改行されます。word-break-keep-allでは、日本語のようなアジア系言語では自然な改行が行われ、英語では単語単位で改行されます。

word-breakの応用シナリオ

モバイルデバイスやレスポンシブデザイン 

1@media (max-width: 600px) {
2  p {
3    word-break: break-all;
4  }
5}

モバイルデバイスでは画面幅が限られているため、特にURLや長い単語を含むテキストが画面幅を超えてしまうことがあります。このような場合、word-break: break-all;を適用することで、画面幅に合わせて文字単位で改行され、テキストが見やすくなります。

hyphens プロパティ 

 1p.no-hyphens {
 2    width: 200px;
 3    hyphens: none;
 4}
 5
 6p.manual-hyphens {
 7    width: 200px;
 8    hyphens: manual;
 9}
10
11p.auto-hyphens {
12    width: 200px;
13    hyphens: auto;
14}

  • hyphensプロパティは、CSSでテキストの改行時に単語のハイフネーション（ハイフンを用いた分割）をどのように処理するかを指定するために使用されます。このプロパティを適切に設定することで、テキストの読みやすさや見た目を向上させることができます。ハイフネーションは特に長い単語が折り返される必要がある場合に役立ちます。

  • 言語によって異なるハイフネーションルールがあるため、このプロパティはテキストのロケールに依存します。

構文 

1element {
2    hyphens: none | manual | auto;
3}

hyphensプロパティには、次の値を指定できます。

  • none: ハイフネーションを行いません。単語は通常、単語の終端でのみ改行されます。
  • manual: ハイフネーションを手動で行います。この場合、HTML内でハイフネーションポイントを指定する必要があります。例えば、&shy;（ソフトハイフン）を使います。
  • auto: ブラウザが自動的に適切な位置でハイフネーションを行います。この場合、文書の言語（lang属性）を正しく指定する必要があります。

注意点

  • 言語設定の重要性: hyphens: auto;を使用する場合、適切なハイフネーションを行うには、HTML文書のlang属性を正確に設定する必要があります。
  • フォント依存性: 一部のフォントはハイフネーションに適していない場合があります。
  • ハイフネーション辞書の利用: ハイフネーションルールはブラウザが持つ辞書に依存します。そのため、特定の言語では期待通りに動作しない場合があります。

まとめ

hyphensプロパティを適切に活用することで、テキストのレイアウトを大幅に改善することができます。特に多言語対応のウェブサイトやモバイル向けデザインにおいては、autoやmanualを適切に使い分けることで、ユーザー体験を向上させることが可能です。

YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。

YouTube Video

テキスト関連のCSSプロパティコード表示と引用関連のCSSプロパティ