段落を設定する(背景)

段落を設定する(背景)の表示例

段落を設定する(背景)文章を書くときの段落で、部分的に背景に色をつけた段落にしたい場合、スタイルシートで背景色を設定します。

背景に色をつける
background: #d3d3d3;
background: #fafad2;

のように記述します。

また、そのとき、背景に色がついた部分と文章の間に余白を設けると読みやすいですね。

「上下左右」の余白を一括指定する
値ひとつですべての余白を指定します。
padding: 10px;
「上下」、「左右」の余白を指定する
padding: 10px 40px;
「上下」の余白、「左右」の余白の順に指定します。
「上」、「左右」、「下」の余白を指定する
padding: 20px 40px 5px;
「上」の余白、「左右」の余白、「下」の余白の順に指定します。
「上」、「右」、「下」、「左」の余白を指定する
padding: 10px 20px 30px 40px;
「上」の余白、「右」の余白、「下」の余白、「左」の余白の順に指定します。

HTML/XHTML

<body> ~ </body>内に以下を記述します。(枕草子より)

<p class="background1">春はあけぼの。やうやう白くなり行く、山ぎは少しあかりて、紫だちたる雲の細くたなびきたる。</p>
<p class="background2">夏は夜。月のころはさらなり。やみもなほ、ほたるの多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光りて行くもをかし。雨など降るもをかし。</p>
<p class="background3">秋は夕暮。夕日のさして山の端(は)いと近うなりたるに、烏(からす)の寝どころへ行くとて、三つ四つ、二つ三つなど飛びいそぐさへあはれなり。まいて雁(かり)などのつらねたるが、いと小さく見ゆるはいとをかし。日入りはてて、風の音、虫の音など、はたいふべきにあらず。</p>
<p class="background4">冬はつとめて。雪の降りたるはいふべきにもあらず。霜のいと白きも、またさらでも、いと寒きに、火などいそぎおこして、炭もてわたるもいとつきづきし。昼になりて、ぬるくゆるびもて行けば、火桶の火も白き灰がちになりてわろし。</p>

CSS

<head> ~ </head>内に以下を記述します。

<style type="text/css">
<!--
p { margin: 10px; }
p.background1 {
     padding: 10px;
     background: #d3d3d3;
}
p.background2 {
     padding: 10px 40px;
     background: #fafad2;
}
p.background3 {
     color: #FFF;
     padding: 20px 40px 5px;
     background: #800000;
}
p.background4 {
     padding: 10px 20px 30px 40px;
     color: #FFF;
     background: #483d8b;
}
-->
</style>

段落を設定する(背景)の表示例

はてなブックマーク数 このエントリーをはてなブックマークに追加 Yahoo!ブックマークに登録