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

CSSのtext-indentプロパティを使ってテキストをインデントする方法

CSSのtext-indentプロパティを使用すると、段落の先頭に挿入されるインデント（字下げ）の幅を指定することができます。文章の読みやすさやデザイン性を高めたい場合に便利なプロパティです。

基本的な使い方

以下の例では、text-indentプロパティを使って、段落の先頭にパーセンテージ指定でインデントを設定しています。

<!DOCTYPE html>
<html>
<head>
<style>
p {
    text-indent: 15%;
}
article {
    background-color: darkgray;
    margin: 2%;
}
</style>
</head>
<body>
<article>
<p>Aliquam neque quam, luctus id turpis id, eleifend condimentum lacus. Proin mattis eros eu convallis eleifend. Ut porttitor efficitur massa.</p>
<p>Nullam nulla dolor, eleifend a viverra ut, semper nec enim. Praesent at ultricies neque. Praesent finibus erat tristique mauris mollis, vitae scelerisque orci lacinia.</p>
</article>
</body>
</html>

表示結果

上記のコードを実行すると、各段落の1行目が15%分だけ右にずれて表示されます。

CSSのtext-indentプロパティを使ってテキストをインデントする方法

他のスタイルと組み合わせた応用例

次の例では、text-indentに加えて、枠線・背景色・flexレイアウト・ボックスシャドウなどを組み合わせています。実際のWebページでもよく使われるスタイル構成です。

<!DOCTYPE html>
<html>
<head>
<style>
p {
    margin: 2%;
    text-indent: 13%;
    border: 2px solid lightgoldenrodyellow;
}
div {
    background-color: sandybrown;
    display: flex;
    flex: 1;
    margin: 4%;
    box-shadow: 0 0 24px rgba(0,0,0,0.6);
}
</style>
</head>
<body>
<div>
<p>Aliquam neque quam, luctus id turpis id, eleifend condimentum lacus. Proin mattis eros eu convallis eleifend. Ut porttitor efficitur massa.</p>
<p>Nullam nulla dolor, eleifend a viverra ut, semper nec enim. Praesent at ultricies neque. Praesent finibus erat tristique mauris mollis, vitae scelerisque orci lacinia.</p>
</div>
</body>
</html>

表示結果

上記のコードを実行すると、次のような結果が得られます。段落ごとに枠線が付き、1行目のみがインデントされているのが確認できます。

CSSのtext-indentプロパティを使ってテキストをインデントする方法

まとめ

text-indentプロパティは、px・em・%などの単位でインデント幅を指定でき、段落の1行目だけに適用される点が特徴です。日本語の縦書き・横書きどちらのデザインでも活用できるため、記事ページやブログなどで可読性を向上させたい際にぜひ活用してみてください。

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

    CSSを使うことで、テキストを見栄えよく整形し、読み手にとって魅力的なコンテンツを作成できます。この記事では、CSSでテキストのスタイルを設定する際に使用される主なプロパティについて、役割と使い方をわかりやすく解説します。 CSSの主なテキストフォーマット用プロパティ color（文字色） テキストの色を変更するためのプロパティです。カラーキーワード、16進数カラーコード、rgb()関数などで色を指定できます。 letter-spacing（文字間隔） 文字と文字の間隔を調整します。値を大きくすると字間が広がり、見出しなどにゆったりとした印象を与えられます。 line-height（行

  2. CSSのhyphensプロパティでテキストにハイフンを追加する方法

    CSSのhyphensプロパティを使用すると、テキスト内にハイフン（連字符）をどのように挿入するかを細かく制御できます。長い単語やURLなどがコンテナからはみ出すのを防ぎ、読みやすい行折り返しを実現したい場合に便利なプロパティです。 hyphensプロパティの主な値 none：ハイフンによる改行を一切行いません。&shy;などの手動指定も無効になります。 manual：&shy;（ソフトハイフン）など、HTML内で明示的に指定された位置でのみハイフンを挿入します（初期値）。 auto：ブラウザが各言語の規則に基づいて自動的にハイフンを挿入します。lang属性の指定が推奨されま