リボンを掛けるソース
作ったリボン画像を、ページの左上や右上に配置すれば、リボンが掛かったように見えます。 これには、下記のようなHTMLとスタイルシートを使います。
■左上に配置する場合：
■右上に配置する場合：
上記のソースは、どちらもリボン画像のファイル名が「 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」を指定しているため、ぴったり端にくっつく位置に表示されます。
おわりに
今回は、ページの左上や右上に「リボン」を掛ける方法をご紹介いたしました。 ページの装飾に活用してみて下さい。
なお、ナビゲーション（メニューやパンくずリストなど）の上に重ねて表示させると、（透過部分であっても）重なった部分のナビゲーションが利用できなくなってしまうので注意して下さい。 リボン画像は、ナビゲーション部分などの「ユーザがクリックする可能性のある箇所」に重ならないように配置しましょう。
※なお、リボン部分のみをリンクにして、リボンをクリックすると任意のページに飛べるようにする方法は、次回の記事でご紹介致します。
［次回記事］「リボン部分だけをクリック可能にする」（公開済み）
【関連記事】
