見出しを背景画像で装飾する

見出しを背景画像で装飾する表示例

見出しの装飾を背景画像を使って行ないます。スタイルシート(CSS)でデザインするときに最も良く使われる手法と言ってよいでしょう。背景画像やボーダーを組み合わせることで、ただのテキストの見出しがスタイリッシュになります。

見出しを背景画像で装飾する

背景画像の指定
background-image: ★;
★:画像のURL、背景画像を表示させないときは「none」
背景画像の繰り返し方法
background-repeat: ★;
★:repeat , repeat-x , repeat-y , no-repeat
背景画像の固定方法
background-attachment: ★;
★:scroll , fixed
背景画像の位置
background-position: ★;
実数値 , パーセント , left , center , right , top , bottom
背景のプロパティを一括指定
background: ① ② ③ ④ ⑤;
① background-colorの値
② background-imageの値
③ background-repeartの値
④ background-attachmentの値
⑤ background-coloの値

HTML/XHTML

<h1 class="heading1">「heading1」の見出し</h1>
<h1 class="heading2">「heading2」の見出し</h1>
<h1 class="heading3">「heading3」の見出し</h1>
<h1 class="heading4">「heading4」の見出し</h1>
<h1 class="heading5">「heading5」の見出し</h1>

CSS

<style type="text/css">
<!--
h1 {
padding: 10px 20px;
margin: 10px;
}
h1.heading1 { background: url(http://www.k2-s.com/wpress/wp-content/uploads/2012/12/heading1-bg.gif) repeat-x; }
h1.heading2 {
    background: url(http://www.k2-s.com/wpress/wp-content/uploads/2012/12/heading2-bg.gif) no-repeat left center;
    padding-left: 80px;
    border: 1px #9FC950 solid;
}
h1.heading3 {
    background: url(http://www.k2-s.com/wpress/wp-content/uploads/2012/12/heading3-bg.gif) ;
    border: 2px #FFD24D solid;
}
h1.heading4 {
    background: url(http://www.k2-s.com/wpress/wp-content/uploads/2012/12/heading4-bg.jpg) no-repeat right center;
    border: 1px #B0CAEB solid;
}
h1.heading5
{ background: url(http://www.k2-s.com/wpress/wp-content/uploads/2012/12/heading5-bg.gif) repeat-x bottom ; }
-->
</style>

見出しを背景画像で装飾する表示例

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