ホームページ作成/画像の表示・活用 (HTML,CSS,JavaScript)

ページの左上や右上に「リボン」を掛ける(2ページ目)

ウェブページの左上端や右上端に、好きな色・好きな文字を描いた「リボン」を掛けてみましょう。既存デザインの上から簡単にリボンを掛けることができます。何かの記念日などの一時的な装飾に良さそうです。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

リボンを作る

「リボン」は、画像として作ります。先ほどの例で使った「リボン」画像は、以下の2つです。

赤:リボン赤 緑:リボン緑

どちらも、横150px×縦150pxサイズのGIF画像です。 この画像を、ページの左上や右上に配置させることで、ページにリボンが掛かっているように見せられます。

リボン以外の部分が透過色になっているため、どんなものの上に配置してもリボンだけが重なっているように見えます。

赤:リボン赤 緑:リボン緑

まずは、このような画像を作りましょう。
画像なので、何を描くかはまったく自由です。好きな色・好きな文字列を描いて作成して下さい。

上記では、150×150サイズで作っていますが、特に制約はないので好きな大きさで作って構いません。 ただし、あまり大きすぎると邪魔になりますので注意して下さい。

新たに作成するのが面倒な場合は、下記の文字なし画像をダウンロード(コピー)して、色を変更したり文字を描き加えたりしてご活用下さい。

赤:リボン赤(無地) 緑:リボン緑(無地)

さて、リボン画像が作れたら、ページ上端に掛けてみましょう。
スタイルシートを使って簡単に実現できます。

「リボン」を左上や右上に配置する方法へ >>

  • 前のページへ
  • 1
  • 2
  • 3
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます