スタイルシートで楽々背景画像を付加

前回のスタイルシート活用講座[1]では、スタイルシートを用いると、 TABLEを駆使しなくても、手軽にどこにでも背景色や背景画像を指定できることをご紹介致しました。

今回は、その具体的な活用例をご紹介致しましょう。

見出しの背景をグラデーション

HTMLには、「見出し」を表すタグが用意されていることをご存じでしょうか。 「 <h1> 」や「 <h6> 」などがそうです。
h1 は最も重要度の高い見出しを表し、以下 h2 , h3 …と続き h6 まであります。
※代表的なブラウザでは、重要度が高いほど大きな文字で表示します。

今回は、この「見出し」を、前回ご紹介した方法で装飾してみましょう。

作成結果は、次のような見出しになります。
※ここでは画像で表示しています。

作成結果のサンプル画像

前回、背景画像を指定するには「 background-image 」プロパティを用いるとご紹介致しました。
そこで、HTMLの head要素内( <head>~</head> 内)に、次のようにスタイルを記述します。

<style type="text/css"><!--
h1 { background-image: url("gradg.gif"); }
--></style>

上記の gradg.gif は、背景画像のファイル名で、次のような画像です。

緑色のグラデーション画像

白色から緑色へのグラデーションになっている画像です。
この画像を背景画像として指定したのが、先ほどのソース(スタイルシート)です。

このように準備した上で、次のように記述すると、

<h1>これが見出しですよ</h1>

次のような表示になります。

これが見出しですよ

見出しの背景がグラデーションになっているのがお分かり頂けると思います。
※もちろん、スタイルシートを無効にしていたり、スタイルシートを解釈しないブラウザでは、普通の文字にしか見えません。

スタイルシートを使うと、TABLEを駆使して背景画像を加えたりするよりも、遙かに手軽に装飾が可能になることが、お分かり頂けたと思います。
みなさんのホームページでも、ぜひ、活用してみて下さい。

背景画像は...

背景用の画像を自分で作れない場合は、フリー素材として公開されている画像を、いろいろ探してみると良いでしょう。
フリー素材探しには、All About Japan 内 Web素材ガイドサイトをぜひご活用下さい。 様々な素材集公開サイトが紹介されています。

なお、この記事中で使用した背景用のグラデーション画像は、ご自由にコピーしてご活用下さって構いません。

◆関連ガイドサイト◆

★関連記事・リンク★



●メールマガジン発行中
毎週1回発行中。 メールマガジン上でしか読めない豆知識なども連載。 ご購読は無料。みなさんのご登録をお待ちいたしております。
登録・バックナンバーの閲覧はこちら


※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。