学科【オンライン】2025.9.20

授業内容

• HTMLとCSSを記述するための基本事項
• CSSの基本構造について
• Chrome検証ツールについて
• 本日の講義のまとめ

習得内容

• HTMLとCSSを記述するための基本事項

■HTMLとCSSの基礎をまとめたサイト
https://samplesdl.me/training_html-css/
文字コード、コメントアウト、パス、画像、表示ルール、セレクタの得点の確認

■画像の取り扱いについて
<img>タグは、画像を表示する際に使用し、必須属性のsrc属性で画像ファイルのURLを指定する。一般的なブラウザで表示できる画像フォーマットとしては、PNG・GIF・JPEGがよく利用される。 他にも、ウェブ用のベクター画像フォーマットであるSVGや、単一ページのPDF・アニメPNG・アニメGIFなどをsrc属性の値として指定できる。
alt属性には、画像が利用できない環境向けのテキストを指定する。 HTML5ではalt属性は必須ではないが、指定しておけばアクセシビリティーが高まる。

■HTML と CSS とは
参考サイト　L1.1.2 HTML と CSS とは　https://html-css.hamaya2020.com/lesson-1.html#L1-1-2

■ワンポイントアドバイス
Webサイトを重くする（表示スピードの低下）大きな原因の一つは画像サイズにある。WebサイトにUPする画像はPhotoshopやIllustratorでしっかりと画像の最適化をしておく。
後から見たときに分かりやすくするために、スペースや字下げを利用する。

■CSSとの紐付けについて
HTMLのタグとCSSの紐付けを行うためにid属性とclass属性が使用される。

• CSSの基本構造について

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

■CSS：セレクタの記載方法
参考サイト　https://html-css.hamaya2020.com/lesson-3.html#L3-4-1

□全称セレクタ（*）
アスタリスク（*）を指定すると、すべての要素に適用するスタイルを指定できる。
▲使用例
* { color: red; }
p * { color: red; }

□型セレクタ
HTML の要素名（タグ名）を指定すると、その要素名に合致する要素に適用するスタイルを指定できる。
▲使用例
h1 { font-size: 140%; }
p { color: red; }

□id セレクタ（#）
ハッシュ（#）を付けて id 名を指定すると、その id 名に合致する要素に適用するスタイルを指定できる。
▲使用例
#box1 { font-size: 140%; } div#box2 { color: red; }

□class セレクタ（.）
ピリオド（.）を付けて class 名を指定すると、その class 名に合致する要素に適用するスタイルを指定できる。
▲使用例
.text1 { font-size: 140%; } p.text2 { color: red; }

□子孫結合子セレクタ
複数のセレクタをスペースで区切って指定すると、ある要素の配下にある要素にスタイルを指定できる。
▲使用例
.selector1 .g1 { color: red; }

■CSS：幅・高さの単位
参考サイト　https://html-css.hamaya2020.com/lesson-3.html#L3-5

□px（ピクセル値）
ピクセル値で指定。
▲使用例
<p style=”width: 200px; font-size: 30px; background: pink; line-height: 1;”>サンプル</p>
width: 100pxは画面の幅のサイズと同じ

□%（要素の割合（百分率））
親要素のサイズに対する割合を百分率（%）で指定。
▲使用例
<div style=”background: skyblue; line-height: 1;”>親サンプル
<p style=”width: 20%; font-size: 200%; background: pink; line-height: 1;”>子サンプル</p>
</div>

□em（要素の割合）
親要素のサイズに対する割合（1em = 100%）を指定します。em は、フォントサイズの単位として使用される。
▲使用例
<div style=”font-size: 20px; background: skyblue; line-height: 1;”>親サンプル <p style=”font-size: 2em; background: pink; line-height: 1;”>子サンプル</p> </div>

□rem（ルート要素の割合）
ルート（html タグ）のサイズに対する割合を指定する。rem は、フォントサイズの単位として使用される。ルートのフォントサイズの初期値は、16px に設定されている。
▲使用例
<div style=”font-size: 20px; background: skyblue; line-height: 1;”>親サンプル <p style=”font-size: 2rem; background: pink; line-height: 1;”>子サンプル</p> </div>

□vw（画面の表示幅の割合）
画面の表示幅に対する割合（10vw = 画面幅の10%）を指定します。「width: 100vw;」と指定すると画面幅（スクロールバーを含む）と同じ大きさの領域が定義できる。
▲使用例
<p style=”font-size: 3vw; background: pink; line-height: 1;”>サンプル</p>

□vh（画面の高さの割合）
画面の高さに対する割合（10vh = 画面の高さの10%）を指定します。「height: 100vh;」と指定すると画面の高さ（スクロールバーを含む）と同じ大きさの領域が定義できる。
▲使用例
<p style=”font-size: 3vh; background: pink; line-height: 1;”>サンプル</p>

□calc 関数（値の計算）
値を四則演算で計算する。
▲使用例
<div style=” background: skyblue; line-height: 1;”>親領域
<p style=”width: calc(100% – 40px); margin: 0 auto; background: pink; line-height: 1;”>子領域</p>
</div>

■CSS：色の指定方法
参考サイト
https://html-css.hamaya2020.com/lesson-3.html#L3-6-2
https://html-css.hamaya2020.com/appendix-1.html#A1-3

□カラーネーム
HTML で定義されているカラーネームで指定可能な のは140 色。カラーネームによる指定の場合は使用する環境によって正しく表示できない可能性がある。
カラーネーム指定は、black、red、lime、blue などのカラーネームで指定

□#rgb（ハッシュ（#）で始まる 16 進数 3 桁）
#rgb 指定は、r が赤、g が緑、b が青を示す。それぞれの色の強さは 16 進数（0～f）で指定。0 は無発色で、f は最大発色になる。

□#rrggbb（ハッシュ（#）で始まる 16 進数 6 桁）
#rrggbb 指定は、rr が赤、gg が緑、bb が青を示す。それぞれの色の強さを2桁の 16 進数で指定。00 は無発色で、ff は最大発色になる。

□#rrggbbaa（ハッシュ（#）で始まる 16 進数 8 桁）
#rrggbbaa 指定は、rr が赤、gg が緑、bb が青、aa が透明度を示す。それぞれの色の強さを 2 桁の 16 進数で指定する。00 は無発色で、ff は最大発色になる。透明度は、00 は完全に透明、ff は完全に不透明になる。

□rgb(r,g,b)（rgb 関数）
rgb(r,g,b) 指定は、r が赤、g が緑、b が青を示す。それぞれの色の強さを 10 進数（0～255）または百分率（0%～100%）で指定。0（0%）は無発色で、255(100%)は最大発色になる。

□rgba(r,g,b,a)（rgba 関数）
rgba(r,g,b,a) 指定は、r が赤、g が緑、b が青、a が透明度を示す。それぞれの色の強さを 10 進数（0～255）または百分率（0%～100%）で指定。0（0%）は無発色で、255（100%）は最大発色になる。透明度は、0（0%）は完全に透明、1（100%）は完全に不透明になる。

□hsl(h,s,l)（hsl関数）
hsl(h,s,l) 指定は、h が色相（Hue）、s が彩度（Saturation）、l が輝度（Lightness）を示す。
色相（Hue）‥‥0 ～ 360°の角度で色相を指定
彩度（Saturation）‥‥0 ～ 100% の割合で彩度を指定。0% は灰色、100% は純色になる。
輝度（Lightness）‥‥0 ～ 100% の割合で輝度を指定。0% は黒、50% は純色、100% は白になる。

□hsla(h,s,l,a)（hsla関数）
hsla(h,s,l,a) 指定は、h が色相（Hue）、s が彩度（Saturation）、l が輝度（Lightness）、a が透明度（Alpha）を示す。
透明度（Alpha）
0（0%） ～ 1（100%） で透明度を指定。0（0%）は完全透明、1（100%）は完全不透明になる。

□線形グラデーション（linear-gradient 関数）
線形グラデーションの作成には、linear-gradient 関数を使用する。linear-gradient 関数は、以下のグラデーション情報をカンマ（,）で区切って複数指定することができる。
▲方向
グラデーションの方向を指定。初期状態では、上から下に向けて変化する。to top/to bottom/to left/to right を指定すると指定した方向への変化を行う。方向を組み合わせて指定することで対角方向を指定できる。例えば、右下方向へ変化を行わせるためには to bottom right と指定する。また、角度で指定することもでき 0deg は下から上へ、90deg は左から右へと時計回りに回転する。負の角度を指定すると反時計回りに回転する。
▲色
グラデーションを作成する色値を複数指定する。単に複数の色値だけを指定した場合は、指定された色値数が均等幅で割り当てられ色を変化させる。色値の後ろにスペースを空けて位置を指定することで色値が占有する幅を指定することができる。また、色値の後ろにスペースを空けて位置を2つ指定することで彩度を保持する幅を指定することができる。位置は、ピクセル数（px）や比率（%）で指定することができる。色値は、透明度のある色値にも対応しているので複数のグラデーションを重ねたり、画像の上にグラデーションを重ねたりすることもできる。

□放射グラデーション（radial-gradient 関数）
放射グラデーションの作成には、rasial-gradient 関数を使用する。radial-gradient 関数は、以下のグラデーション情報をカンマ（,）で区切って複数指定することができる。
▲中心と大きさ
グラデーションの中心位置と大きさを指定する。グラデーションを円形にする時は「circle 大きさ at 中心位置」で指定し、楕円形にする時は「ellipse 大きさ at 中心位置」で指定する。大きさは、以下の値を指定する。closest-side を指定すると中心位置からボックスを囲む最近接の辺までの大きさになり、中心位置の初期状態は、縦 50%、横 50% の位置になる。中心位置は「横位置 縦位置」で指定する。位置は、ピクセル数（px）や比率（%）で指定することができる。
△closest-side‥‥中心位置から最も近い辺までの大きさになる。
△farthest-side‥‥中心位置から最も遠い辺までの大きさになる。
△closest-corner‥‥中心位置から最も近い角までの大きさになる。
△farthest-corner‥‥中心位置から最も遠い角までの大きさになる。（初期値）
△値‥‥（ピクセル数（px）や比率（%））で円の大きさを指定する。
▲色
グラデーションを作成する色値を複数指定する。単に複数の色値だけを指定した場合は、指定された色値数が均等幅で割り当てられ色を変化させる。色値の後ろにスペースを空けて位置を指定することで色値が占有する幅を指定することができる。また、色値の後ろにスペースを空けて位置を2つ指定することで彩度を保持する幅を指定することができる。位置は、ピクセル数（px）や比率（%）で指定することができる。色値は、透明度のある色値にも対応しているので複数のグラデーションを重ねたり、画像の上にグラデーションを重ねたりすることもできる。

■リセットCSS
参考サイト　https://html-css.hamaya2020.com/lesson-3.html#L3-7
ブラウザは初期状態でタグ単位のデフォルトのスタイルシートを持っている。このデフォルトのスタイルシートの内容はブラウザによって異なるためブラウザ環境を変更すると意図しない表示になることがある。このような現象を防ぐために使用するのがリセット CSS 。

■セレクタの得点
参考サイト　https://html-css.hamaya2020.com/lesson-3.html#L3-8
セレクタには優先順位があり点数計算をして高得点のものが採用される。同じ得点の場合は後ろに書いてあるものが採用される。点数計算の結果によっては前に書いてあるセレクタが採用されてしまうことがあるので意図したスタイルにならない時は点数を確認する。

• Chrome検証ツールについて

■Chrome 検証ツール
ブラウザに表示されるWebページの設定情報を参照したり、想定通りに表示されない場合の調査には、Chrome の検証ツールの使用が有効。また、スマートフォンやタブレットでの表示型式を確認することもできる。
参考サイト　https://html-css.hamaya2020.com/lesson-3.html#L3-9

• 本日の講義のまとめ

昨日制作した画像に以下の変更を加えました。

• header文字のカラー
• header文字の影のカラー
• 「まほうのおもちゃ屋とは？」のカラー
• 「まほうのおもちゃ屋とは？」を見出しから段落に変更
• 「ご来店お待ちしております。」のカラー
• アクセス情報の住所の郵便番号と住所の間にスペースを追加