ホームページ作成/画像の表示・活用 (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. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます