CSS: 段落

段落にスタイルをつけます。画面上では、長い文章は読みづらいため細かく段落にした方が良いとされています。

見出し同様、文字や段落の揃えなどのスタイルをつけます。見出しで紹介したものは省略します。

css Zen Garden（日本語版）サンプルファイルで実践してみましょう。見出しの学習で使ったファイルをそのまま使ってください。

行間 line-height

読みやすいように行間を指定します。

単位は「em」で指定するのが望ましいと言われています。

下記のコードを追記してください。

css Zen Garden（日本語版）サンプルファイル style.css

p { line-height:1.5em; }

ブラウザによってデフォルトの行間も異なるため、なるべく指定しましょう。

段落の幅を指定します。ブラウザの幅や文字サイズ変更をしながら確認してみましょう。

下記のコードを追加してください。

css Zen Garden（日本語版）サンプルファイル style.css

p.p1 { width:40em; }

文字数を基準とした長さで指定します。

css Zen Garden（日本語版）サンプルファイル style.css

p.p2 { width:400px; }

pixel単位の長さで指定します。ページの幅が固定されているようなデザインでよく使います。

css Zen Garden（日本語版）サンプルファイル style.css

p.p3 { width:80%; }

幅指定を行っていないブロックは、100％の幅指定がされていると考えます。

全ての親要素のサイズがパーセント指定または指定されていない場合には、ブラウザのウィンドウサイズの変更によって幅が変わります。ブラウザの横幅を変更した際に画面がどう変わるかを確認してください。

確認できたら上記のコードは削除してください。

左マージンを設定して字下げをすることで、見出しが強調されます。

下記のコードを追加してください。

css Zen Garden（日本語版）サンプルファイル style.css

p { margin-left:20px; }

この授業サイトでも、見出しがあるたびに字下げがされています。見出しレベルが増えるごとに字下げが深くなっています。

一行目だけ字下げを行います。

下記のコードを追加してください。

css Zen Garden（日本語版）サンプルファイル style.css

p { text-indent:1em; }

日本語の文章では一文字文の字下げが普通です。英語の文章では長さは任意です。

このサイトもそうですが、Webやメールでは段落の最初の字下げを行わないという習慣があります。なぜでしょうね。

逆に、レポートなど紙に印刷するような文書は段落の最初は必ず1字下げるようにしてください。

段落に独自のスタイルをつけよ。