学科 HTML/CSS基礎③　CSS基本構造・Chrome検証ツール

◆オンライン訓練（25/10/18）

講師：小谷祥吾先生
カリキュラム資料：なし

1限目
学科 HTML/CSS基礎③
HTMLとCSSを記述するための基本事項

2限目
学科 HTML/CSS基礎③
CSSの基本構造について

3限目
学科 HTML/CSS基礎③
CSSの基本構造について

4限目
学科 HTML/CSS基礎③
Chrome検証ツールについて

5限目
学科 HTML/CSS基礎③
本日の講義のまとめ

◆本日のテーマ

HTMLとCSSを結び付けていきましょう
動画「HTMLとCSSを記述するための基本事項」を視聴

▼HTMLとCSSの基礎について

【まとめサイト】

HTMLとCSSの基礎をまとめたサイト
https://samplesdl.me/training_html-css/

▼画像の取り扱いについて

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

参考サイト

ワンポイントアドバイス

Webサイトを重くする（表示スピードの低下）の大きな原因の一つは画像サイズです。WebサイトにUPする画像はPhotoshopやIllustratorでしっかりと画像の最適化をしてUPしましょう。

▼CSSとの紐付けについて

HTMLのタグとCSSの紐付けを行うためにid属性とclass属性が使用されます。

参考サイト

▼CSSの基本構造について

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

セレクタ {
　　プロパティ: 値;
　　プロパティ: 値;
　　　・
}

（例）
【HTML】
<p class=”abc”>文字列１</p>
<p class=”def”>文字列２</p>

【CSS】
p.abc {
　　color: white;
　　background: red;
}
p.def {
　　color: yellow;
　　background: blue;
}

参考サイト

▼CSS：セレクタの記載方法

全称セレクタ
型セレクタ
id セレクタ（#）
class セレクタ（.）
子孫結合子セレクタ

参考サイト

▼CSS：幅・高さの単位

px（ピクセル値）
%（要素の割合（百分率））
em（要素の割合）
rem（ルート要素の割合）
vw（画面の表示幅の割合）
vh（画面の高さの割合）
calc 関数（値の計算）

参考サイト

▼CSS：色の指定方法

カラーネーム
#rgb（ハッシュ（#）で始まる 16 進数 3 桁）
#rrggbb（ハッシュ（#）で始まる 16 進数 6 桁）
#rrggbbaa（ハッシュ（#）で始まる 16 進数 8 桁）
rgb(r,g,b)（rgb 関数）
rgba(r,g,b,a)（rgba 関数）
hsl(h,s,l)（hsl関数）
hsla(h,s,l,a)（hsla関数）
線形グラデーション（linear-gradient 関数）
放射グラデーション（radial-gradient 関数）

参考サイト

▼リセットCSS

ブラウザは初期状態でタグ単位のデフォルトのスタイルシートを持っています。このデフォルトのスタイルシートの内容はブラウザによって異なるためブラウザ環境を変更すると意図しない表示になることがあります。このような現象を防ぐために使用するのがリセット CSS です。

参考サイト

▼セレクタの得点

セレクタには優先順位があり点数計算をして高得点のものが採用されます。同じ得点の場合は後ろに書いてあるものが採用されます。点数計算の結果によっては前に書いてあるセレクタが採用されてしまうことがありますので意図したスタイルにならない時は点数を確認してください。

参考サイト

▼Chrome 検証ツール

ブラウザに表示されるWebページの設定情報を参照したり、想定通りに表示されない場合の調査には、Chrome の検証ツールの使用が有効です。また、スマートフォンやタブレットでの表示型式を確認することもできます。

参考サイト

◆本日の課題

本日学んだ内容を復習して整理しておきましょう。
WordPressの投稿ページに学んだことをまとめておくと良いです。

◆本日の気付き・メモ

１．まとめサイトの確認
これからよく使うので、確認しておく
https://samplesdl.me/training_html-css/

２．CSSの基本構造について（下記のような記述となる…覚える）
セレクタ {
　　プロパティ: 値;
　　プロパティ: 値;
}

３．ＣＳＳセレクタの種類
全称セレクタ型セレクタ
id セレクタ（#）…１つのみ
class セレクタ（.）…いくつでも
子孫結合子セレクタ

４．画像
画像の幅・高さを指定する際は、画像のアスペクト比を確認しておいた方がよい

５．リセットCSS
会社毎に規定がある
本校の授業では大浜先生が作られたものを使う

６．セレクタの得点
セレクタにより得点が異なり、得点が高いものが優先される

７．検証ツール
Google Chromeの検証ツールを使うのが一般的

８．自習時間
TeraPadをPCにインストールした。ちょっと不安で実際の操作までには至らず。
後程、昨日の授業（Training-1）の復習をしてみたいと思った。

Yuko Sekimoto Portfolio

学科 HTML/CSS基礎③　CSS基本構造・Chrome検証ツール

◆オンライン訓練（25/10/18）