![見出し画像](https://assets.st-note.com/production/uploads/images/144496954/rectangle_large_type_2_18867d958e9bbbdad74b591f1c512f5d.png?width=1200)
【実践】Tailwind CSSでハンバーガーメニューを作ってみよう
はじめに
Tailwind CSSに関連したスキルを動画で解説した記事です。前回、「Tailwind CSS + GASでの最も単純なWebページ」ということで単純に「Hello World!!」だけでしたが、今回は、応用として「Tailwind CSS実践的にハンバーガーメニューを作ってみよう!」という内容をYouTube動画で解説いたします。
※ この記事は、以下記事の応用課題という位置づけです。もし、Tailwind CSSを書いたことがない人は以下の記事をご一読いただけますと幸いです。
ここからコーディングを開始しよう
まずは以下バナーをクリックして学習準備をしてください。
ゴールを確認しよう
「Run Pen」を実行すると完成したデモ画面が見れます。
【動画で解説】Tailwind CSSでハンバーガーメニューを作ってみよう!
コーディングの開始時点からゴールまでの過程を動画にまとめました。
ハンバーガーメニューを作って見たいという方にオススメの動画になっております。
Tailwind CSSですがJavaScriptとの相性も良くマスターしやすいかと思います
ハンバーガーメニューを作るのに活用したTailwind CSSのユーティリティクラスなどを理解しよう
ユーティリティクラス
以下、動画内で紹介したクラス、意味です
記法として重複するクラスは除いてます
![](https://assets.st-note.com/img/1718717978039-Np2d94HQn5.png?width=1200)
アイコン画像(Font Awesome)
ハンバーガー(3本線)
バツ(Xマーク)
font-awesome libraries
おわりに
今回は、応用として「Tailwind CSS実践的にハンバーガーメニューを作ってみよう!」といった記事でしたがいかがだったでしょうか?
ハンバーガーメニューは様々なWebサイトで使っているので覚えておくと応用範囲が広い上に、学習の題材としても最適です。
ぜひこれからもTailwind CSSに挑戦していってください。
この記事が気に入ったらサポートをしてみませんか?