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

CSSでテキストを整形する方法｜主要プロパティとサンプルコードを徹底解説

CSSを使うことで、テキストを見栄えよく整形し、読み手にとって魅力的なコンテンツを作成できます。この記事では、CSSでテキストのスタイルを設定する際に使用される主なプロパティについて、役割と使い方をわかりやすく解説します。

CSSの主なテキストフォーマット用プロパティ

color（文字色）

テキストの色を変更するためのプロパティです。カラーキーワード、16進数カラーコード、rgb()関数などで色を指定できます。

letter-spacing（文字間隔）

文字と文字の間隔を調整します。値を大きくすると字間が広がり、見出しなどにゆったりとした印象を与えられます。

line-height（行の高さ）

行の高さ（行間）を指定します。本文の可読性を左右する重要なプロパティで、通常は1.5〜2程度の相対値を指定するのがおすすめです。

text-align（水平方向の揃え）

テキストの水平方向の配置を制御します。left（左寄せ）、right（右寄せ）、center（中央揃え）、justify（両端揃え）などの値が利用できます。

text-decoration（文字装飾）

下線（underline）、取り消し線（line-through）、上線（overline）などの装飾を追加します。リンクの下線を消したい場合にもよく使われるプロパティです。

text-indent（インデント）

要素内の最初の行にインデント（字下げ）を設定します。段落の冒頭を一字下げたい場合などに便利です。

text-shadow（文字の影）

テキストの周囲に影を表示します。横方向・縦方向のオフセット、ぼかしの強さ、影の色を指定でき、立体感のある演出が可能です。

text-transform（大文字・小文字の変換）

テキストの大文字・小文字を変換します。uppercase（すべて大文字）、lowercase（すべて小文字）、capitalize（各単語の先頭のみ大文字）などを指定できます。

word-spacing（単語間隔）

単語と単語の間のスペース幅を設定します。特に英文テキストの見た目を調整する際に役立ちます。

構文（シンタックス）

テキストフォーマット関連プロパティの基本的な記述形式は以下のとおりです。

セレクター {
    プロパティ名: /*値*/;
}

サンプルコード①：見出しと文章の装飾

次の例では、見出しに擬似要素（::before）で「DEMO」という文字を追加して装飾し、article要素には両端揃え（justify）と文字の影（text-shadow）を適用しています。

<!DOCTYPE html>
<html>
<head>
<style>
h2::before {
    content: "DEMO ";
    text-align: center;
    text-decoration: line-through;
    color: orange;
}
article {
    width: 600px;
    text-align: justify;
    text-shadow: -10px -5px lightgreen;
}
</style>
</head>
<body>
<h2>サンプル見出し</h2>
<article>これはデモ用のテキストです。ここでは、テキストを整形するさまざまな方法を表示しています。</article>
</body>
</html>

表示結果①

上記のコードを実行すると、次のような出力が得られます。

CSSでテキストを整形する方法｜主要プロパティとサンプルコードを徹底解説

サンプルコード②：word-spacingの活用

続いて、flexレイアウトのdiv要素にword-spacingを指定し、単語間隔を広げた表示を作成する例を紹介します。隣接する兄弟セレクター（div + div）を使って、2つ目のボックスだけ背景色や文字色を変えている点にも注目してください。

<!DOCTYPE html>
<html>
<head>
<style>
div {
    margin: 10px;
    display: flex;
    float: left;
    word-spacing: 30px;
    box-shadow: inset 0 0 6px violet;
}
div::after {
    content: " ";
    border: 8px solid green;
}
div + div {
    background-color: indianred;
    width: 200px;
    color: white;
    text-align: justify;
}
</style>
</head>
<body>
<div>SASとは統計分析ソフトウェア（Statistical Analysis Software）のことです。1960年にSAS Instituteによって開発されました。</div>
<div>SASはビジネスアナリティクス分野のリーダー的存在です。革新的なアナリティクス技術により、ビジネスインテリジェンスやデータ管理向けのソフトウェアとサービスを提供しています。</div>
</body>
</html>

表示結果②

上記のコードを実行すると、次のような出力が得られます。

CSSでテキストを整形する方法｜主要プロパティとサンプルコードを徹底解説

まとめ

CSSのテキストフォーマット系プロパティを使いこなせば、文字色・行間・字間・配置・装飾などを自由にコントロールでき、Webページの可読性とデザイン性を大きく向上させられます。まずはcolor、text-align、line-heightといった基本プロパティから試し、慣れてきたらtext-shadowやtext-transformなども組み合わせて、表現の幅を広げてみてください。

  1. CSSのtext-justifyプロパティとは？使い方と各値の解説

    text-justifyプロパティとは CSSのtext-justifyプロパティは、text-alignプロパティにjustify(両端揃え)が指定されている場合に、テキストをどのような方法で均等割り付けするかを制御するためのプロパティです。単語間のスペースで調整するか、文字間のスペースで調整するかなどを細かく指定できます。 構文 text-justify: auto | inter-word | inter-character | none | initial | inherit; プロパティの値一覧 auto — ブラウザが最適な揃え方を自動的に判断します(既定値)。 inter-

  2. CSSのrightプロパティとは？構文と使い方を実例付きで解説

    CSSのrightプロパティは、positionが指定された要素の水平方向の位置を設定するために使用します。基準となる包含ブロックの右端から、要素の右端までの距離を指定できます。 なお、rightプロパティはpositionプロパティがstatic以外（relative・absolute・fixed・sticky）のときにのみ有効になる点に注意してください。 構文 right: auto|length|initial|inherit; 指定できる値 auto … 初期値。位置の計算をブラウザに任せます。 length … pxやemなどの単位で距離を指定します。負の値も指定可能です。 ini