CSSで段落の1行目にインデントを入れる方法

  • ガイド ( How to )
  • ありがとう数:0

はじめに

Photo by ぽたる
CSSで段落の1行目にインデントを入れる方法をガイドします。

STEP1■pxで指定する場合

text-indent:(数値)em;


上のタグの(数値)のところに指定したい数値を入力します。
emというのは文字を基準にして指定する方法で 1em=1文字です。

【例】
段落最初のインデントを2emにしたい場合は
text-indent:2em; と指定します。

【適用前】
今日はいいお天気ですね。ところで最近はお天気なのに傘を指している人
がいて驚きました。よくよく見てみると日傘だったんですけどね。

【適用後(2em)】
  今日はいいお天気ですね。ところで最近はお天気なのに傘を指している人
がいて驚きました。よくよく見てみると日傘だったんですけどね。

STEP2■%で指定する場合

text-indent:(数値)%;


ブロックの幅に対してパーセンテージでインデント幅を指示する方法です。
あまり使い道がありません・・・。

STEP3■おまけ

・インデントの指示は各段落の1行目だけに適用され、改行後は適用されません。

・昔の文章は段落ごとに必ず1文字下げてあってインデント必須だったようですが、意外と読みにくいので最近ではインデントは入れない傾向にあるようです。

・見出し等1行しかないものに使われる事が多いようです。

まとめ

Illustrationby 著者

このユーザなら私の疑問や悩みを解決してくれそうと思ったら、
質問への回答をリクエストすることができます。

特集


感謝でトクする時代へ!感謝経済に参加しよう!

ピックアップ

ページ先頭へ