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

CSSでテキストを整形する方法｜文字揃え・行間・文字装飾の基本を解説

CSSを使えば、テキストの色や文字装飾、行の高さ（行間）、文字の方向、テキストの配置など、さまざまなスタイルを自由にコントロールできます。本記事では、その中でも特によく使われる「テキストの配置」「行の高さ」「文字装飾」について、具体的なコード例とともにわかりやすく解説します。

1. テキストの配置（text-align）

テキストの配置を指定するには、text-align プロパティを使用します。指定できる主な値は以下のとおりです。

text-align: left | right | center | justify | initial | inherit;
  • left：左揃え
  • right：右揃え
  • center：中央揃え
  • justify：両端揃え（均等割り付け）
  • initial / inherit：初期値または親要素からの継承

サンプルコード

以下は、段組みレイアウトの中でテキストを両端揃えに設定する例です。

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
    -webkit-columns: auto auto; /* Chrome, Safari, Opera */
    -moz-columns: auto auto; /* Firefox */
    columns: auto auto;
    text-align: justify;
}
</style>
</head>
<body>
<h1>Machine Learning</h1>
<div class="demo">
Today’s Artificial Intelligence (AI) has far surpassed the hype of blockchain and quantum computing. This is due to the fact that huge computing resources are easily available to the common man. The developers now take advantage of this in creating new Machine Learning models and to re-train the existing models for better performance and results. The easy availability of High Performance Computing (HPC) has resulted in a sudden increased demand for IT professionals having Machine Learning skills.
</div>
</body>
</html>

columns プロパティで2段組みにし、text-align: justify; を指定することで、段落全体が見やすい両端揃えになります。ブラウザごとの互換性を考慮して、ベンダープレフィックス（-webkit-、-moz-）も併せて記述しています。

2. 行の高さ（line-height）

行間を調整するには、line-height プロパティを使用します。指定できる値は以下のとおりです。

line-height: normal | number | length | initial | inherit;
  • normal：ブラウザのデフォルト値（約1.2）
  • number：フォントサイズに対する倍率（例：1.9）
  • length：px や em などの絶対的な長さ

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
div {
    line-height: 1.9;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div>
<p>This is demo text.<br>
This is another demo text.
</p>
</div>
</body>
</html>

この例では line-height: 1.9; を指定しているため、通常より広い行間でテキストが表示され、読みやすさが向上します。数値のみを指定した場合はフォントサイズとの相対倍率として扱われるため、レスポンシブデザインにも適しています。

3. 文字装飾（text-decoration）

下線や上線などの文字装飾を行うには、text-decoration プロパティを使用します。これは以下の3つのプロパティをまとめて指定できるショートハンド（一括指定）プロパティです。

text-decoration-line
 text-decoration-color
 text-decoration-style
  • text-decoration-line：線の種類（underline、overline、line-through など）
  • text-decoration-color：線の色
  • text-decoration-style：線のスタイル（solid、dashed、wavy など）

サンプルコード

以下は、テキストに上線と下線を同時に付ける例です。

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
    text-decoration: overline underline;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

.demo クラスが適用された段落には上下に線が引かれ、強調表示されます。一方、.demo2 の段落には装飾が適用されないため、両者の違いがひと目でわかります。色やスタイルを組み合わせれば、「赤い波線」のような表現も可能です。

まとめ

CSSによるテキスト整形の基本は、以下の3つのプロパティを押さえることです。

  • text-align：テキストの水平方向の配置を制御
  • line-height：行間を調整し、可読性を向上
  • text-decoration：下線・上線・打ち消し線などの装飾を追加

これらを組み合わせることで、文章の視認性やデザイン性を大きく高めることができます。まずは実際にコードを書いて、表示の変化を確認しながら学習を進めてみてください。

  1. CSSのz-indexプロパティを使って要素を重ねて表示する方法

    CSSのz-indexプロパティとは CSSのz-indexプロパティを利用すると、開発者は複数の要素を互いに重ねて（積み重ねて）表示することができます。z-indexには正の値または負の値を指定でき、数値が大きいほど要素は前面（上層）に配置されます。 注意： 重なり合う要素にz-indexが指定されていない場合、HTMLドキュメント内で最後に記述された要素が前面に表示されます。 また、z-indexは position: relative;、position: absolute;、position: fixed;、position: sticky; のように位置指定された要素に対してのみ有効

  2. CSSのtext-decorationプロパティでテキスト装飾を付ける方法

    CSSのtext-decorationプロパティは、選択した要素のテキストに装飾を適用するために使用します。値として「underline（下線）」「overline（上線）」「line-through（打ち消し線）」などを指定でき、色やスタイルも組み合わせて設定可能です。また、このプロパティはtext-decoration-line（装飾線の種類）、text-decoration-color（装飾線の色）、text-decoration-style（装飾線のスタイル）という3つの個別プロパティを一括して指定できるショートハンド（省略記法）でもあります。基本構文text-decorationプロ