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

Home > TECH BLOG >【実践】Tailwind CSSでハンバーガーメニューを作ってみよう
 
公開日:2023年2月15日 更新日:2023年10月13日

はじめに

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

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

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

ゴールを確認しよう

See the Pen Untitled by 藤澤勇樹 (@ffggss) on CodePen.

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

  • コーディングの開始時点からゴールまでの過程を動画にまとめました。
  • ハンバーガーメニューを作って見たいという方にオススメの動画になっております。
  • Tailwind CSSですがJavaScriptとの相性も良くマスターしやすいかと思います

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

ユーティリティクラス

  • 記法として重複するクラスは除いてます
クラス記法意味CSSプロパティ
flexflexCSS Flexboxに指定するdisplay: flex;
h-20h-{number}高さを5remに指定するheight: 5rem; /* 80px */
items-centeritems-stretchCSS Flexboxで交差軸に対して中央寄せするalign-items: center;
border-y-2border-{side}-{number}ボックスの上下枠に2pxの線を引くborder-top-width: 2px; border-bottom-width: 2px;
p-6p-{size}上下左右のパディング領域を1.5remに指定するpadding: 1.5rem; /* 24px */
right-6{top|right|bottom|left|inset}-{size}position(fixed, absolute, relative, sticky, static)によって基準値が異なるが、fixedの場合は、ウィンドウ右端からの位置を指定するright: 1.5rem; /* 24px */
hiddenhidden要素を非表示にするdisplay: none
text-whitetext-{color}文字色を指定するcolor: rgb(255 255 255);
fixedfixed要素を画面のきまった位置に固定するposition: fixed;
z-0z-{index}要素を重ねる順序を指定する。数字が大き方が前面(上部)に位置する。z-index: 0;
w-fullw-full要素の横幅を100%に指定するwidth: 100%;
translate-x-fulltranslate-x-full要素の表示位置をXに100%の位置に移動する。アニメーションで使われる。transform: translateX(100%);
bg-blue-500bg-{color}背景色をrgb(59 130 246)の青色に設定する。background-color: rgb(59 130 246);
text-centertext-centerテキストなどのインライン要素を中央寄せするtext-align: center;
font-boldfont-{weight}テキストを太文字にするfont-weight: 700;
ease-linearease-{timing}CSSプロパティが変化する際のアニメーションの速度を”一定の割合で直線的に変化”するように指定するtransition-timing-function: linear;

アイコン画像(Font Awesome)

font-awesome libraries

おわりに

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

[宣伝] GASプログラミング入門の教材 - Udemy

  • 2023年11月時点で、約3,000人の受講生を獲得し、「Udemy Business」に選定されてます。
    • 「Udemy Business」とは、Udemyが「企業研修」向けに提供しているサービスのことです。
    • Udemyで販売している全ての講座の中から、「企業研修」に提供できる高品質な講座をレビューや内容を加味して厳選していることが特徴のサービスです。
    • その「Udemy Business」で、このGAS講座は採用されております。
  • 教材の詳細は、以下のUdemyに記載しておりますので内容ご確認ください
    • 以下のバナーから購入すると、通常、定価27,800円が1,500円に割引される特別クーポンが適用されます!
    • 有効期限は、です。

関連記事