セレクタ、色と文字の装飾、ボックスモデル、hoverやWebフォントによる仕上げまで、CSSの基礎を、毎レッスン実際にコードを書いて自分のページを装飾しながら学べる無料コースです。HTML入門を修了した方や、HTMLの基本タグを理解している方を対象としています。約 5 時間 (1 日 30 分 × 10 日) で 19 レッスンを修了でき、修了後は影やアニメーション付きのプロフィールカードが完成します。
レッスン
19件
所要時間
約6時間
ランク
初級
学習環境
ブラウザ完結
2. 色と文字が付く
style.css（装飾済みプロフィールカード）
セレクタ、色と文字の装飾、ボックスモデル、hoverやWebフォントによる仕上げまで、CSSの基礎を、毎レッスン実際にコードを書いて自分のページを装飾しながら学べる無料コースです。HTML入門を修了した方や、HTMLの基本タグを理解している方を対象としています。約 5 時間 (1 日 30 分 × 10 日) で 19 レッスンを修了でき、修了後は影やアニメーション付きのプロフィールカードが完成します。
外部CSSを読み込んで要素を装飾できる
クラスとIDで狙った要素だけスタイルを当てられる
ボックスモデルで余白と枠線を組み立てられる
hover・transition・影で仕上げられる
Webフォントでサイト全体の印象を変えられる
ブラウザ完結（インストール不要）
ゆめさくコード編集部
プログラミング学習をもっと身近に。初心者から実務レベルまで、わかりやすいコンテンツをお届けします。
ゆめさくエンジニア / 現役ソフトウェアエンジニア。Ruby on Rails・Nuxt.js・Next.js・CakePHPなどの実務の開発をベースに、学習コンテンツを作成しています。
レッスンの最初に、図と短い言葉で学ぶ内容をつかみます。
見た目の決まりは HTML の中ではなく、style.css という別のファイルに書きます。2つのファイルをつなぐのが、head に置く link の1行です。
女性向けエンジニアスクール
rel="stylesheet"読み込むファイルの種類href="style.css"ファイルの置き場所分けておくと、あとから配色だけ変えたいときに HTML を1文字も触らずに済みます。
1 / 5
前回書いたこのかたまりをルールと呼びます。ルールは、当てる相手のセレクタ、変える項目のプロパティ、どう変えるかの値の3つに分かれています。
bodyどれに当てるかbackground-color何を変えるか#f7f5f0どう変えるかプロパティと値の区切りは半角のコロン、1行の終わりはセミコロンです。この2つの記号が部品の境目になります。
1 / 4
CSS入門 - 色は6桁の数字で渡す
同じ青を書くのに、色名、16進数、rgb の3つの書き方があります。実際に使うのはほとんどが16進数ですが、読めるようにしておくと調べものが早くなります。
色名は覚えやすい代わりに数が限られ、細かい調整ができません。だから配色は16進数で決めます。
| 書き方 | 例 |
|---|---|
| 色名 | blue や white など、決められた名前 |
| 16進数6桁 | #0071e3 |
| 16進数3桁 | #fff は #ffffff の省略形 |
| rgb | rgb(0, 113, 227) |
1 / 4
font-size は文字の大きさを決めるプロパティで、px という画面の点の数で指定します。ブラウザにも初期の大きさはありますが、その差は自分で決めなおせます。
名前の h1
セクション見出しの h2
作品名の h3
本文の p
棒の長さは指定する px の値そのままです。目盛りは加工していません。
大きさの差は、読む人にとっての順位になります。どこから読めばよいかを、文字の大きさだけで伝えられます。
1 / 4
動かしながら、仕組みや変化を目で確かめられます。
陽葵「ハレノヒ珈琲、開店を手伝ってくれる?」
1問目は無料で解けます。
教材を見ないで、依頼と完成条件だけを読んで書いてみてください。
HTML/CSS道場 ハレノヒ珈琲を開店させる10問
先にこちらを通しておくと、つまずきにくくなります
同時に進めると、理解が早くなる組み合わせです
