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

はじめに

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

【詳解】GAS + Tailwind CSS で最も単純なWebページを公開しよう

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

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

Tailwind Play

ゴールを確認しよう

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

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

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

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

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

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

ユーティリティクラス

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

  • 記法として重複するクラスは除いてます

  • 公式サイトより参照

アイコン画像(Font Awesome)

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

Bars Classic Solid Icon | Font Awesome

• バツ(Xマーク)

Xmark Classic Solid Icon | Font Awesome

font-awesome libraries

font-awesome - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

おわりに

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