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

妙高Web屋

お仕事のご依頼お見積りのご依頼

Web制作

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

2018.1.31 2019.1.15

jQuery不使用!HTML&CSSのハンバーガーメニューで妙高Web屋がお勧めするページ2件【HTML5&CSS3】
Web制作 0 0
妙高Web屋LINE@ 友だち追加

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

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]などでコードを見てみて、

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

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

ページの先頭へ戻る

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

こちらの記事をご覧いただき、感じたことなどありましたら下記のボタンを押していただき「感想投稿フォーム」よりお気軽にご感想をお寄せください。

この記事の感想を投稿する
妙高Web屋LINE@ 友だち追加
0 0

LINE@始めました!

妙高Web屋ではこのたび、LINE@(ラインアット)を始めることとなりました。

企業やお店のWeb担当者さまへ向けて、ホームページの運営・管理・更新に関する情報を発信していきます。

情報を購読できる「友だち」へのご登録は、下記のボタンよりお願いいたします。

目的のページは見つかりましたか?

お探しのページが見当たらない場合は、キーワードを手がかりに、サイト内検索をご利用ください。

または、下記のボタンより「サイトマップ」のページにアクセスしていただき、お探しください。

目的のページは見つかりましたか?
Twitterでシェアする Twitterでシェアする Facebookでシェアする Facebookでシェアする Feedlyで購読する Feedlyで購読する お問い合わせお問い合わせ ページの先頭へページの先頭へ