個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法をご紹介します。
リボン関連については便利なジェネレーターが揃っていますが、CSSプロパティーを知る上でも勉強になるのでご紹介します。

HTMLでマークアップ

ナビゲーション部分をHTMLでマークアップします。
idは”navigation”にしておきます。

CSSでスタイリング

CSSでスタイリングしていきます。

メニューを水平に並べる

まずはメニューを水平に並べます。
li要素に対してdisplay:block、float:leftを適用します。

次のようになります。
切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

文字にドロップシャドウのエフェクトをかける

文字にエフェクトをかけます。
text-shadowを利用して、ドロップシャドウのエフェクトをかけます。

次のようになります。
切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

マウスオーバー時のエフェクトを設定する

マウスオンしたときに、少しだけズレるようになエフェクトを付けたいので、margin-bottomを設定します。

リボン部分を作成します

リボン部分を作成するには、全体を合計6つのdiv要素を追加する必要があります。
メニュー部分自身、リボン本体部分、右エッジ部分2つ、左エッジ部分2つの合計6つです。
順番に見ていきます。

全体をdivで囲む

メニュー部分全体をdivで囲み、id=”navigation_container”とします。

この#navigation_containerにCSSを適用します。

本体部分を作成するため、もう一度、内側をdivで囲む

さらに、内側をもう一度divで囲み、class=”rectangle”とします。
この部分はリボンの本体部分となります。

.rectangleにCSSを適用します。

次のようになります。

切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

リボンのエッジ部分を作成する

リボンのエッジ部分を作成するため、div要素を追加します。
それぞれ左のエッジ部分の上下、右のエッジ部分の上下に合計で4つのdivを追加します。

まずリボンのエッジ上部分から。
エッジ部分に対して、boder-widthプロパティを加えます。
border-widthは50pxとします。
この値がリボンのエッジ上部分の大きさになります。
これに対して、heigthとwidthを0pxにしていることにご注目。
この値をheight,widhtともに50pxとすると以下のようになります。
(わかりやすくするため、リボン本体部分は色を透明にしています)
切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

heigthとwidthを0pxにすることによって、以下のような形になります。
ボーダーだけになっている様子がわかります。
切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

ここで、border-colorの上部分以外(青と黄色になっている部分)をtransparent=透明にすれば、二等辺三角形を形作ることができます。
切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

さらに、float:leftで本体を回りこませます。
切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

下部分も同じ要領で作成しますが、floatの値が変わっていることに注意してください。
位置をずらすことで、上と下の三角形を重ね合わせて、リボンのエッジ部分になります。
わかりやすく色を変えると以下のようになります。
切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

最後に、エッジ部分を左にずらして、リボン本体の下に隠して、リボンのエッジを表現しています。
切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

右部分も同じように指定します。

切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

これで完成です!
切れ込みの入った リボン型ナビゲーションを CSS3だけで実装する方法

ここはでは、「How to Create a Modern Ribbon Banner Navigation Bar with Pure HTML/CSS3」を参考に作成しました。

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 0
  • 1

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

プロジェクトにすぐ使えるハイクオリティーなHTML/CSS無料テーマテンプレート集100

プロジェクトにすぐ使えるハイクオリティーなHTML/CSS無料テーマテンプレート集100

HTML/CSS無料テーマテンプレートでハイクオリティーなものがありましたのでご紹介します。 これ

記事を読む

アイコンフォントはもはや常識!アイコンフォントを無料で利用できるサービス ベスト10

アイコンフォントはもはや常識!アイコンフォントを無料で利用できるサービス ベスト10

好きなアイコンだけを選んでオリジナルのアイコンフォントにできる無料のサービスをまとめてご紹介します。

記事を読む

超簡単!CSSで上下左右センターにする方法

超簡単!CSSで上下左右センターにする方法

超簡単ですぐ実践できるCSSで上下左右センターにする方法をご紹介。 display:flexを使っ

記事を読む

WEBデザインの勉強・参考に!プロがPhotoshopで作成したWEBサイト用無料PSDフリーテンプレート80

WEBデザインの勉強・参考に!プロがPhotoshopで作成したWEBサイト用無料PSDフリーテンプレート80

WEBデザインを勉強するうえで大切なのが、自分でいいなあと感じたデザインをそのままマネしてつくってみ

記事を読む

息抜きに火星ツアーに出かけよう!火星をバーチャル・ツアーできるDiscovering Gale Crater

息抜きに火星ツアーに出かけよう!火星をバーチャル・ツアーできるDiscovering Gale Crater

火星をバーチャル・ツアーできるDiscovering Gale Craterをご紹介します。 Lo

記事を読む

WordPressで格安レンタルサーバーを選ぶなら?エックスサーバーかミニバードがおすすめ!

WordPressにベストな格安レンタルサーバーはこれです!

WordPressでレンタルサーバーを選ぶ場合のおすすめサーバーご紹介します。 新しくWordPr

記事を読む

使える!2015年時点で最高の無料HTMLフリーテンプレート50+

使える!2015年時点で最高の無料レスポンシブ用フリーテンプレート50+

2015年時点で最高の無料レスポンシブ用フリーテンプレートをご紹介します。 今回ご紹介する無料のH

記事を読む

月額ゼロ円(無料)でホームページ・ECサイトを制作・運営できるサービス12

ホームページ制作を生業としているものにとっては、穏やかではないのが「無料でホームページを制作できてし

記事を読む

Gmailの送信メールを一定期間で自己消滅させる機能拡張「Dmail」

Gmailの送信メールを一定期間で自己消滅させる機能拡張「Dmail」

Gmailの送信メールを一定期間で自己消滅させる機能拡張「Dmail」をご紹介します。 Gmail

記事を読む

よくわかる 初心者のためのCSS3 transitionとtransformのチュートリアル

よくわかる 初心者のためのCSS3 transitionとtransformのチュートリアル

初心者のためのCSS3 transition(トランジション)とtransform(トランスフォーム

記事を読む