| ●スタイルシートで楽々背景画像を付加 |
前回のスタイルシート活用講座[1]では、スタイルシートを用いると、
TABLEを駆使しなくても、手軽にどこにでも背景色や背景画像を指定できることをご紹介致しました。
今回は、その具体的な活用例をご紹介致しましょう。
| ●見出しの背景をグラデーション |
HTMLには、「見出し」を表すタグが用意されていることをご存じでしょうか。
「 <h1> 」や「 <h6> 」などがそうです。
h1 は最も重要度の高い見出しを表し、以下 h2 , h3 …と続き h6 まであります。
※代表的なブラウザでは、重要度が高いほど大きな文字で表示します。
今回は、この「見出し」を、前回ご紹介した方法で装飾してみましょう。
作成結果は、次のような見出しになります。
※ここでは画像で表示しています。
前回、背景画像を指定するには「 background-image 」プロパティを用いるとご紹介致しました。
そこで、HTMLの head要素内（ <head>～</head> 内）に、次のようにスタイルを記述します。
|
上記の gradg.gif は、背景画像のファイル名で、次のような画像です。
白色から緑色へのグラデーションになっている画像です。
この画像を背景画像として指定したのが、先ほどのソース（スタイルシート）です。
このように準備した上で、次のように記述すると、
|
次のような表示になります。
これが見出しですよ
見出しの背景がグラデーションになっているのがお分かり頂ける※と思います。
※もちろん、スタイルシートを無効にしていたり、スタイルシートを解釈しないブラウザでは、普通の文字にしか見えません。
スタイルシートを使うと、TABLEを駆使して背景画像を加えたりするよりも、遙かに手軽に装飾が可能になることが、お分かり頂けたと思います。
みなさんのホームページでも、ぜひ、活用してみて下さい。
| ●背景画像は... |
背景用の画像を自分で作れない場合は、フリー素材として公開されている画像を、いろいろ探してみると良いでしょう。
フリー素材探しには、All About Japan 内 Web素材ガイドサイトをぜひご活用下さい。
様々な素材集公開サイトが紹介されています。
なお、この記事中で使用した背景用のグラデーション画像は、ご自由にコピーしてご活用下さって構いません。
|
◆関連ガイドサイト◆
★関連記事・リンク★ |
当ガイドの他の記事・コラムを読んでみる
|
メールマガジン発行中
