第2回 CSSの基本とスタイリングのルール
この回の目標
- CSSが「見た目を整える言語」だと説明できる
- classを使ってスタイルを適用できる
- 文字サイズ・色・余白を自分で調整できる
- ボタンを作れるようになる
CSSとは何か
HTMLで作った骨組みに対して、色や形を変えることができる言語のこと
CSSでできること
- 色を変える
「文字は濃いグレーに、背景は薄いベージュに」 - サイズを変える
「見出しをもっと大きく、写真は横幅いっぱいに」 - 配置を整える
「メニューを横並びにする」「文字を真ん中に寄せる」 - 余白を作る
「画像と文章の間をもっと空ける」
HTMLだけではデザインはできない、CSSでWebサイトらしくなる
CSSの使い方
CSSを使うためには、HTMLファイルの<head>内でCSSファイルを読み込む必要がある
読み込み手順
① CSSファイルを作成
css/style.cssを作成する（テンプレートファイルに作成済み）
② HTMLの<head>内でCSSを読み込む
<head>
・・・
<link rel="stylesheet" href="./css/style.css"> <!--CSSファイル読み込み-->
</head><link>タグのhref属性の中にCSSファイルのパスを書く
これを書かなければCSSは効かない
リセットCSSについて
ブラウザは、デフォルト設定としてあらかじめタグに余白や装飾をつけている
ブラウザによってデフォルトのスタイルが微妙に違ってくるので、各ブラウザの癖を打ち消すために「リセットCSS」を読み込ませる
<head>
<link rel="stylesheet" href="./css/reset.css"> <!--リセットCSSファイル読み込み-->
<link rel="stylesheet" href="./css/style.css"> <!--CSSファイル読み込み-->
</head>ress.cssの中身は世の中で広く使われている「定番」の中身をベースにするのが一般的
必ず自分が書くメインのCSS（style.css）よりも前に読み込ませる
CSSの書き方
CSSは「タグ」や「id」「class」を指定して、どのようなデザインを反映させるか書く
セレクタ {
プロパティ: 値 ;
}「どこに適用するか」を指定する部分＝セレクタという
タグ指定
<p>タグや<div>タグなど、タグに直接スタイルを指定する方法
書き方
<p>1行目です</p>
<p>2行目です</p>
<p>3行目です</p>
<p>4行目です</p>p {
color: red; /* 文字の色: 赤 */
}結果
1行目です
2行目です
3行目です
4行目です
タグ指定は、指定したすべてのタグ（p）に適用される
id / class 指定
特定のタグにid,class属性を使って名前をつけて、その名前を持つ要素にのみスタイルを指定する方法
id: ページ内の固有の要素に使う（ヘッダー、ナビゲーション）、1つのページに同じIDは1つだけclass: 使い回しできる共通要素に使う（ボタン、カード）、何度使用してもOK
実務ではほとんどclassを使ってCSSの指定を行う
書き方
<p id="highlight">1行目です</p>
<p class="text-blue">2行目です</p>
<p class="text-blue">3行目です</p>
<p>4行目です</p>#highlight {
color: red; /* 文字の色: 赤 */
font-weight: bold; /* 文字の太さ: 太く */
}
.text-blue {
color: blue; /* 文字の色: 青 */
}#highlightの#は「id」を意味する.text-blueの.は「class」を意味する
結果
1行目です
2行目です
3行目です
4行目です
id / class 指定は、特定の名前がついている要素にのみ適用される
要素の複数指定
セレクタをカンマ区切り（,）にすることで、複数要素に対してスタイルの指定が可能
書き方
<p class="text01">1行目です</p>
<p class="text02">2行目です</p>
<p>3行目です</p>
<p>4行目です</p>.text01,
.text02 {
color: red; /* 文字の色: 赤 */
}結果
1行目です
2行目です
3行目です
4行目です
より詳細な要素の指定
セレクタを半角スペース区切りにすることで、「◯◯ の中にある △△」という指定が可能
書き方
<div class="element01">
<p>要素１の中身です</p>
</div>
<div class="element02">
<p>要素２の中身です</p>
</div>.element01 p {
color: red; /* 文字の色: 赤 */
}結果
要素１の中身です
要素２の中身です
- 入れ子指定で書くことで、どのエリアのどの要素かが分かりやすくなる
-
より詳しく場所を指定した方が「優先順位」が高くなる
例：pだけの指定より、.element01 pの方が優先順位が高い
文字を装飾してみよう
実際に書いてみよう
cssファイルに下記を書いて、文字の装飾をしてみよう
p {
color: #333333; /* 文字色 */
font-size: 18px; /* 文字サイズ */
font-weight: bold; /* 太さ */
line-height: 1.8; /* 行の高さ */
letter-spacing: 0.05em; /* 文字間 */
text-align: center; /* 文字の揃え方向 */
}
※ /* */で囲まれている範囲はコメントアウト
よく使うプロパティ
-
color（文字色）
カラーコード:#333333、RGB:rgb(255, 0, 0)、色名:redなど -
font-size（文字サイズ）
px、rem、emなど -
font-weight（太さ）
キーワード:boldnormal、数値400（通常）〜700（太字） -
line-height（行の高さ）
数値（単位なし）1.5、1.7 -
letter-spacing（文字間）
em、px -
text-align（文字の揃え方向）
left、center、rightなど
ボックスモデルについて
ボックスモデルとは？
HTML要素はすべて「箱（ボックス）」になっていて、4つの層（content,padding,border,margin）でできているということを示すモデル
margin
border
padding
- content（中身）: テキストや画像が表示される領域
- padding（内側の余白）: コンテンツと枠線の間の内側の余白
- border（枠線）: パディングを囲む枠線
- margin（外側の余白）: ボックスの外側、他の要素との間隔
それぞれの領域を確認してみよう
実際にコードを書いて、4つの層がどのような構造になっているか確認してみよう
<div class="box">
これはボックスの例です。
</div>
<p>ボックスの下のテキスト</p>.box {
margin: 60px; /* 外側の余白 */
padding: 40px; /* 内側の余白 */
border: 2px solid #333; /* 枠線 */
border-radius: 10px; /* 角丸 */
background-color: #ffffc6; /* 背景色 */
}ボックスの下のテキスト
ブロック要素とインライン要素
HTMLタグは、タグの種類によって「ブロック要素」か「インライン要素」の性質を持つ
ブロック要素
横幅いっぱいになる要素（div, p, h1 など）
pタグ
特徴
- 縦に積み上がっていく
- 横幅・高さの指定ができる
インライン要素
文字の幅分だけの要素（span, a）
特徴
- 横並びにつながる
- 横幅・高さの指定ができない
要素の変更
displayプロパティを使って、違う要素に変更することもできる
.change-display {
display: block; /* ブロック要素 */
display: inline; /* インライン要素 */
}ボタンを作ってみよう
背景色や文字揃えの方向、余白を調整してボタンを作ってみよう
申し込むサンプルコード
<a href="#" class="button">申し込む</a>リンクボタンは基本的に<a>タグを使う
.button {
display: inline-block;
width: 200px;
padding: 12px;
margin-bottom: 20px;
background-color: #e67e22;
border-radius: 8px;
color: white;
font-weight: bold;
text-align: center;
text-decoration: none; /* リンクのアンダーラインを消す */
}
.button:hover {
background-color: #e6a373;
}
.button::after {
content: " →";
margin-left: 10px;
}display: inline-block;
inline-blockは、文字幅分の要素でありつつ幅や高さの指定ができる
ボタンを作るときはよく使う
hover効果
セレクタに:hoverをつけることで、マウスを乗せた時のスタイルを指定することができる
疑似要素（::before , ::after）
擬似要素は、「HTMLには書いていないがCSSだけで作り出せる『架空のパーツ』」のこと
矢印などちょっと飾りをつけたい時に使う
セレクタに::before::afterをつけることで、擬似要素をつけることができる
::before：その要素の「前」にパーツを作る::after：その要素の「後ろ」にパーツを作る
擬似要素は使う時は必ずcontent: "";を入れる！
CSSプロパティの順番
どんな順番で書いてもCSSは効くが、よく使われるのは外側から内側へという「視覚的な優先順位」で書く方法
優先順位
- 配置・表示（Layout / Display）
「どこに、どう置くか」を決める - サイズ・余白（Box Model）
「どのくらいの大きさで、周りとどれくらい離すか」を決める - 外枠・背景（Border / Background）
箱自体の「色や線」を決める - 文字装飾（Typography）
「中の文字」をどう見せるか決める - その他（Others）
.btn {
/* 1. 配置・表示 */
display: inline-block;
/* 2. サイズ・余白 */
width: 200px;
padding: 12px;
margin-bottom: 20px;
/* 3. 外枠・背景 */
background-color: #e67e22;
border-radius: 8px;
/* 4. 文字装飾 */
color: white;
font-weight: bold;
text-align: center;
text-decoration: none;
}視覚順に書くと、コードを見た時にパッとデザインが頭に浮かびやすくなる
CSS設計の考え方
クラス名の名前付けルールとして、「BEM」と言う考え方がある
BEMとは？
名前を Block（塊）、Element（要素）、Modifier（状態） の3つに分けて考える設計方法のこと
-
B：Block（塊）
一番大きな「塊」で独立した要素（例：card, menu, button） -
E：Element（要素）
ブロックを構成する「中身」の要素（例：card__title, card__img）
ブロック名と要素名を アンダースコア2つ（ __ ） でつなぐ -
M：Modifier（モディファイア）
ブロックやエレメントの見た目や動きなどの「バリエーション」（例：button--red, button--large）
もとの名前とバリエーション名を ハイフン2つ（ -- ） でつなぐ
書き方の例
<div class="card">
<img src="..." class="card__img">
<h2 class="card__title">タイトル</h2>
<button class="card__button card__button--red">詳しく見る</button>
</div>.card { ... } /* ブロック */
.card__title { ... } /* 要素：カードの中のタイトル */
.card__button--red { ... } /* 状態：赤いボタン */BEMを使うと、名前が被らず命名できたり、HTMLの構造が想像しやすくなる
ミニ課題
- 文字サイズや色など、自分好みにスタイルを変更してみよう
- boxクラスを作り、余白（margin,padding）を調整したり枠線をつけたりしてみよう
- ボタンに擬似要素（::before）を追加してみよう
まとめ
今回のまとめ
- CSSは「見た目を整える言語」
- classを使って自由に装飾できる
- HTMLは箱（ボックス）でできている
- CSSは優先順位を整理したり管理しやすい名前付けを意識して書くことが大事
次回の予定
Flexboxを使って、画像と文章の横並びやアイコンをつける方法など自由なレイアウト方法について学びます