creatersnest122

グローバルメニューのデザインに使えるCSSテクニックまとめ


グローバルメニューは、タイトルの次に重要な要素です。
顔の大事なパーツと言っても過言ではありません。
一番「テクニック」を求められるところかもしれません。

CSSを使って、わかりやすくて読みやすい、そしてクリックしたくなるような
グローバルメニューを作ってみましょう。

目次

リストタグで横並びのメニューを作る/ホームページを小粋に

リストタグで横並びのメニューを作る

http://yume.hacca.jp/koiki/css/listyoko.htm

グローバルメニューのほとんどが、現在ではリストタグを
CSSでデザインしたものが多いです。
その基本的なメニューの作り方を理解しておきましょう。

 

CSSで作ったドロップダウンメニューのドロップの動きいろいろ/webpark

CSSで作ったドロップダウンメニューのドロップの動きいろいろ

http://weboook.blog22.fc2.com/blog-entry-408.html

グローバルメニューからドロップダウンするメニューが
シュッと出てくるデザインのものをよく見かけますね。
そんなドロップダウンする動きにも、実はいろいろあるんです。

 

CSSだけで作る動きのあるドロップダウンメニュー/webpark

CSSだけで作る動きのあるドロップダウンメニュー

http://weboook.blog22.fc2.com/blog-entry-359.html

ドロップダウンメニューをCSSだけでかっこよいものができます。
そんな動きを、実際に作りながら解説しています。
ぜひ挑戦してみてください。

 

メニュー/HTML・CSSサンプルコード集/TAG index

メニュー/HTML・CSSサンプルコード集

http://www.tagindex.com/template/menu/

グローバルメニューにも、縦並びや横並び、
グラデーションを使ったりフラットだったりさまざまなデザインが
あります。
そんなサンプルが一目で確認できるので、自分の好みにあったものを
探し出すことができるサイトです。

 

シンプルなソース・CSSだけでアニメーション・ドロップダウンメニュー/Ri-mode Rainbow

シンプルなソース・CSSだけでアニメーション・ドロップダウンメニュー

http://ri-mode.com/rainbow/2014/06/11/simple_css_dropdown_menu/

CSS3のアニメーション効果をだす「transition」を使った
動きのあるドロップダウンメニューの作り方を解説しています。
より見やすいグローバルメニューにしてみましょう。

 

【サンプル有】レスポンシブなグローバルナビの作り方3選/Mobile First Marketing Lab.

【サンプル有】レスポンシブなグローバルナビの作り方3選

http://www.aiship.jp/knowhow/archives/14535

グローバルメニューもレスポンシブにしたいものですね。
このサイトでは、それぞれにレスポンシブにした場合のメリットを
ポイントに、詳しく解説しています。

 

CSSだけ使用して、プルダウンメニュー付きの、グローバルメニューの作成/Wel

CSSだけ使用して、プルダウンメニュー付きの、グローバルメニューの作成

http://akira-t.com/html-css-933.html

画像を一切使わない、CSSだけでグローバルメニューに
プルダウンメニューをつける方法を紹介しています。
角丸メニューなので、やわらかいイメージでできあがります。

 

グローバルナビをHTMLとCSSのみで追加しました。/僕トク的なアレ

グローバルナビをHTMLとCSSのみで追加しました。

http://rnmtsu.hatenablog.com/entry/2014/12/21/161045

グローバルといえど、シンプルイズベストが好みという方向けです。
コード自体も短くて、手早くできますね。
解説もくだけた感じで親近感があります。

 

CSSだけで作る「多階層」なドロップダウンメニュー/webpark

CSSだけで作る「多階層」なドロップダウンメニュー

http://weboook.blog22.fc2.com/blog-entry-383.html

ドロップダウンメニューでも多階層にする方法を
紹介しています。
IE7でもドロップダウンは表示されるので、安心ですね。

 

グローバルナビの実装に便利!CSSプロパティdisplay: table-cellを使おう/ツーブロッカ

グローバルナビの実装に便利!CSSプロパティdisplay: table-cellを使おう

http://satohmsys.info/display-table-cell/

グローバルメニューを作る際に使うリストタグに、
CSSのdisplay:table-cellを使って、使い勝手のよい
メニューの作り方を解説しています。

 

横並びメニューの区切り線を隣接セレクタを使ってスマートに実装する方法/WEB企画×スタッフブログ

横並びメニューの区切り線を隣接セレクタを使ってスマートに実装する方法

http://webkikaku.co.jp/staff/htmlcss/adjacent-sibling-combinator/

グローバルメニューを作る場合、隣あう区切り線の扱いに
悩んだことはありませんか?
そんな悩みに、シンプルに見やすくする方法があります。

 

Simplicityのグローバルナビを透過させてアニメーション化した/Fuwa Fuwa news

Simplicityのグローバルナビを透過させてアニメーション化した

http://qb-trendnews.com/simplicity-navi-animate/

ナビゲーションメニューで、オンマウスした1箇所のみを
強調し、かつ他のメニューが薄くなるアニメーション効果を
使ったグローバルメニューを紹介しています。

 

CSS Spriteでナビゲーション設定/Webデザインの勉強 風姿花伝

CSS Spriteでナビゲーション設定

http://d.hatena.ne.jp/web-css-design/20150413/p1

CSS Spriteを使ったナビゲーションメニューを、
じっくりと解説しています。
実際にCSS Spriteとは何か?も説明しているので、
理解した上で作ってみるのも良い勉強です。

 

保存版!CSS3で出来る素敵なデザインやアニメーションをまとめてみた/WEB DESIGN FAN

保存版!CSS3で出来る素敵なデザインやアニメーションをまとめてみた

http://www.webdesign-fan.com/css3-matome

グローバルメニューやボタンなどにも使えるCSSでの
デザインやアニメーションについて、ひとつひとつのセレクタを
紹介しています。

 

CSSだけで動きのあるアコーディオン・メニュー 改訂版/Ri-mode Rainbow

CSSだけで動きのあるアコーディオン・メニュー 改訂版

http://ri-mode.com/rainbow/2014/11/20/css_accordion_menu-2/

CSSを使ったアコーディオンタイプのメニューの
作り方を解説しています。
メニューにマウスをのせると、サブメニューがするするっと
表示されるアニメーションです。

 

今どきのおしゃれなリンクのhoverを実現するCSSアニメーションサンプル21選/sounansa.net

今どきのおしゃれなリンクのhoverを実現するCSSアニメーションサンプル21選

http://sounansa.net/archives/741

CSSのhoverで、おしゃれなアニメーションのサンプルを
掲載しているサイトです。
もちろんグローバルメニューにも使っておしゃれにできますので、
サンプルをダウンロードして確認するとよさそうです。

 

アクセシビリティを考えたドロップダウンメニューを実装する/webクリエイターボックス

アクセシビリティを考えたドロップダウンメニューを実装する

http://www.webcreatorbox.com/tech/accessible-drop-down-nav/

グローバルメニューにも、アクセシビリティは気をつけたい点です。
タブキーでドロップダウンメニューが表示されたら便利ですよね。
その作り方について、紹介しているページです。

 

CSSだけ、javascriptを使わずに作られた バーガーボタンを押すとスライドインして現れるメニュー/9ineBB

CSSだけ、javascriptを使わずに作られた バーガーボタンを押すとスライドインして現れるメニュー

http://9-bb.com/コピペで使える」cssだけ、javascriptを使わずに作られた/

ボタンをクリックして現れたボタンにマウスをのせると、
するすると背景が動いて、URLが表示されるかっこいいメニューです。
アニメーションが凝っているので、見た目がおしゃれです。

 

レスポンシブWebデザインに対応したメニューの作り方【追記あり】/Webpark

レスポンシブWebデザインに対応したメニューの作り方【追記あり】

http://weboook.blog22.fc2.com/blog-entry-392.html

レスポンシブなWebページに対応した横メニューの作り方を
解説しています。
どんな点に注意したら良いか理解できます。

 

横一列に並ぶ複数要素を均等幅で配置する/NAKAZI LAB.

横一列に並ぶ複数要素を均等幅で配置する

http://nakazilab.com/multiple-elements-equal-width-placement/

グローバルメニューには、横メニューがよく使われます。
そんなメニューを、CSSのdisplay:tableなどを使って、
きれいな均等の幅に統一した配置のものを作成できます。

 

まとめ

グローバルメニューには、そのWebサイトの大事な「目」の役割を果たします。
どんなページがあるかWebサイトの全容を、その「目」を見れば
おのずとわかってきますね。

だからこそ、ユーザーに目にしてほしいわかりやすいデザインや、
クリックしてもらうための工夫を考えながらしっかりと
作り込んでいくといいでしょう。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Articleフラットデザインのアイコン素材を無料でGETできるサイト15選