リボンを掛けるソース

作ったリボン画像を、ページの左上や右上に配置すれば、リボンが掛かったように見えます。 これには、下記のようなHTMLとスタイルシートを使います。

■左上に配置する場合:

<img src="ribbon.gif" width="150" height="150" alt="りぼん" style="position: absolute; top: 0px; left: 0px;">

■右上に配置する場合:

<img src="ribbon.gif" width="150" height="150" alt="りぼん" style="position: absolute; top: 0px; right: 0px;">

上記のソースは、どちらもリボン画像のファイル名が「 ribbon.gif 」の場合の例です。 実際に使う際には、用意した画像ファイル名に合わせて書き換えて下さい。(画像サイズも同様)

このソースは、リボンを掛けたいページ(HTML)の末尾にでも記述しておけば良いでしょう。(body要素内であればどこに記述しても構いません。スタイルシートが解釈されなかった場合には、ソースを記述した位置にそのままリボン画像が表示されてしまいます。その際にページデザインを崩してしまわないよう、ページ末尾に書いておくのが良さそうです。)

リボンを掛けるソースの解説

画像を表示させるimg要素内に、style属性を加えて直接スタイルシートを記述しています。
スタイルシート部分では、positionプロパティ・topプロパティ・leftプロパティ(またはrightプロパティ)の3つを使っています。

■positionプロパティ

positionプロパティは、ボックスの配置方法を指定するプロパティです。この値に「absolute」を指定することで、本来表示される位置から離れて、ページの端に(他のものに重ねて)表示させることができます。

※ただし、img要素を含んでいる親ボックスのpositionプロパティにstatic以外の値が指定されている場合は、その親ボックスの端を基準にして表示されてしまいます。

なお、このpositionプロパティの値に「fixed」を指定すると、ウインドウの上端に固定され、ページをスクロールしても常に上端にリボンが見えるようになります。 (※ただ、まだまだ利用者の多いIE6.0でサポートされていないため、「fixed」の指定を今使うのは現実的ではなさそうです。)

■top・left・rightプロパティ

topプロパティは上端からの距離を指定し、leftプロパティは左端からの距離・rightプロパティは右端からの距離を指定するプロパティです。 上記の例では、いずれも「0px」を指定しているため、ぴったり端にくっつく位置に表示されます。

おわりに

今回は、ページの左上や右上に「リボン」を掛ける方法をご紹介いたしました。 ページの装飾に活用してみて下さい。

なお、ナビゲーション(メニューやパンくずリストなど)の上に重ねて表示させると、(透過部分であっても)重なった部分のナビゲーションが利用できなくなってしまうので注意して下さい。 リボン画像は、ナビゲーション部分などの「ユーザがクリックする可能性のある箇所」に重ならないように配置しましょう。

※なお、リボン部分のみをリンクにして、リボンをクリックすると任意のページに飛べるようにする方法は、次回の記事でご紹介致します。

[次回記事]「リボン部分だけをクリック可能にする」(公開済み)

【関連記事】




■容量たっぷり20GB、国内通話5分無料も付いて、2970円(税込)



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