ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2025/08/28
NEW
【週刊ドットインストール】 Figma入門を制作中、256timesの新クラスを企画中
PREMIUM
Tailwind CSS入門
ユーティリティ的に使える小さなスタイルを組み合わせていくCSSフレームワーク、Tailwind CSSについて見ていきます。
0%
このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
CSS入門 基本スタイリング編
(全27回)
PREMIUM
PREMIUM
0%
CSS入門 応用スタイリング編
(全27回)
PREMIUM
PREMIUM
0%
CSS入門 セレクター編
(全21回)
PREMIUM
PREMIUM
0%
CSS入門 フレックスボックス編
(全22回)
PREMIUM
PREMIUM
0%
CSS入門 メディアクエリー編
(全14回)
PREMIUM
PREMIUM
0%
CSS入門 アニメーション編
(全19回)
PREMIUM
PREMIUM
0%
動画レッスン一覧
(14)
質問と回答
(2)
#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)
これまでの振り返り
公式サイトの紹介
未完了
#03 便利な拡張機能を導入していこう
拡張機能を入れて、マウスホバーしても適用スタイルが表示されません
2024年4月22日
#08 境界線を設定してみよう
複数の border を一つの要素につけることは可能でしょうか?
2024年2月9日
リリース情報(note)
『Tailwind CSS入門』をリリースしました
詳細情報
最終更新日
2023年11月25日
バージョン情報
Tailwind CSS 3.3.5 / Chrome 119.0 / Visual Studio Code 1.84