CSSの基本を学ぶ!WEBデザインの基礎ができるようになる!

HTMLでWEBの骨格が作れるようになったら、次はCSSで骨格にデザインをほどこしていきましょう!

本当の基礎から学び、最後は練習問題もそろえました。

ぜひゆっくり学んでみてください。

全17講座の流れ

はじめに

まずはCSSって何?ということを学びましょう!

実際にWEBページで見ながら、イメージを掴んでいきます。

CSSとは?HTMLをおしゃれにカスタマイズしよう

2025年2月13日

基礎編

次に基礎編を通して、CSSの書き方やデザインの指定方法を学んでいきましょう。

セレクタ・プロパティについて(CSSの基本的な書き方)

CSSの仕組みを理解しよう!セレクタ・プロパティ・値の基本

2025年2月13日

文字の装飾について(font-size、font-family、font-weight)

CSSで文字を装飾!フォントサイズ・フォントファミリー・太さを学ぶ

2025年2月13日

行間と文字揃えについて(line-height、text-align)

CSSで読みやすい文章に!行間(line-height)と文字揃え(text-align)の基本

2025年2月13日

WEBフォントについて

Webフォントの使い方をマスター!Google Fontsで実践的に学ぶ

2025年2月13日

色の指定について(color、background-color)

CSSで色を指定しよう!カラーコード・color・background-colorの基本

2025年2月14日

背景の指定について(background-image、repeat、size、position)

CSSで背景を自由にカスタマイズ!background-image・repeat・size・positionの基本

2025年2月15日

サイズの指定について(width・height・単位)

CSSのサイズ指定を完全マスター!width・height・単位を実践で学ぶ

2025年2月15日

余白の指定について(margin・padding・border)

CSSで枠線を自由にデザイン!border・width・style・colorの基本

2025年2月16日

リストデザインについて(list-style)

リストの見た目を自由にカスタマイズ!list-styleの基本を徹底解説

2025年2月16日

クラスとIDについて

CSSのクラスとIDをマスター!指定方法と使い分けを徹底解説

2025年2月16日

Flexboxについて(justify-content・align-items)

リストの見た目を自由にカスタマイズ!list-styleの基本を徹底解説

2025年2月16日

CSSグリッドについて

CSSグリッド完全ガイド!自由自在なレイアウトを作る方法

2025年2月16日

デフォルトCSSについて

デフォルトCSSとは?ブラウザごとの違いとリセットCSSの活用術

2025年2月16日

実践編

最後に実践編でこれまで習ったことを全て使って、3つのプログラムを組んでいきます。

実践編①色・文字・背景・余白・枠線

CSS実践編① 色・文字・背景・余白・枠線をテスト形式で復習

2025年2月16日

実践編②FlexboxとCSS Grid

CSS実践編② FlexboxとCSS Gridをテスト形式で復習

2025年2月16日

実践編③クラス・ID・プロパティの組み合わせ

CSS実践編③ クラス・ID・プロパティの組み合わせをテスト形式で復習

2025年2月16日

CSSの基本は完璧!

実践編までできた人は、CSSでWEBページのデザインを指定できるようになっています。

ここまでよく頑張りました!

より細かいCSSのルールなどは、基本的なことを知っていればどんどん吸収していけます。