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

2023/2/8 23:282023/11/15 9:13

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

公開日：2023年2月15日　更新日：2023年10月13日

はじめに

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

※ この記事は、以下記事の応用課題という位置づけです。もし、Tailwind CSSを書いたことがない人は以下の記事をご一読いただけますと幸いです。

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

GASでWebページを作成できるようになりたい方に向けて、Tailwind CSS + GASのWebページ作成に関連したスキル・知識を詳細に解説した記事です。著者：藤澤勇樹(FUJISAWA Yuki)。

https://wywy.jp/blogs/gas-tailwindcss-web-explanation

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

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

会員登録など一切不要でTailwind CSSのオンラインエディタが利用できるサービスへのリンクです

Tailwind Play

An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.

https://play.tailwindcss.com/Gpc0PSwmZY

ゴールを確認しよう

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

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

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

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

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

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

ユーティリティクラス

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

公式サイトより参照

クラス	記法	意味	CSSプロパティ
flex	flex	CSS Flexboxに指定する	display: flex;
h-20	h-{number}	高さを5remに指定する	height: 5rem; /* 80px */
items-center	items-stretch	CSS Flexboxで交差軸に対して中央寄せする	align-items: center;
border-y-2	border-{side}-{number}	ボックスの上下枠に2pxの線を引く	border-top-width: 2px; border-bottom-width: 2px;
p-6	p-{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 */
hidden	hidden	要素を非表示にする	display: none
text-white	text-{color}	文字色を指定する	color: rgb(255 255 255);
fixed	fixed	要素を画面のきまった位置に固定する	position: fixed;
z-0	z-{index}	要素を重ねる順序を指定する。数字が大き方が前面(上部)に位置する。	z-index: 0;
w-full	w-full	要素の横幅を100%に指定する	width: 100%;
translate-x-full	translate-x-full	要素の表示位置をXに100%の位置に移動する。アニメーションで使われる。	transform: translateX(100%);
bg-blue-500	bg-{color}	背景色をrgb(59 130 246)の青色に設定する。	background-color: rgb(59 130 246);
text-center	text-center	テキストなどのインライン要素を中央寄せする	text-align: center;
font-bold	font-{weight}	テキストを太文字にする	font-weight: 700;
ease-linear	ease-{timing}	CSSプロパティが変化する際のアニメーションの速度を”一定の割合で直線的に変化”するように指定する	transition-timing-function: linear;