見出し画像

【実践】Tailwind CSSでハンバーガーメニューを作ってみよう

藤澤勇樹

はじめに

Tailwind CSSに関連したスキルを動画で解説した記事です。前回、「Tailwind CSS + GASでの最も単純なWebページ」ということで単純に「Hello World!!」だけでしたが、今回は、応用として「Tailwind CSS実践的にハンバーガーメニューを作ってみよう！」という内容をYouTube動画で解説いたします。
※ この記事は、以下記事の応用課題という位置づけです。もし、Tailwind CSSを書いたことがない人は以下の記事をご一読いただけますと幸いです。

ここからコーディングを開始しよう

  • まずは以下バナーをクリックして学習準備をしてください。

ゴールを確認しよう

「Run Pen」を実行すると完成したデモ画面が見れます。

【動画で解説】Tailwind CSSでハンバーガーメニューを作ってみよう！

  • コーディングの開始時点からゴールまでの過程を動画にまとめました。

  • ハンバーガーメニューを作って見たいという方にオススメの動画になっております。

  • Tailwind CSSですがJavaScriptとの相性も良くマスターしやすいかと思います

ハンバーガーメニューを作るのに活用したTailwind CSSのユーティリティクラスなどを理解しよう

ユーティリティクラス

  • 以下、動画内で紹介したクラス、意味です

アイコン画像(Font Awesome)

  • ハンバーガー(３本線)

  • バツ(Xマーク)

font-awesome libraries

おわりに

今回は、応用として「Tailwind CSS実践的にハンバーガーメニューを作ってみよう！」といった記事でしたがいかがだったでしょうか？
ハンバーガーメニューは様々なWebサイトで使っているので覚えておくと応用範囲が広い上に、学習の題材としても最適です。
ぜひこれからもTailwind CSSに挑戦していってください。

いいなと思ったら応援しよう！