HTML/CSS基礎④ – Sekine Hisako Portforio

学科 2025.9.23

授業内容

CSSの記述方法について
Webページ制作実践
本日の講義のまとめ

習得内容

CSSの記述方法について

■CSSの基本構造について

□HTML ファイルとは別に記述する場合
CSSファイルをHTML ファイルと別ファイルで記述した時は、HTML ファイルの head タグ内（<head>～</head>の間）に以下の記述を行い CSS ファイルの取り込みを行う。
▲HTML
<link href=”CSS ファイルのパス名” rel=”stylesheet” type=”text/css”>
▲CSS

HTML-CSS入門講座 | 情報デザイン工房　濱屋サイト抜粋

参考サイト
L3.2.1 CSS の構造（HTMLファイルとは別に記述する場合）
https://html-css.hamaya2020.com/lesson-3.html#L3-2-1

□HTML ファイル内に記述する場合
HTML ファイル内に CSS を記述する時は、HTML ファイルの head タグ内（</head>の直前が良い）に以下の記述を行う。

HTML-CSS入門講座 | 情報デザイン工房　濱屋サイト抜粋

参考サイト
L3.2.2 CSS の構造（HTML ファイル内に記述する場合）
https://html-css.hamaya2020.com/lesson-3.html#L3-2-2

■HTML タグにインラインで記述する場合
HTML タグにインラインで記述する時は、スタイル（style）属性を使用して以下の記述を行う。

HTML-CSS入門講座 | 情報デザイン工房　濱屋サイト抜粋

参考サイト
L3.2.3 CSS の構造（HTML タグにインラインで記述する場合）
https://html-css.hamaya2020.com/lesson-3.html#L3-2-2

■リセットCSSついて
ブラウザは初期状態でタグ単位のデフォルトのスタイルシートを持っている。このデフォルトのスタイルシートの内容はブラウザによって異なるためブラウザ環境を変更すると意図しない表示になることがある。このような現象を防ぐために使用するのがリセット CSS 。
リセット CSS は、ブラウザが持っているスタイルシートをリセット（クリア）するためのスタイルシートだがリセットする範囲はコーディングスタイルに依存するため、これが正解というリセット CSS は存在しない。各自のコーディングスタイルに合わせて適時変更する。

参考サイト
L3.7.1 リセット CSS とは
https://html-css.hamaya2020.com/lesson-3.html#L3-7-1

Webページ制作実践

■Webページ制作実践②

①htmlにcssを反映させる準備をする
　まずはhtmlファイルを準備します。今回は<body>タグ内にcssを反映されるタグを記述しておく。

<!doctype html>
<html>
　　<head>
　　　　　<meta ~>
　　　　　<meta ~>
　　　　　<title>〜〜〜</title>
　　</head>
　　<body>
　　　　　文字列1
　　　　　文字列2
　　　　　文字列3
　　　　　文字列4
　　　　　文字列5
　　 </body>
</html>

htmlファイルが作成できたら、次にcssファイルの作成をする。前項でも説明した通り、htmlファイルにcssを反映する方法は3パターンある。

HTML ファイルとは別に記述する場合
HTML ファイル内に記述する場合
HTML タグにインラインで記述する場合

まずは、HTML ファイルとは別に記述する場合（外部ファイルで紐付けする）の方法でcssを反映していく。

cssファイルの作り方はhtmlファイルの作成と同様、文字コードの指定と拡張子（.css）の指定で作成でる。ファイルを新規で作成し、中身は空の状態で保存。
このタイミングで、手元にはhtmlファイルとcssファイル、2つのファイルが準備できた。次に、2つのファイルを紐付けしていく。
参考元を参照し、htmlの<head>タグ内に<link>タグで外部ファイルのパスを記述する。これでhtmlにcssを反映させる準備が整った。

<!doctype html>
<html>
　　<head>
　　　　　<meta>
　　　　　<meta>
　　　　　<title>〜〜〜</title>
　　　　 <link href=”style.css” rel=”stylesheet”>
　　 </head>
　　 <body>
　　　　　文字列1
　　　　　文字列2
　　　　　文字列3
　　　　　文字列4
　　　　　文字列5
　　</body>
</html>

②htmlにcssを反映させる
　cssファイル内に反映させるcssを記述してみよう。今回はhtml側に記述したタグの文字色を変えてみよう。

p {
　　color: red;
}

cssファイルに上記記述し、保存する。その後、htmlファイルをブラウザで開いてみる。文字の色が赤色になっていれば、cssの反映ができている。

③様々なセレクタでcssを反映させる
　②のcssの記述だと、全てのタグの文字色が赤色になる。このような記述を、型セレクタと呼びます。個別
　のタグにcssを反映させたい場合は、classセレクタ等を使用する。class名は任意で決められるが、今回は
　仮でabcとする。

p.abc {
　　color: blue;
}

classセレクタでcssを反映する場合、htmlファイル側のタグにclassを付与する必要がある。

<!doctype html>
<html>
　　<head>
　　　　　<meta>
　　　　　<meta>
　　　　　<title>〜〜〜</title>
　　　　　<link href=”style.css” rel=”stylesheet”>
　　<head>
　　<body>
　　　　　文字列1 （classを付与）
　　　　　文字列2
　　　　　文字列3
　　　　　文字列4
　　　　　文字列5
　　<body>
<html>

htmlファイル、cssファイルを共に更新し、保存。その後、htmlファイルをブラウザで開き、１行目の文字列1が青色になっていれば、classセレクタでのcss反映ができているということ。
このように、セレクタを駆使する事でcssを個別に反映させる事ができる。様々なセレクタがでの反映が可能だが、まずはclassセレクタでの反映に慣れる。

④外部cssファイル以外でのcssを反映させる方法について
　次に、HTML ファイル内に記述する場合と、HTML タグにインラインで記述する場合についてになる。先ほど
　までは外部ファイルにcssを記述したが、htmlファイル内にcssを記述する事でcssを反映させる事ができる。
　先ほど作成したhtmlファイルに記述を追加してみよう。
　HTML ファイル内に記述する場合は、<head>タグ内に<style>タグを記述し、その中にcssを記述する。

<!doctype html>
<html>
　　<head>
　　　　　<meta>〜〜〜
　　　　　<meta>〜〜〜
　　　　　<title>〜〜〜</title>
　　　　<link href=”style.css” rel=”stylesheet”>
　　　　　<style type=”text/css”>
　　　　　　　p {
　　　　　　　color: green;
　　　　　　　}
　　　　　</style>
　　</head>
　　<body>
　　　　　文字列1 （classを付与）
　　　　　文字列2
　　　　　文字列3
　　　　　文字列4
　　　　　文字列5
　　<body>
<html>

htmlファイルを更新し、保存。その後、ブラウザでhtmlファイルを開き、文字の色が緑になっていればファイル内記述でのcss反映ができている。

⑤HTML タグにインラインで記述する場合は、タグに直接cssを記述

htmlファイルを更新し、保存。その後、ブラウザでhtmlファイルを開き、文字列5の文字の色が紫になっていればインライン記述でのcss反映ができている。

①～⑤までの記述をアレンジして制作したHTML

■リセットcssはいつ反映させる？
多くの場合、リセットcssは作業の前段階からhtmlファイルと紐づけておく。
今後は、新規でhtmlファイルを作成する際は、同時にリセットcssも紐づけて先に反映させておく。

■トレーニング-２

先生が用意してくださったCSSのテンプレートを使用して制作したサイト画面