CSS入門

初級

Webページを美しくデザインするスタイルシート言語を学びましょう

全11レッスン

セレクタとプロパティ

基本のセレクタと値の指定

→2

ボックスモデル

margin、padding、border

→3

Flexboxレイアウト

横並び、中央揃え、均等配置

→4

テキスト・フォント

font-family、size、weight、line-height

→5

背景・グラデーション

background、gradient、画像背景

→6

Gridレイアウト

2次元グリッドで複雑なレイアウト

→7

position

relative、absolute、fixed、sticky

→8

アニメーション

transition、@keyframes、transform

→9

疑似クラス・疑似要素

:hover、:focus、::before、::after

→10

レスポンシブデザイン

@media、モバイルファースト

→11

CSS総合演習

プロフィールページをデザインしよう

→

CSSとは？

CSS（Cascading Style Sheets）は、 HTMLで作った構造に対して見た目のスタイルを適用する言語です。色、サイズ、配置、アニメーションなど、ページの視覚的な表現はすべてCSSで制御します。

HTMLが家の骨組みだとすると、CSSは壁紙、ペンキ、家具の配置を決めるインテリアデザインです。同じHTMLでも、CSSを変えるだけでまったく違う見た目にできます。

🎨

デザインの指定

色、フォント、サイズ、間隔を自由にコントロール

🚲

レイアウト

FlexboxやGridで要素を思い通りに配置

📱

レスポンシブ

PCでもスマホでも美しく表示される設計

セレクタとプロパティ

CSSは「どの要素に」（セレクタ）「何を」（プロパティ）「どうする」（値）の3つで成り立ちます。

index.html

プレビュー

ボックスモデル

すべてのHTML要素は「ボックス」として扱われます。margin、border、padding、contentの4層構造です。

index.html

プレビュー

Flexboxレイアウト

Flexboxは要素を横並び・縦並びにしたり、均等配置したりできる強力なレイアウトシステムです。

index.html

プレビュー

確認クイズ

1 / 4

CSSでclass属性を持つ要素を指定するセレクタはどれ？

自由に試してみよう

HTML＋CSSを自由に書いて、デザインを試しましょう。

index.html

プレビュー