女性向けエンジニアスクール
CSS入門の導入スライド
HTML と CSS を別ファイルにする
見た目の決まりは HTML の中ではなく、style.css という別のファイルに書きます。2つのファイルをつなぐのが、head に置く link の1行です。
rel="stylesheet"読み込むファイルの種類href="style.css"ファイルの置き場所分けておくと、あとから配色だけ変えたいときに HTML を1文字も触らずに済みます。
1 / 5
CSS入門 - ファイルを2つに分けてつなぐ
CSS を当てると並びと大きさが変わる
CSS を外して、同じ中身がどう積み上がるか見てください。
- CSS を外しても中身は1つも減らない。縦に積まれるだけ
- HTML が何を書くかを持ち、CSS がどう見せるかを持つ
- つながった証拠は画面の変化。色が変われば link の1行が届いている
2 / 5
考えてみよう外しても進めます
link の href を stylesheet.css と書き間違えました。画面はどうなりますか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 5
中身は同じで、見え方だけが違う
左は link の1行が届いていないとき、右は届いているときです。書いた HTML は1文字も違いません。
HTML だけの場合
山田 太郎
Web デザイナー
好きなもの コーヒー
文字は全部左端に付き、上から順に積まれる
HTML と CSS を組み合わせた場合
山田 太郎
Web デザイナー
好きなもの コーヒー
同じ3行に、色と余白と並べ方が付いた
見出しが青くならない、余白が付かない、という直し方の前に、まず左の見た目になっていないかを見ます。左の見た目のままなら、原因は CSS の中身ではなくつながりのほうです。
4 / 5
CSS入門 - ファイルを2つに分けてつなぐ
当たらないときに見る4か所
書いた CSS が効かないときは、CSS の書き方より先につながりを疑います。順番を逆にすると遠回りになります。
4つとも当てはまらないときだけ、CSS の書き方そのものを見にいきます。
| 見る場所 | 何を確かめるか |
|---|---|
| link の行 | head の中に書けているか |
| href の綴り | style.css とファイル名が1字ずつ合っているか |
| ファイルの置き場所 | index.html と同じ階層にあるか |
| 保存したか | style.css のほうを保存し忘れていないか |
5 / 5
1つの決まりは3つの部品でできている
前回書いたこのかたまりをルールと呼びます。ルールは、当てる相手のセレクタ、変える項目のプロパティ、どう変えるかの値の3つに分かれています。
bodyどれに当てるかbackground-color何を変えるか#f7f5f0どう変えるかプロパティと値の区切りは半角のコロン、1行の終わりはセミコロンです。この2つの記号が部品の境目になります。
1 / 4
まとめ書きとカンマ区切り
同じ相手に2つ変えたいときは、波かっこの中に行を足します。別々の相手に同じことをしたいときは、セレクタをカンマで並べます。
h1, h2, h3相手を並べるcolor: #333333行を足す同じセレクタのルールを2か所に分けて書かないようにします。あとで読むとき、どちらが効いているのか分からなくなります。
2 / 4
考えてみよう外しても進めます
波かっこの中に2行書いたうち、1行目の終わりのセミコロンを落としました。どうなりますか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 4
ここでつまずく
セレクタもプロパティも記号の並びなので、間違えるところはいつも同じです。しかもエラー画面は出ません。
コロンとセミコロンを取りちがえる
その行が読み飛ばされる
波かっこを閉じ忘れる
そこから下のルールがまとめて効かない
color と background-color を取りちがえる
文字ではなく背景が変わる
数値に単位を付け忘れる
font-size 16 は無視される
画面が変わらないときは、書いた文字そのものを1字ずつ見にいきます。読み方を変えるより早く見つかります。
4 / 4
CSS入門 - 色は6桁の数字で渡す
色の書き方は3通り
同じ青を書くのに、色名、16進数、rgb の3つの書き方があります。実際に使うのはほとんどが16進数ですが、読めるようにしておくと調べものが早くなります。
色名は覚えやすい代わりに数が限られ、細かい調整ができません。だから配色は16進数で決めます。
| 書き方 | 例 |
|---|---|
| 色名 | blue や white など、決められた名前 |
| 16進数6桁 | #0071e3 |
| 16進数3桁 | #fff は #ffffff の省略形 |
| rgb | rgb(0, 113, 227) |
1 / 4
6桁は赤・緑・青の2桁ずつ
先頭から2桁ずつが赤、緑、青の量です。それぞれ 00 から ff までの256段階で、00 が最小、ff が最大になります。
#ff0000先頭の2桁が赤#3333333つが同じ量ならグレー3つを同じ量にすると必ずグレーになります。#333333 がまっ黒より目にやさしいのは、少しだけ3色が混ざっているからです。
2 / 4
考えてみよう外しても進めます
#fff と #ffffff は同じ色ですか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 4
CSS入門 - 色は6桁の数字で渡す
背景と文字の明るさ差
色は好みだけで決めません。背景と文字の明るさが近いと読めない人が出ます。今回のページは4色にしぼって組み立てます。
色数をしぼるほどページはまとまって見えます。文字の色は body に1か所書けば、下の要素へ受けつがれます。
| 使う場所 | 決めた色 |
|---|---|
| ページの背景 | #f7f5f0 のあたたかみのある白 |
| 本文の文字 | #333333 の濃いグレー |
| 見出し | #1f2b46 の濃紺 |
| ボタンなどのアクセント | #0071e3 のテーマカラー |
4 / 4
大きさの差が読む順番をつくる
font-size は文字の大きさを決めるプロパティで、px という画面の点の数で指定します。ブラウザにも初期の大きさはありますが、その差は自分で決めなおせます。
名前の h1
セクション見出しの h2
作品名の h3
本文の p
棒の長さは指定する px の値そのままです。目盛りは加工していません。
大きさの差は、読む人にとっての順位になります。どこから読めばよいかを、文字の大きさだけで伝えられます。
1 / 4
line-height 1.8 が何を意味するか
line-height は行と行のあいだの高さです。単位を付けずに 1.8 と書くと、文字の大きさの1.8倍という意味になります。増えたぶんは行の上と下へ半分ずつ付きます。
line-height: 1.816px の 1.8 倍li1行が短いので少し広め日本語は文字がぎっしり詰まって見えるので、1.7 から 1.9 くらいをとると、ぐっと読みやすくなります。
2 / 4
考えてみよう外しても進めます
p の line-height を 1.5 から 1.9 に広げました。1行目の文字は上下どちらへ動きますか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 4
CSS入門 - 行間は行の上下に半分ずつ付く
読みやすさの目安
数値に正解はありませんが、出発点は決まっています。ここから自分の目で1段ずつ動かして決めます。
同じセレクタのルールは前の回にもう書いてあります。新しくつくらず、そのかたまりの中に行を足していきます。
| 決めるもの | 目安 |
|---|---|
| 本文の font-size | 16px。これより小さいと読み疲れる |
| 本文の line-height | 1.7 から 1.9 |
| 短いリストの line-height | 本文より少し広めの 1.9 |
| 見出しの font-weight | bold か 700。ふつうの太さは normal か 400 |
4 / 4
CSS入門 - 同じ名前を何回使えるか
class と id で当たる相手が変わる
セレクタを切り替えて、5行のうち何行に当たるか数えてください。
- タグ名の p は5行すべてに当たる。1つだけ変えることができない
- ドットの .note は名前を付けた2行だけ。同じ名前は何度でも使える
- シャープの #lead は1行だけ。id はページに1つしか付けない
1 / 4
ドットとシャープの書き分け
HTML の側で要素に名前を付け、CSS の側でその名前を呼びます。class はドット、id はシャープを頭に付けて呼びます。
class="tagline"HTML で名前を付ける.taglineCSS はドットで呼ぶ名前は自分で決めます。ページの中で意味が通る言葉なら何でも構いません。
2 / 4
考えてみよう外しても進めます
同じ id の名前を2つの要素に書いてしまいました。どうなりますか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 4
class と id の使い分け
書き方はほとんど同じで、違うのは付けられる数と、本来の役目です。ふだんの装飾は class を使い、id はここぞの1か所にとっておきます。
ふだんの装飾は class
同じ名前を何度でも付けられる。 CSS からはドットで呼ぶ。 ふだんの装飾はこちら。 6つの見出しをまとめて変えるような使い方をする。
ここぞの1か所は id
ページに1つだけ。 CSS からはシャープで呼ぶ。 リンクの飛び先など、ここぞの1か所に使う。 お問い合わせの区画を指すような使い方をする。
名前は見た目ではなく役わりから決めます。blue-text ではなく highlight、big-title ではなく section-title です。
4 / 4
考えてみよう外しても進めます
p にも .profile-text にも line-height を書きました。段落に効くのはどちらですか。
選ぶと、この枚の中で答えと理由を確かめられます。
1 / 4
CSS入門 - 効かないスタイルは負けている
詳細度の勝ち負け
競わせる相手を切り替えて、どちらが勝つか見てください。
- 強い順に id セレクタ、class セレクタ、要素セレクタ
- 負けたほうは消えたのではない。読まれたうえで上書きされている
- 強さが同じときだけ、あとに書いたほうが勝つ
2 / 4
CSS入門 - 効かないスタイルは負けている
点数の数え方
詳細度は3つの段で数えます。左の段が多いほうが勝ち、同じなら次の段を見ます。下の段をいくら積んでも、上の段には届きません。
class を10個並べても、id セレクタ1つには勝てません。段が違うので繰り上がらないからです。
| セレクタ | 点数 |
|---|---|
| p | 0-0-1 |
| .section-title | 0-1-0 |
| p.section-title | 0-1-1 |
| #contact | 1-0-0 |
| #contact .section-title | 1-1-0 |
3 / 4
!important に逃げないための手順
効かないときに強い書き方を足すと、勝つためだけのセレクタが増えていきます。先に、いま何が当たっているのかを確かめます。
全部あげる
その要素に当たっているルールを全部あげる
点数を数える
勝っているルールがどれか、点数を数える
組み直す
狙った側の点数が上になるようセレクタを組み直す
親を直す
継承で来ている色や文字なら、親のほうを直す
継承は勝ち負けの外にあります。直接あたるルールが1つでもあれば、親から来た値ではなくそちらが使われます。
4 / 4
CSS入門 - 検証ツールで負けを見つける
検証ツールで見る3か所
ブラウザには、表示中のページの中身をのぞく道具がついています。見たい場所を右クリックして検証を選ぶと開きます。
数値をその場で書きかえると画面がすぐ変わります。1px ずつ動かしながら決められるので、保存して読み込み直す手間がいりません。
| 見る場所 | そこで分かること |
|---|---|
| Elements | いま選んでいる要素の HTML |
| Styles | その要素に当たっているルールが強い順に並ぶ |
| 取り消し線の付いた行 | 書いたのに採用されなかったスタイル |
| Computed | 最後に採用された値 |
1 / 4
CSS入門 - 検証ツールで負けを見つける
直したのに変わらないときのキャッシュ
手順を送って、画面に出ているのがどちらのファイルなのか見てください。
- ブラウザは一度取ったファイルを手元に置いて、次からそれを使う
- 直したのは新しいほうで、画面に出ているのは手元に残った古いほう
- 読み込み直しても変わらないときは、手元のぶんを無視して取り直す
2 / 4
考えてみよう外しても進めます
Styles の欄で、書いた覚えのある1行に取り消し線が付いていました。何が起きていますか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 4
試した値は必ずコードへ戻す
検証ツールでの変更は画面の上だけのもので、ファイルには残りません。読み込み直すと消えます。値を決める場所と、決めた値を残す場所を分けて使います。
letter-spacing: 2px検証ツールで決めた値font-size: 15px本文より少し小さく書き戻すところまでが1往復です。忘れると、次に開いたときには元の見た目に戻っています。
4 / 4
CSS入門 - すべての要素は4層の箱
4つの層を1つずつ厚くする
padding を動かしてから、背景の表示を切り替えてください。
- 内側から content、padding、border、margin の順に重なっている
- padding を増やすと外形は大きくなるが、中身の文字はその場に残る
- 背景色は border の下まで塗られる。届かずに残った地の色が margin
1 / 4
CSS入門 - すべての要素は4層の箱
4つの層の呼び方
見出しも段落も画像も、画面の上ではすべて四角い箱として置かれます。この箱は4つの層が入れ子になってできています。
この4層がつかめると、思った位置に来ないという困りごとの大半は説明がつくようになります。
| 層の名前 | どこのことか |
|---|---|
| content | 文字や画像そのものが入る、一番内側 |
| padding | content と枠線のあいだにとる、内側の余白 |
| border | 箱のふちに引く枠線 |
| margin | 箱の外側にとる、となりの箱との距離 |
2 / 4
考えてみよう外しても進めます
section に background-color を書きました。色が塗られるのはどこまでですか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 4
ここでつまずく
箱は目に見えないので、思いこみのまま進みがちです。背景色と枠線を付けると、そのほとんどはその場で確かめられます。
箱の大きさは width だけで決まる
padding と border のぶんが外へ足される
余白が無いので箱も無い
背景も枠線も無いと、境目が見えないだけ
上下の余白は足し算になる
隣り合う margin は重なり、大きいほうだけ残る
画像は箱ではない
img も箱。背景色を付けると占める広さが見える
まずは section に背景色と枠線を付けて、どこからどこまでが1つの箱なのかを目で見えるようにします。
4 / 4
CSS入門 - 外側の余白と内側の余白
padding だけ増やしたときの見え方
padding を動かしながら、背景がどこまで塗られるか見てください。
- padding を増やすと箱そのものが大きくなり、中身がゆったり見える
- 背景色は border の下までは塗られ、margin には届かない
- 迷ったら背景色を見る。塗られる側が padding、塗られない側が margin
1 / 4
margin auto で中央に寄る条件
margin の左右に auto を書くと、余った幅を左右で半分ずつ分け合います。つまり箱が真ん中に来ます。ただし余った幅がなければ何も起きません。
margin-left: auto余った幅を半分ずついまは箱が画面いっぱいに広がっていて余りがないので、見た目はまだ変わりません。幅を決める回で、この2行がいっしょに効いてきます。
2 / 4
考えてみよう外しても進めます
上の箱に margin-bottom 24px、下の箱に margin-top 16px を書きました。あいだのすきまは何 px になりますか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 4
CSS入門 - 外側の余白と内側の余白
使い分け
どちらも余白ですが、境目は border です。border より内側が padding、外側が margin になります。
初期余白は body・見出し・ul・ol に付いています。0 にしてから必要なぶんだけ足し直すと、思ったとおりの見た目にしやすくなります。
| やりたいこと | 使うもの |
|---|---|
| 箱の中を広げて中身をゆったり見せる | padding |
| 箱と箱のあいだを離す | margin |
| 背景色を塗った面を広げる | padding |
| 中身を中央に寄せる | margin の左右に auto |
| ブラウザの初期余白を消す | body の margin を 0 |
4 / 4
CSS入門 - 幅が効く相手と効かない相手
block と inline で width の効きが変わる
display を切り替えて、指定した width が効く箱と効かない箱を見てください。
- block は横幅いっぱいに広がり、width を書けばその幅になる
- inline は中身のぶんしか占めず、width を書いても無視される
- inline-block なら横に並んだまま width が効く
1 / 4
高さは中身が決める
何も指定しないブロック要素は横幅いっぱいに広がり、高さは中身の量で決まります。だから幅は決めることが多く、高さは決めないことが多くなります。
max-width: 720pxここまでは広がってよいという上限margin-left: auto余った幅を左右へ分けるheight を決めるのは、写真のように大きさが先に決まっているものだけです。中身の量で変わるものに高さを固定すると、あふれて崩れます。
2 / 4
考えてみよう外しても進めます
span に width 200px を書きました。どうなりますか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 4
max-width で読みやすい幅にする
width をそのまま決めると、画面がせまいときにはみ出します。max-width は上限だけを決めるので、それより画面がせまければ画面に合わせて縮んでくれます。
width 720px
どの画面でも 720px のまま。せまい画面ではみ出す
max-width 720px
720px までは広がり、それ以下では画面に合わせて縮む
width 100%
親の幅に合わせる。表や入力欄に向く
height
中身の量で変わるものには書かない
max-width と左右 auto はセットで使います。720px より広い画面では余った幅が左右に分かれ、中身が中央にそろいます。
4 / 4
考えてみよう外しても進めます
width 300px、左右に padding 20px、border 2px の箱があります。画面で場所をとる幅は何 px ですか。
選ぶと、この枚の中で答えと理由を確かめられます。
1 / 5
CSS入門 - width が指す範囲を変える
content-box と border-box
box-sizing を切り替えて、外形と中身の幅がどう入れ替わるか見てください。
- content-box では width 300 の外へ padding と border が足されて 344 になる
- border-box では外形が 300 に収まり、中身の content が 256 に縮む
- 100% を書いたときにはみ出すかどうかは、この差でそのまま決まる
2 / 5
width が指すものを入れ替える
同じ 300px でも、width が content までを指すのか border までを指すのかで、出来上がる箱の外形が変わります。覚えるのは右です。
初期設定 (content-box)
width: 300px;
padding: 0 20px;
border: 2px solid;
→ 外形 344pxこう書く (border-box)
box-sizing: border-box;
width: 300px;
padding: 0 20px;
border: 2px solid;
→ 外形 300pxはみ出しを計算式で調整しはじめたら、直す場所はそこではありません。数え方のほうを変えます。
3 / 5
全体に border-box を当てる3行
box-sizing を border-box にすると、width は border までを含んだ外側の幅を指すようになります。padding と border は内側に食い込むので、100% が本当に 100% になります。
*すべての要素に当てるborder-boxwidth は border までを指すこの3行をファイルの先頭に置くのが今どきの定番です。あとから書くルールに上書きされない位置に置いておきます。
4 / 5
ここでつまずく
はみ出しの正体は、いつも padding と border のぶんです。数え方を変えれば、足し算そのものが要らなくなります。
width 100% の入力欄が右へはみ出す
左右の padding と border が外へ足されている
padding を足すたびに箱が広がる
width が content の幅しか指していない
計算式で幅をつじつま合わせする
border-box に変えれば計算そのものが消える
先頭に書いたのに一部で効かない
セレクタが * ではなく body になっている
box-sizing は子へ受けつがれません。だから body ではなく、すべての要素を指す * に当てます。
5 / 5