CSS基礎講座 - 初学者向けスタイリング学習コース

初学者向けの CSS 基礎講座です。基本構文とよく使うプロパティを学び、Webページの見た目を整えられるところまで進めます。

無料で始める

この講座について

プログラミング未経験の方でも理解しやすいよう、CSS の基礎から段階的に学べます。

ゴール: CSSの基礎知識を習得。セレクタと基本プロパティを理解し、Webページの見た目を整えられるようになります
伸ばす力: CSS を追加・修正できる

できるようになること

CSS の基本構文とセレクタを理解し、HTML にスタイルを当てられる
文字、色、背景、余白など基本の見た目を整えられる
よく使うレイアウトの考え方を理解し、配置ができる
メディアクエリの基本を理解し、画面幅に合わせた調整ができる

よくある質問（FAQ）

基本的な HTML の知識があると理解しやすくなります。まだの場合は、HTML基礎講座を先に学習するのがおすすめです。

このコースは 12 レッスン、クイズ 12 回（計 73 問）、練習問題 29 問です。全体の学習時間はおおよそ 15 時間です。1 日 1 レッスン＋その日のクイズ・練習なら、およそ 2〜3 週間で一通り終えられます。

はい。この CSS 基礎講座は無料で利用できます。登録料や月額料金はかかりません。

レッスン一覧

1. CSSのできること＆基本の書き方

CSSとは何か、HTMLとの関係、外部・内部・インラインスタイルの違いなどを解説します。

2. 基本構文＆コメントの書き方

CSSの基本構文（セレクタ・プロパティ・値）とコメントの書き方について学びます。

3. フォントとサイズ

フォントの種類やサイズの指定方法について学び、読みやすく美しい文字表現をマスターします。

font-family, font-size

4. 文字の色と行間

文字の色、行間、文字間隔、配置を調整して読みやすいページを作ります。

color, line-height, letter-spacing, text-align

5. 背景・ボーダーの基本

背景色、背景画像、ボーダーの設定方法を学びます

background, background-color, background-image, border, border-radius

6. 装飾効果とグラデーション

ボックスシャドウ、グラデーションの装飾効果を学びます

box-shadow, text-shadow, linear-gradient, radial-gradient

7. 擬似クラスと擬似要素

擬似クラスと擬似要素を使って、マウスをのせたときの効果や装飾的な要素を作る方法を学びます。

:hover, :active, :focus, ::before, ::after, ::first-letter, transition, transform

8. ボックスモデル

CSSのボックスモデル（padding、margin、border、box-sizing）について学び、要素のスペース調整をマスターします。

margin, padding, border, width, height, box-sizing

9. displayプロパティ

displayプロパティについて学び、レイアウトの基礎を理解します。

display: block, display: inline, display: inline-block, display: none

10. Flexbox

Flexboxを使った柔軟なレイアウト作成を学びます

display: flex, justify-content, align-items, gap, flex-wrap

11. positionプロパティ

positionプロパティの基本を学び、Webページのレイアウトの幅を広げましょう

position, top, left, right, bottom, z-index

12. レスポンシブデザイン

メディアクエリを使ったレスポンシブデザインを学びます

クイズ一覧

📝 CSSクイズ一覧を見る

CSSのできること＆基本の書き方

CSSの基本構文と記述方法について

CSS 基本構文＆コメントの書き方

CSSの基本構文・セレクタ・コメントについて

CSS フォントとサイズ

CSSのフォントとサイズについて

CSS 文字の色と行間

CSSの文字の色と行間について

CSS 背景とボーダー

CSSの背景とボーダーについて

CSS 装飾効果とグラデーション

CSSの装飾効果とグラデーションについて

CSS 疑似クラスと擬似要素

CSSの疑似クラスと擬似要素について

CSS ボックスモデル

CSSのボックスモデルについて

CSS レイアウト

CSSのレイアウトについて

CSS Flexbox

CSSのFlexboxについて

CSS position

CSSのpositionについて

CSS レスポンシブデザイン

CSSのメディアクエリについて

練習問題一覧

📝 CSS練習問題一覧を見る

CSS練習問題基本構文

基本的なCSSスタイリングを適用する練習問題。ドラッグ&ドロップでCSSを正しい位置に配置してください。

CSS基礎講座 - 初学者向けスタイリング学習コース

この講座について

できるようになること

よくある質問（FAQ）

CSSを学ぶのにHTMLの知識は必要ですか？

どのくらいの期間で習得できますか？

このコースは無料ですか？

レッスン一覧

1. CSSのできること＆基本の書き方

2. 基本構文＆コメントの書き方

3. フォントとサイズ

4. 文字の色と行間

5. 背景・ボーダーの基本

6. 装飾効果とグラデーション

7. 擬似クラスと擬似要素

8. ボックスモデル

9. displayプロパティ

10. Flexbox

11. positionプロパティ

12. レスポンシブデザイン

関連：CSSポートフォリオ作成編

クイズ一覧

CSSのできること＆基本の書き方

CSS 基本構文＆コメントの書き方

CSS フォントとサイズ

CSS 文字の色と行間

CSS 背景とボーダー

CSS 装飾効果とグラデーション

CSS 疑似クラスと擬似要素

CSS ボックスモデル

CSS レイアウト

CSS Flexbox

CSS position

CSS レスポンシブデザイン

練習問題一覧

CSS練習問題 基本構文

CSS練習問題 クラスセレクタ

CSS練習問題 IDセレクタ

CSS練習問題 フォントファミリー

CSS練習問題 フォントサイズ

CSS練習問題 行間

CSS練習問題 文字間

CSS練習問題 文字の配置

CSS練習問題 背景色

CSS練習問題 ボーダー

CSS練習問題 ボックスシャドウ

CSS練習問題 テキストシャドウ

CSS練習問題 線形グラデーション

CSS練習問題 擬似クラス

CSS練習問題 擬似要素

CSS練習問題 transition

CSS練習問題 transform

CSS練習問題 余白

CSS練習問題 ボーダー

CSS練習問題 displayプロパティ

CSS練習問題 要素を非表示にする

CSS練習問題 横並び

CSS練習問題 Flexboxで中央揃え

CSS練習問題 Flexboxで縦方向の中央揃え

CSS練習問題 Flexboxで折り返し

CSS練習問題 positionで位置調整

CSS練習問題 positionで親要素を基準に配置

CSS練習問題 レスポンシブデザイン（メディアクエリ）

CSS練習問題 画像のレスポンシブ対応

コース概要

インストラクター

学習に役立つリソース

CSS練習問題

CSSクイズ

CSSリファレンス

コードエディタ

実践サンプル集

CSS練習問題基本構文

CSS練習問題クラスセレクタ

CSS練習問題フォントファミリー

CSS練習問題フォントサイズ

CSS練習問題行間

CSS練習問題文字間

CSS練習問題文字の配置

CSS練習問題背景色

CSS練習問題ボーダー

CSS練習問題ボックスシャドウ

CSS練習問題テキストシャドウ

CSS練習問題線形グラデーション

CSS練習問題擬似クラス

CSS練習問題擬似要素

CSS練習問題余白

CSS練習問題ボーダー

CSS練習問題要素を非表示にする

CSS練習問題横並び

CSS練習問題レスポンシブデザイン（メディアクエリ）

CSS練習問題画像のレスポンシブ対応