新潟県妙高市|ホームページと広告の相談相手

MENU [+]閉じる [×]
jQuery不使用!HTML&CSSのハンバーガーメニューで妙高Web屋がお勧めするページ2件【HTML5&CSS3】

ホームページを作るとき、特にスマートフォン用サイトの制作の場で「ハンバーガーメニュー」という単語をよく聞くようになりました。

HTMLとCSS、そしてjQueryを用いて作ることがまだまだ多いと思われますが、一部のスマートフォンの機種でjQueryの一部記述と相性が良くない問題があり、

「できればjQueryなしで作りたい!」

とお考えの方も多いようです(^^;)

そこで今回は、妙高Web屋がお勧めする「HTML&CSSだけで作る!ハンバーガーメニューのコード紹介ページ」をご紹介します。

この記事の目次

そもそも「ハンバーガーメニュー」とは??

「ハンバーガーメニュー(またはハンバーガーアイコン)」とは、主にスマートフォンサイトなどで見かける、ホームページ内のメニューリンクのリストを出したりしまったりするためのボタンです。

一般的に、スマートフォンサイトを見ると「MENU」とか「三」のような形のボタンを見かけませんか??

あれを押すと、メニュー一覧がパッと表示されますよね?

あのボタン、またはあれによって表示されるメニューのことを「ハンバーガーメニュー」と呼びます。

あのボタンにしばしば使われる「三」の形のアイコンが、

「パンと具をはさむハンバーガーのようだ」

ということで、ハンバーガーメニューと呼ばれているのだそうです。

(※厳密には諸説あるそうですが、こちらは有力な説の一つです。)

さて、そのハンバーガーメニューをHTML&CSSで作るには、どのようにすれば良いのでしょうか??

妙高Web屋お勧めの2つのページをご紹介します。

ページの先頭へ戻る

WordPress組込み用phpコードやレスポンシブコード対応CSSもアリ!(サルワカ | サルでも分かる図解説明マガジン)

まずは「サルワカ | サルでも分かる図解説明マガジン」さんというサイトで紹介されていた、こちらのページです。

こちらのページは、サイト名にもある通り「図解」がとっても明確で、コーダーさんの理解を促しやすいつくりになっています。

HTMLやCSSの記述のご紹介はもちろんのこと、

「WordPressでこれを組み込む場合はこうするのがお勧め!」

「CSSでブラウザのサイズに応じて変更する場合はCSSをこのようにするのがお勧め!」

など、主に想定される応用方法をカバーした、読む人にとって「かゆいところに手が届く」ページとなっています。

ページの先頭へ戻る

デモページで動かしながら感覚をつかめる!(VEGLコンテンツ)

次は「VEGLコンテンツ」さんというサイトで紹介されていた、こちらのページです。

こちらも「サルワカ」さんと変わらないほどHTML&CSSのコードがしっかり書かれています。

コード内の所々のコメントも的確でわかりやすいものだと思います。

こちらのページの特徴としてはデモページへのリンクが用意されていて、見る人の操作で「完成形」を確認できる点が挙げられます。

必要に応じて[Command]+[option]+[U]などでコードを見てみて、

「あ、この部分はこういう仕組みでコーディングしているんだ!」

と実感することもできそうです(^-^)

ページの先頭へ戻る

この記事の感想をお寄せください

[jQuery不使用!HTML&CSSのハンバーガーメニューで妙高Web屋がお勧めするページ2件【HTML5&CSS3】]の感想を、下記のリンク先の「感想投稿フォーム」よりお気軽にお寄せください。
メールアドレスは不要です。

感想投稿フォームへ

関連記事一覧:jQuery不使用!HTML&CSSのハンバーガーメニューで妙高Web屋がお勧めするページ2件【HTML5&CSS3】

ホームページのコーディングをしている皆さんは、要素を中央寄せにしたい場合は、どんなコードを書かれていますか? 例えばテキストを画面の、あるいはエリアの中央 …… 続きを読む

ホームページ制作をしていると、フォームの項目の一つで「チェックボックス」というものを扱う機会はあるかと思います。 また、チェックボックスを含むフォーム関連 …… 続きを読む

ホームページ制作において、デザイン修正は様々な場面で発生することがあります。 文言を変更したい場合や、要素の並びを部分的に入れ替えたい場合など、状況に応じ …… 続きを読む

皆さんは、ホームページのデザインを、どのページから始めるのが良いか、お考えになったことはありますか? もちろん、すべての場合に当てはまる正解などありません …… 続きを読む

ユーザーの方の操作に応じて、Webページ内の表示や動きを制御するホームページは、今ではよく見受けられます。 それらを実現している要素は「jQuery&CS …… 続きを読む

Copyright (C) 妙高Web屋 All Rights Reserved.