このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#01 Tailwind CSSを使ってみよう (02:12) 無料公開中
- 概要
- 必要となる知識
-
#02 学習環境を整えよう (02:38) 無料公開中
- プロジェクトフォルダの設定
- index.htmlの作成
- Tailwind CSSの読み込み
- デフォルトスタイルに関する注意点
-
#03 便利な拡張機能を導入していこう (02:48) 無料公開中
- 拡張機能の導入
- 補完機能の確認
-
#04 テキスト周りのスタイルを設定しよう (02:41)
- text-right
- text-left
- text-center
- text-4xl
- font-bold
-
#05 色を設定してみよう (02:15)
- 色見本の確認
- text-red-500
- opactiy-50
-
#06 要素のサイズを設定してみよう (02:58)
- bg-red-400
- bg-sky-400
- bg-orange-400
- bg-green-400
- w-40
- w-[160px]
- w-3/4
- w-[75%]
- h-40
-
#07 余白を設定してみよう (02:48)
- marginとpaddingの指定方法
- m-4
- mb-4
- mx-auto
- pl-4
- box-sizingに関する注意点
-
#08 境界線を設定してみよう (02:24)
- border-solid
- border-gray-200
- border-8
- border-b-8
- border-dashed
-
#09 ボタンのスタイリングをしてみよう (02:54)
- デフォルトスタイルに関する注意点
- bg-orange-400
- text-white
- py-2
- px-4
- rounded-full
- shadow-black
- shadow-md
- shadow-black/30
-
#10 インタラクティブにスタイルを変えてみよう (02:57)
- hover:opacity-80
- transition
- duration-500
- active:translate-y-1
-
#11 フレックスボックスの設定をしてみよう (02:50)
- 要素の配置
- flex
- gap-4
- w-40
- flex-1
-
#12 ビューポートの幅に応じてスタイルを設定しよう (02:04)
- sm:bg-red-300
- lg:bg-red-400
- 動作確認
-
#13 ビューポートの幅に応じてレイアウトを変えよう (02:28)
- sm:
- hidden
- block
-
#14 公式サイトを確認しておこう (01:30)
- これまでの振り返り
- 公式サイトの紹介
