投稿者: 本日のテーマ
HTMLとCSSを結び付けていきましょう
1限目
学科 HTML/CSS基礎③
HTMLとCSSを記述するための基本事項
2限目
学科 HTML/CSS基礎③
CSSの基本構造について
3限目
学科 HTML/CSS基礎③
CSSの基本構造について
4限目
学科 HTML/CSS基礎③
Chrome検証ツールについて
5限目
学科 HTML/CSS基礎③
本日の講義のまとめ
| 記述例 | 使い方 |
|---|---|
| <meta charset=”UTF-8″> | HTML文章に記述 |
| @charset “utf-8”; | CSSファイルに記述 |
| 記述例 | 使い方 |
|---|---|
| <img src=”images/sample_img001.jpg” alt=”” width=”400″ height=”300″> | 画像「img」は alt=””(必須) width=”400″(推奨) height=”300″(推奨) ※pxの単位は省略可 |
| background-image:url(“images/sample_img001.jpg”); | 背景画像「background」「background-image」 |
| background-size:400px; | 背景の画像サイズ ※pxの単位は省略不可 |
| CSSセレクタの優先順位の計算方法 | 得点 | 例 |
|---|---|---|
| 全称セレクタ | 0 | * すべての要素に適用 |
| 要素名 | 1 | h1 p div span table など |
| 擬似要素 | 1 | :after など |
| 擬似クラス | 10 | :hover など |
| class | 10 | .main-text |
| id | 100 | #header |
| style属性 | 1000 | <div style=”font-size:140%;”> |
| !important | 合わせて使用したプロパティを最優先 | font-size:140%!important; |
| セレクタの例 | 得点 |
|---|---|
| div#main p | 102点 |
| #main p.main-text | 111点 |
| div#main p.main-text | 112点 |
| div#main main p.main-text | 113点 |
書き方(文法)
セレクタ{
プロパティ:値;
}
⚠️見やすくするために値の前は空白をあけると良い
画像の取り扱いについて
<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 の検証ツールの使用が有効です。また、スマートフォンやタブレットでの表示型式を確認することもできます。