CONTENTS
現場で役立つWeb制作力を、ゼロから学習できる。独学の限界を超える、段階別カリキュラム | Webtraining　- Webトレは、 初心者から実務までのWeb学習トレーニング

CSS

  1. HOME
  2. CSS

CSS COURSE

HTMLで作った土台に、
見やすいデザインを加える。

CSSは、HTMLで作ったページに、文字の色や大きさ、余白、並び方、背景などの見た目を加えるための言語です。基本からレイアウト、スマートフォン対応、クラス設計、アニメーションまで段階的に学びます。

CSSが初めてでも大丈夫です。Visual Studio Codeでコードを書き、ブラウザの表示を確認しながら、少しずつ調整していきます。

CSS基礎から始める CSS-CLASS設計を見る CSS応用と実践を見る
TEST SITE CSS基礎テストに挑戦する

BEFORE CSS

まずはHTMLの基本を確認しよう

CSSは、HTMLで作った見出しや文章、画像などに見た目を加えます。どの部分へCSSを設定するのか分かるように、HTML基礎を学んでから進むのがおすすめです。HTML応用は必要に応じて確認できます。

HTML基礎を学ぶ HTML応用を学ぶ

COURSE MAP

基礎、クラス設計、応用の順に進む

初めての方はCSS基礎から始めます。文字や余白、並び方を学んだ後に、クラス名の付け方や、アニメーションなどの応用表現へ進みます。

STEP 01

CSS基礎

文字の色や大きさ、背景、余白、横並びなど、Webページの見た目を整える基本を、実際にコードを書きながら学びます。

  • セレクター
  • Flexbox・Grid
  • レスポンシブ
CSS基礎から始める

STEP 02

CSS-CLASS設計

クラス名の付け方やBEMの考え方を学び、後から見ても役割が分かりやすく、修正しやすいCSSを目指します。

  • クラス命名
  • BEM
  • 修正しやすい設計
CSS-CLASS設計を見る

STEP 03

CSS応用と実践

グラデーション、背景画像、図形表現、アニメーションなどを使い、基本だけでは作れないデザインへ少しずつ挑戦します。

  • 背景表現
  • 図形表現
  • アニメーション
CSS応用と実践を見る

WHAT YOU WILL LEARN

この講座で学べること

CSSの書き方を暗記するだけではなく、実際の表示を見ながら、「どの指定で、どこが変わったのか」を確認する力を身につけます。

01

文字・色・背景を整える

文字の種類や大きさ、色、背景色、背景画像を設定し、内容が読みやすくなるように整えます。

02

余白と大きさを調整する

marginとpaddingの違いを確認し、要素の外側と内側の余白、幅や高さを調整します。

03

要素を並べる

FlexboxとGridを使い、横並び、中央揃え、複数列のカードなど、よく使う配置を作ります。

04

スマートフォン表示へ対応する

メディアクエリを使い、パソコン、タブレット、スマートフォンの画面幅に合わせて表示を調整します。

05

分かりやすいクラス名を付ける

その要素の役割が伝わるクラス名を考え、後から修正するときにも見つけやすいCSSを作ります。

06

動きのある表現を作る

transitionとanimationを使い、ボタンや画像に、操作を邪魔しない控えめな動きを加えます。

LEARNING FLOW

学習の流れ

HTMLの構造を確認し、CSSを書いてブラウザで表示を確かめます。思いどおりにならない場合は指定を見直しながら、基礎から応用へ進みます。

  1. 01

    HTMLの構造を確認する

    見出し、文章、画像など、見た目を変えたいHTML要素と、そのクラス名を確認します。

  2. 02

    CSSを書いて表示を確かめる

    セレクター、文字、色、余白、Flexboxなどを設定し、ブラウザでどのように変わったか確認します。

  3. 03

    うまく反映されない原因を探す

    スペル、セレクター、波かっこ、セミコロン、読み込み順などを確認し、少しずつ修正します。

  4. 04

    設計と応用表現へ進む

    基礎に慣れたら、クラス名の付け方、背景表現、アニメーション、スマートフォン対応へ進みます。

BENEFITS

CSSを学ぶメリット

HTMLで作った内容とCSSで作る見た目を分けて考えられるようになると、デザインの変更や修正がしやすくなります。

思い描いた見た目をコードで作れる

文字、色、余白、背景、配置を組み合わせ、Webページのデザインをブラウザ上に作れるようになります。

さまざまな画面幅へ対応できる

パソコン、タブレット、スマートフォンに合わせて、カードの並びや文字サイズを調整できます。

表示崩れの原因を探しやすくなる

余白、幅、親要素と子要素の関係を理解することで、思いどおりに表示されない原因を確認しやすくなります。

後から修正しやすいCSSを書ける

クラス名や共通部分を整理し、変更したい場所を見つけやすいCSSを作れるようになります。

RECOMMENDED FOR

こんな方におすすめ

  • HTMLを学び、次にページの見た目を整えたい方
  • 文字の色や余白の付け方から学びたい方
  • 要素を横並びや中央揃えにしたい方
  • marginとpaddingの違いが分かりにくい方
  • FlexboxやGridを基礎から理解したい方
  • スマートフォン表示に対応したい方
  • CSSを設定しても思いどおりに表示されず困っている方
  • クラス名の付け方やCSSの整理方法を学びたい方
  • アニメーションや応用表現へ進みたい方

NEXT COURSES

CSSで見た目やレイアウトを作れるようになったら、JavaScriptで動きを加えたり、Bootstrapで効率よく画面を組み立てたりできます。制作前の設計を学びたい方はFigmaも確認できます。

Figma

コードを書く前に、文字や画像、余白、ボタンの位置を画面の設計図として整理します。

講座を見る

HTML

CSSを設定する土台となる、見出し、文章、画像などのページ構造を学びます。

講座を見る

JavaScript

CSSで整えた画面に、クリックや入力に反応する動きや表示の切り替えを加えます。

講座を見る

Bootstrapの基本的な使い方

あらかじめ用意されたクラスを使い、整った画面を効率よく作る方法を学びます。

講座を見る