Programing beginner by koala

【分かりやすっ!】CSSでハンバーガーメニューの作り方「過保護説明」

スマホ用のメニューと言えば、ハンバーガーメニューっ!!ですね。

私も最近この名前を知ったのですが、下記のように、三本線になっていて、クリックすると横からびよーんと出てくるメニューを、ハンバーガーメニューと言うそうです(^^)

WordPressなどで使用するには、便利なプラグインなどもあるようですが、今回はCSSにて作ってみました!

初心者でも分かりやす~~~~~く説明しているので(そもそも私が初心者)、是非参考にしてみてくださいね(^^)

難しい。。

YouTubeやら、ブログやら、いろいろ見てみたのですが、とにかく初心者には難しいっ!っていうのが感想です。

この記事では、どういった仕組みになっているのか~実際に作ってみるというところまでやっていきますっ!

大まかな構造

ハンバーガーメニューの大まかな構造は下記の通りです。

こんな感じで、inputタグlabelタグの関係を使用し、チェックが入ったら、メニューを表示させるという仕組みにします。

inputタグlabelタグの関係については、動画を参考にしてみてくださいね(^^)

というわけで、一つづつ始めていきますね!

htmlのコードはこんな感じです。

もしここに背景色を付けたければ、これを全て囲むdivタグを付けるといいですね!

CSSは下記の通りです!

詳しい説明は、動画の方を参考にしていただきたいのですが、難しいタグと言えば、transform: translateXあたりかな?と思いますので、下記にちょっとだけ解説しておきますね(^^)

transform: translateXとは?

まず、transformタグは、基本的にX軸(横)とY軸(縦)に沿って、要素を移動してくれるものになります。

今回はtranslateXですので、当然のことながら、横に移動してくれる感じになりますね!

書き方は下記の通りです。

動画では軽く触れていますが、さらにtransitionタグというものを使うと、アニメーション的なものも作れます(^^)

まとめ!

ハンバーガーメニューも、基礎さえ分かれば、後はデザイン次第で自由に変えることが出来ます!

ググると、様々なハンバーガーメニューのコードが紹介されていますので、この基礎を元に、自分だけのオリジナルのハンバーガーメニューを作ってみてくださいね(^^)

以上ですっ!

About me

IT業界6年目にして、プログラミングの勉強を始めたkoalaです。

プログラミング用語が難しすぎる!ということで、初心者が初心者に解説するという型破りなブログを開設してみました。

専門用語少な目、分かりやすくをモットーにしています。

>>続きはこちら

今日の名言

クリックすると、あなたの心に響く誰かの名言が表示されます♪

 

今日の名言

 
※あなたの名言募集しています!詳細はこちら