更新日: 2011-05-20 15:39:16

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

著者: ぽたる

編集者: ぽたる

閲覧数: 277

Okgn btn gudie info favorite

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 著者

このガイドは役に立ちましたか?ガイドの著者にお礼を伝えよう!

Okgn btn gudie info thunks b

87

当ガイドは作成日時点での情報です。ガイド内容の実施はご自身の責任の元、ご利用いただきますようお願いいたします。

このガイドを通報する

著者名:
ぽたる

「ぽたる」はたまたま登録時に
息子がほたるのことをぽたると
言っていたのでつけました。

みなさまどうぞよろしく
おねがいいたします!