ホームに戻る
Tailwind CSS コース
ユーティリティファーストCSSフレームワークで効率的なスタイリングを学ぼう
初
初級
無料で学習可能
初級Tailwind基礎
問題1: テキストカラーの基本
Tailwind CSSを使って、テキストに色を付ける練習です！
Tailwind CSSでは、text-[color]-[number]クラスを使用してテキストの色を変更できます。
📝 タスク1: h1要素を青色（text-blue-600）にしてください
📝 タスク2: 最初のp要素を赤色（text-red-600）にしてください
📝 タスク3: 2番目のp要素を緑色（text-green-500）にしてください
初級Tailwind基礎
問題2: フォントサイズと太さ
フォントサイズとウェイトの組み合わせを学びましょう！
📝 タスク1: h2要素をtext-2xl font-boldにする
📝 タスク2: p要素をtext-baseにする
📝 タスク3: small要素をtext-sm text-gray-500にする
初級Tailwind基礎
問題3: テキスト装飾と配置
テキストの装飾と配置を学びましょう！
📝 タスク1: 最初のpをtext-centerで中央揃えにする
📝 タスク2: 2番目のpにunderline text-blue-600を適用する
📝 タスク3: 3番目のpにuppercaseを適用する
初級Tailwind基礎
問題4: 行間と文字間隔
文字間隔と行高の調整を学びましょう！
📝 タスク1: h3にtracking-wideを適用する
📝 タスク2: pにleading-relaxedを適用する
初級Tailwind基礎
問題5: 背景色とテキスト色の組み合わせ
背景色とテキスト色の組み合わせを学びましょう！
📝 タスク1: 最初のdivにbg-blue-500 text-white p-2を適用
📝 タスク2: 2番目のdivにbg-yellow-400 text-black p-2を適用
📝 タスク3: 3番目のdivにbg-red-500 text-white p-2を適用
初級Tailwind基礎
問題6: サイズ指定
幅と高さの指定方法を学びましょう！
📝 タスク1: 最初のdivにw-64を適用（固定幅）
📝 タスク2: 2番目のdivにh-16を適用（固定高さ）
📝 タスク3: 3番目のdivにw-32 h-32を適用（正方形）
初級Tailwind基礎
問題7: ボーダーと角丸
ボーダーと角丸の使い方を学びましょう！
📝 タスク1: 最初のボタンにborder border-gray-300 px-4 py-2 roundedを適用
📝 タスク2: 2番目のボタンにborder border-blue-500 px-4 py-2 rounded-lg bg-blue-500 text-whiteを適用
📝 タスク3: divにw-12 h-12 rounded-full bg-gray-300を適用（円形アバター）
初級Tailwind基礎
問題8: Flexboxの基本
Flexbox基本プロパティを学びましょう！
📝 タスク: 親要素（最初のdiv）にflex items-center justify-centerを適用して、子要素を中央に配置してください
初級Tailwind基礎
問題9: Flexbox方向と配置
Flexboxの配置調整を学びましょう！
📝 タスク: nav要素にflex justify-between items-centerを適用して、ナビゲーションレイアウトを作成してください
初級Tailwind基礎
問題10: Gridレイアウト基礎
Grid基本レイアウトを学びましょう！
📝 タスク: 親要素にgrid grid-cols-2 gap-4を適用して、2列のグリッドレイアウトを作成してください
初級Tailwind基礎
問題11: コンテナとセンタリング
コンテナとマージン自動調整を学びましょう！
📝 タスク1: 外側のdivにcontainer mx-auto px-4を適用
📝 タスク2: 内側のdivにmax-w-4xl mx-autoを適用
初級Tailwind基礎
問題12: パディングの基本
パディングの方向指定を学びましょう！
📝 タスク1: 最初のdivにp-4を適用（全方向パディング）
📝 タスク2: 2番目のdivにpx-6を適用（水平パディングのみ）
📝 タスク3: 3番目のdivにpy-8を適用（垂直パディングのみ）
初級Tailwind基礎
問題13: マージンとスペーシング
マージンによる要素間隔を学びましょう！
📝 タスク: 最初の2つのボタンにmr-2を適用（最後のボタンには適用しない）
初級Tailwind基礎
問題14: スペースユーティリティ
space-xによる自動間隔を学びましょう！
📝 タスク: 親要素にflex space-x-4を適用
初級Tailwind基礎
問題15: ネガティブマージン
ネガティブマージンの活用を学びましょう！
📝 タスク: 画像に-mx-4 -mt-4を適用して親要素からはみ出させる
中
中級
中級Tailwind応用
問題16: カードレイアウト
実践的なFlexboxレイアウトを学びましょう！
📝 タスク1: 親要素にflex items-start space-x-4を適用
📝 タスク2: img要素にw-12 h-12 rounded-fullを適用
中級Tailwind応用
問題17: ナビゲーションバー
実践的なナビゲーション構築を学びましょう！
📝 タスク1: nav要素にflex justify-between items-centerを適用
📝 タスク2: リンクを含むdivにspace-x-6を適用
中級Tailwind応用
問題18: フレックスラップ
フレックスラップと実践的なタグリストを学びましょう！
📝 タスク1: 親要素にflex flex-wrap gap-2を適用
📝 タスク2: 各タグにpx-3 py-1 bg-gray-200 rounded-fullを適用
中級Tailwind応用
問題19: レスポンシブグリッド
レスポンシブグリッドシステムを学びましょう！
📝 タスク: 親要素にgrid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6を適用
中級Tailwind応用
問題20: 複雑なグリッドレイアウト
複雑なグリッドエリア指定を学びましょう！
📝 タスク1: 親要素にgrid grid-cols-4 grid-rows-3を適用
📝 タスク2: headerにcol-span-4、asideにrow-span-2、main/footerにcol-span-3を適用
中級Tailwind応用
問題21: モバイルファースト
ブレークポイントの使い方を学びましょう！
📝 タスク1: divにp-4 md:p-8 lg:p-12を適用
📝 タスク2: h1にtext-xl md:text-3xl lg:text-5xlを適用
📝 タスク3: pにtext-base md:text-lg lg:text-xlを適用（text-baseは省略可）
中級Tailwind応用
問題22: 表示・非表示の制御
レスポンシブな表示制御を学びましょう！
📝 タスク1: buttonにblock md:hiddenを適用（モバイルで表示、タブレット以上で非表示）
📝 タスク2: navにhidden md:blockを適用（モバイルで非表示、タブレット以上で表示）
中級Tailwind応用
問題23: レスポンシブフォーム
レスポンシブフォームレイアウトを学びましょう！
📝 タスク1: formにflex flex-col md:flex-row gap-4を適用
📝 タスク2: 各inputにpx-4 py-2 border rounded-lg md:flex-1を適用
📝 タスク3: buttonにpx-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700を適用
中級Tailwind応用
問題24: ボタンコンポーネント
一貫性のあるコンポーネント設計を学びましょう！
📝 タスク1: プライマリボタンにpx-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700を適用
📝 タスク2: セカンダリボタンにpx-4 py-2 rounded-lg border border-gray-300 hover:bg-gray-100を適用
📝 タスク3: 危険ボタンにpx-4 py-2 rounded-lg bg-red-600 text-white hover:bg-red-700を適用
中級Tailwind応用
問題25: アラートコンポーネント
実践的なアラートコンポーネントを学びましょう！
📝 タスク1: 成功アラートにp-4 rounded-lg border border-green-400 bg-green-50を適用
📝 タスク2: 成功アラートのstrongにtext-green-800を適用
📝 タスク3: エラーアラートにp-4 rounded-lg border border-red-400 bg-red-50を適用
📝 タスク4: エラーアラートのstrongにtext-red-800を適用
上
上級
上級Tailwind基礎
問題26: ダッシュボードレイアウト
複雑なダッシュボード構築を学びましょう！
📝 タスク1: 最外側のdivにflex h-screenを適用
📝 タスク2: asideにw-64 flex-shrink-0 bg-gray-800 text-whiteを適用
📝 タスク3: navにflex flex-col p-4 space-y-2を適用、各aにpx-4 py-2 rounded hover:bg-gray-700を適用
📝 タスク4: mainにflex-1 p-6 bg-gray-100を適用
📝 タスク5: 統計グリッドにgrid grid-cols-3 gap-6を適用、各統計にbg-white p-6 rounded-lg shadowを適用
上級Tailwind基礎
問題27: マガジンレイアウト
高度なグリッドとポジショニングを学びましょう！
📝 タスク1: articleにgrid grid-cols-1 lg:grid-cols-2 gap-8を適用
📝 タスク2: 画像を含むdivにrelativeを適用
📝 タスク3: h1にabsolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black to-transparent text-white text-3xl font-boldを適用
📝 タスク4: imgにw-full h-auto rounded-lgを適用
📝 タスク5: コンテンツ部分にspace-y-4、pにtext-lg font-semibold text-gray-700、divにprose max-w-noneを適用
上級Tailwind基礎
問題28: モーダルダイアログ
モーダルオーバーレイの実装を学びましょう！
📝 タスク1: 最外側のdivにfixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4を適用
📝 タスク2: 次のdivにbg-white rounded-lg max-w-md w-full p-6を適用
📝 タスク3: コンテンツdivにspace-y-4を適用
📝 タスク4: h2にtext-xl font-boldを適用
📝 タスク5: pにtext-gray-600を適用
📝 タスク6: ボタンdivにflex justify-end space-x-2を適用
上級Tailwind基礎
問題29: プログレスバー
アニメーション付きプログレスバーを学びましょう！
📝 タスク1: 各外側divにw-full bg-gray-200 rounded-full h-2 overflowを適用（overflow-hiddenも可）
📝 タスク2: 最初の内側divにh-2 bg-blue-600 transition-all duration-300 ease-outを適用
📝 タスク3: 2番目の内側divにh-2 bg-green-600 transition-all duration-300 ease-outを適用
上級Tailwind基礎
問題30: 総合課題 - ランディングページセクション
実践的なランディングページセクションの構築を学びましょう！
📝 タスク1: sectionにpy-16 bg-gray-50を適用
📝 タスク2: 最初のdivにcontainer mx-auto px-4を適用
📝 タスク3: ヘッダーdivにtext-center mb-12を適用
📝 タスク4: h2にtext-3xl font-bold mb-4を適用
📝 タスク5: pにtext-gray-600 max-w-2xl mx-autoを適用
📝 タスク6: グリッドdivにgrid md:grid-cols-3 gap-8を適用
📝 タスク7: 各カードにbg-white p-6 rounded-lg shadow-lg text-centerを適用
📝 タスク8: アイコンdivにw-16 h-16 bg-[color]-100 rounded-full flex items-center justify-center mx-auto mb-4 text-[color]-600 text-2xlを適用
📝 タスク9: h3にtext-xl font-semibold mb-2を適用
📝 タスク10: pにtext-gray-600を適用