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

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

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

ウェブページの上端にリボンを付ける

既存のウェブページの左上や右上に、リボンをかけてみましょう。
たとえば、以下のような感じで。

以下は、All Aboutのページにリボンを貼り付けてみた例です。

ページ左上に赤いリボンを付けたところ
▲ページ左上に赤いリボンを付けたところ
ページ右上に緑色リボンを付けたところ
▲ページ右上に緑色リボンを付けたところ

どんなページにも、簡単にこのような「リボン」をかけることができます。
上記の例では、ただ「All About Ribbon」と書いているだけですが、「The 10th Anniversary」や「今日は誕生日」など、何でも好きな文字列を描いて使うと良いでしょう。

今回は、このような「リボン」をページ上部に貼り付ける方法をご紹介いたします。
※上記の使用例では、ナビゲーション部分にリボンが重なっているため、好ましくありません。実際に活用する際には、リボンがナビゲーション部分に重ならないような配置になるよう注意して下さい。(左側にナビゲーションがあるなら、リボンは右上に配置するなど。)

まずは、「リボン」そのものを作りましょう >>

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

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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