Course curriculum

    1. 本講座で学ぶこと

    2. 本講座を学習する流れ

    1. Node.jsをインストールしよう

    2. VSCodeをインストールしよう

    3. 開発用プロジェクトを作成してみよう

    4. Tailwind CSSドキュメントを見て雛形を作成してみよう

    5. ビルドを簡単に行えるように変更を加えよう

    6. HTMLファイルを作成してTailwind CSSが適用されているか確認しよう

    7. ビルドとは何か？監視とは何かを理解してみよう

    8. 開発効率を上げるTailwind CSS専用プラグインをインストールしよう

    9. 【追加】プラグインのPostCSSの不具合について修正

    1. Tailwind CSSって何？

    2. Tailwind CSSの基礎を学んでみよう

    3. 文字の大きさや色を変えてみよう

    4. paddingとmarginを実装してみよう

    5. ブレイクポイントを理解してレスポンシブ対応を学ぼう

    6. 実際にTailwindcssでレスポンシブデザインを実装してみよう

    7. 【比較】簡単なボタンを普段のCSSで記述してみよう

    8. 【比較】簡単なボタンをTailwind CSSで記述してみよう

    9. 繰り返し使うスタイルを抽出化してみよう

    10. カスタマイズデザインを実装してみよう

    1. 完成品のデモの確認

    2. ウェブサイトで使用するフォントの設定してみよう

    3. サイトで使用する色をカスタマイズしてみよう

    4. Tailwind CSSでナビゲーションバーを作ってみよう

    5. containerの意味を理解してブレークポイントも理解しよう

    6. Flexの意味を理解してナビゲーションバーを作ろう

    7. space-x-○○を使って要素間の間隔を空けてみよう

    8. お問い合わせのボタンを作成してみよう

    9. ハンバーガーメニューを追加してみよう

    1. ヒーローセクションの大枠から作成してみよう

    2. タイトルとボタンを挿入してみよう

    3. メインとなる宣材画像を挿入してみよう

    4. レスポンシブレイアウトの修正をしてみよう

    1. ポートフォリオセクションを作成してみよう

    2. グリッドレイアウトを使って画像をグリッド表示させよう

About this course

  • 12,000円
  • 46回のレッスン
  • 3時間の動画コンテンツ

Discover your potential, starting today