段落のインデント【text-indent】：CSS入門
CSS入門（18）
今回は、段落にインデントを設定します。ちなみに、インデントと言うのは、文章（段落）の1文字目を字下げすることです。
読みやすい文章を目指して、お話は、次の順番で進みます。
段落にインデントを設定する方法
1：前回までのお話
（01）
前回は、idセレクタとclassセレクタについてお話しました。
以下、前回までのCSSコードです。
2：段落にインデント（text-indent）を設定する
（02）
お話の都合上、ちょっと文章を長くすることにします。
HTMLファイルを開いて、文章の箇所を、インデントが分かりやすくなるくらいの長さにしてください。適当に、お好きなように。
（03）
ブラウザで表示してみましょう。次のように、文章が 2行になってもインデントしていないことを確認しておきます。
（04）
インデント（text-indent）は、次のように指定します。単位にemを使うのは、ちょうど1文字分くらいになるからです。
p { text-indent: 1em; }
CSSファイルを開いて、実際に<p>タグにインデント（text-indent）をかけてみましょう。
記事「文字サイズの変更【font-size】（2）：CSS入門」で、font-sizeではバグがあるので使わない旨を書きましたが、こんなときは、使うと便利なんだなぁ。
（05）
ブラウザで表示してみましょう。インデントされているはずです。
3：問題が起こります
（06）
インデントはされたけれど、ちょっと問題が起きます。
<table>タグ内をご覧いただくと分かると思うのですが、表内の文字までインデントされています。がびーん・・・さて、どうすれば解決できるでしょうか？
（07）
どうしてこんなことが起きてしまったかと言えば、適用先が<p>タグすべてに対してインデントをかけているからです。
つまり、紹介文の方だけ、インデントできれば良いわけですから、次のようにしてみてはいかがでしょうか。
「#blog-pre」は、前回の記事「idセレクタ、classセレクタとは？：CSS入門」で紹介しているので覚えていると思いますが、半角スペースを空ける書き方は覚えているかしら？
これは、記事「継承と子孫セレクタとは？：CSS入門」でお話した子孫セレクタという書き方です。
こうすることで、「blog-preというグループ内の<p>タグだけに、インデントをかけてくださいね」という指定になります。
4：おまけ
（08）
文章が、どうにも横の罫線に近過ぎて、息苦しい印象を感じさせていないかしら？少し左右に余裕を持たせることにしましょう。
どうしたものか、アイディアはありますか？
（09）
左右に、marginを入れてみてはいかがでしょうか。例えば、次のようにします。
なかなか、良い感じになりました。
次回予告
次回は、行の間隔（line-height）について書く予定です。読みやすい文章にしていきましょうシリーズです。
関連記事
CSSに関連する記事を、ご紹介します。
1：カスタマイズ前
2：CSSの基本的なこと
3：色の指定
4：罫線の指定
5：間隔（余白）の指定
6：継承と子孫セレクタ
7：箇条書き（リスト）
8：文字（フォント）の指定
9：idセレクタ、classセレクタ
10：文章を読みやすくする
11：文字の中央揃え（センタリング）
12：レイアウト
13：tableの中央揃え（センタリング）
14：CSSで飾る
15：まとめ
作成日：2008/04/29 更新日：2008/04/29
« 「idセレクタ、classセレクタとは？」｜「行の間隔【line-height】」 »
コメントありがとうございます。
現在、コメントさんも、お休みしています。
ダメモト のつもりで。
インデントがうまくいかないだなんて！（がびーん）
コメントありがとうございます。
インデントがうまくいかなかったのですか〜・・・むむぅ。
私も改めて、試してみましたが、私の環境では、
インデントが出来てしまいます。困った。
OSは、WindowsXPです。
Firefox2.0と、InternetExplorer6では、チェックしてあります。
私の想定外のところで、何か問題があるみたいです。
sachiさんの環境を教えていただいても、
こちらでは検証できないので、何とも方法がないかなぁ。
font-sizeを大きくしたら、インデントが有効になったというのも、
よく分からないですね〜。
さらに「表（table）」の中は、
インデントがかからなかったわけですよね。
ちょっと、現象があり得ない感じです。
もし良かったら、HTMLとCSSのコードを、
メールなどで送付していただけると、
何か分かるかもしれません。
パソコンの環境についても、差支えがなければ、
教えていただけると、何か分かるかもしれません。
No title
ありがとうございます。
OSはVista、IEは7 ということでしょうか。
次のline-heightとletter-spacingを
それぞれ140％と0.3emにしてみたら
Firefoxでは変化無し、ヴィスタ画面は
「行」と「文字間隔」が広くなりました。
インデントは相変わらずだめです。
但し 行や間隔が広くなったために
最初の１文字はインデントされました。
OSの違い？？？
コメントありがとうございます。
他のブラウザでもチェックしてみましたが、
私の環境では、問題が起こりません。
Internet Explorer 7
Opera 9.27
Safari 3.1.1
OSの違いによって、問題が起こるほどのコードでは、
ないはずなんですが、状況からみると、その違いしかないですね。
line-heightとletter-spacingもですかー。
Vista環境がないので、どうにも分からないっすねぇ。
行や間隔が広くなって、インデントされたということであれば、
とても文章を長くして試してみてはいかがでしょうか。
あるいは、
ブラウザの横幅を縮めてみないと、分かり難いはずです。
とりあえず、コーディング時には、混乱するといけないので、
Internet Explorerなど他のブラウザを使わないのも、
ポイントでしょうか。
集中して、Firefoxで、どう表示されるか？だけテストした方が、
良いかもしれません。
あとは、可能性は低いですけれど、
ブラウザのキャッシュを読み込んでいる場合もあります。
あやしい感じがした場合は、リロードを何度かクリックするか、
shiftキーを押しながら、リロードをクリックしてみると、
良いかもしれません。
あとは何かしら。
コードがまったく同じでないのだとしたら、
半角全角、スペース、区切り文字などに誤りがないか、
再度チェックしてみるなどもしてみると、良いかもしれません。
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/284-5253b1b1
font-size150% にしてみたら
でっかく表示されてインデントがかかりました。
なぜでしょうか。
「表」の中は正常です。
ブラウザがかしこいのでしょうか。