ホーム

学習コースをさがす

Tailwind CSS初級講座

無料

獲得できるスキル Tailwind CSS初級

学習時間目安 1時間2分

テスト時間約15分

対象者

HTML/CSS初級講座の学習を完了している方

概要

用意されたクラスを組み合わせるだけで画面を組み立てられるTailwind CSSの入門講座です。テキスト装飾から始め、FlexboxとGrid、レスポンシブ対応を経て、実際のページレイアウトを作れるところまで進みます。

提供株式会社シンシア

レクチャー

#1 Tailwind CSS講座の説明

未完了

Tailwind CSSとは何か
従来のCSSとの違い
この講座の進め方

#2 Tailwind CSSを導入しよう

未完了

Tailwind CSSのインストール
設定ファイルの準備
動作確認

#3 テキストのスタイリング

未完了

文字サイズ（text-sm / text-lg など）
文字色（text-○○-500）
太さ・行揃え

#4 要素の幅と高さの設定

未完了

幅（w-）と高さ（h-）の指定
数値指定と割合指定
w-full / h-screen

#5 マージンとパディングでレイアウトを調整する

未完了

マージン（m-）とパディング（p-）の違い
方向指定（mt- / mb- / px- / py-）
余白でレイアウトを整える

#6 ボタンのスタイリング ― 基本と応用

未完了

背景色と文字色
角丸とパディング
hoverなどの状態変化

#7 Flexboxによるレイアウト設計

未完了

flex の基本
主軸方向の配置（justify-）
交差軸方向の配置（items-）
折り返しと間隔

#8 Gridによるレイアウト設計

未完了

grid の基本
列数の指定（grid-cols-）
Flexboxとの使い分け

#9 レスポンシブデザインの実践

未完了

レスポンシブデザインとは
ブレークポイント（sm / md / lg）
モバイルファーストの考え方

#10 基本的なレイアウトを作ろう① サイドバーの作成

未完了

全体構成を決める
サイドバーを配置する
幅と背景色を整える

#11 基本的なレイアウトを作ろう② メインコンテンツの作成

未完了

メイン領域を作る
カードを並べる
レスポンシブに対応させる

学習開始日

学習完了日

未獲得

コース完了数

0 / 11

会員登録して受講

このコースで獲得できるスキルに関連した求人

気になる

Next.js×TypeScriptでフルスタック開発を極めるエンジニア募集

株式会社シンシア

リモートワークOK 完全週休2日制年間休日120日以上土日祝休み原則定時退社残業20時間未満フレックス勤務産休・育休取得実績あり残業少なめ副業OK 未経験歓迎転勤なし（勤務地限定）学歴不問第二新卒歓迎学生歓迎入社後の職種変更なし初日からコーディング服装自由駅チカオフィス内禁煙・分煙正社員登用あり自社プロダクト受託企業アーロンチェア完備昇降デスク

年収

340万円 ~ 600万円

勤務地東京都港区六本木7-18-13シークエル六本木4F

必須スキル

Web初級

UNIX初級

Next.js初級

気になる