ページ、見出し、段落の背景を組み合わせる

ページ、見出し、段落の背景を組み合わせるページ、見出し、段落の背景を組み合わせる表示例

ページ全体に背景を入れたり、見出しや段落に背景を入れることで、ページがとてもにぎやかな感じになります。表示例では背景画像の配置、リピートなど一括でCSSの記述をしています。

ここまで装飾を行なうと、スタイルシートの記述がだんだん複雑になってきます。しかし、ひとつひとつ見ていけば、何も難しいことが書いてあるわけではなく、それぞれの行で装飾をしているだけです。

HTML/XHTML

<h1>鉄道唱歌</h1>
<h2>東海道編</h2>
<h3>1番</h3>
<p>汽笛一聲新橋を はや我が汽車は離れたり 愛宕の山に入りのこる 月を旅路の友として</p>
<h3>5番</h3>
<p>鶴見神奈川あとにして ゆけば横浜ステーション 湊を見れば百船の 煙は空をこがすまで</p>
<h3>10番</h3>
<p>汽車より逗子をながめつつ はや横須賀に著きにけり 見よやドックに集まりし 我が軍艦の壯大を</p>
<h2>関西・参宮・南海篇</h2>
<h3>1番</h3> 
<p>汽車をたよりに思い立つ 伊勢や大和の国めぐり 網島いでて関西の 線路を旅路の始にて</p>
<h3>10番</h3>
<p>川のあなたにながめゆく 笠置の山は元弘の 宮居の跡と聞くからに ふるは涙か村雨か</p>

CSS

<style type="text/css">
<!--
body {
     background: url(http://www.k2-s.com/wpress/wp-content/uploads/2012/12/6165-body-bg.jpg) no-repeat right bottom fixed; padding: 0; margin: 0;
}
h1 {
     color: #FFF;
     background: #3F2329 url(http://www.k2-s.com/wpress/wp-content/uploads/2012/12/6165-h1-bg.jpg) no-repeat right;
     padding: 12px 24px;
     text-shadow: 5px 5px 2px #000;
     margin: 0px;
}
h2 {
     margin: 15px;
     background: url(http://www.k2-s.com/wpress/wp-content/uploads/2012/12/6165-h2-bg.gif) no-repeat left center;
     padding: 10px 15px 10px 50px;
     color: #544731;
} h3 {
     margin: 15px 15px 0px 15px;
     background: #333;
     padding: 10px 15px;
     color: #FFF;
     font-size: 90%;
}
p {
     margin: 0px 15px 15px 15px;
     background: #EAEAEA;
     border: 1px solid #333;
     padding: 10px;
     font-size: 90%;
}
-->
</style>

ページ、見出し、段落の背景を組み合わせる表示例

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