今回は前回のHTMLの内容の続きと新しくCSSの記述について学びました。
昨日、お手本を見ながらの実際にコーディングをして仕組みを覚えたので、
今日の授業の内容は概ね理解することができました。
座学と実技を繰返してコーディング手順をどんどん頭に入れていきたいです。
目次
1．テキストレベルセマンティクス
※テキストレベルセマンティクス：文章の中の単語に意味を持たせる
(参考：L2.7)
■a要素
<a href="リンク先URL" target="リンク先を開く環境" rel="リンク先との関係"> リンクコンテンツ </a>href:
リンク先 URL を指定します。リンク先がページ内の特定の場所になる場合は、ハッシュ（#）に続けて id 名を指定します。メールアドレスや電話番号を指定することもできます。
target:
リンク先を開くフレーム名やウィンドウ名を指定します。以下の名前は特別な意味を持ちます。
_self:
同じウィンドウで開きます。（初期値）
_blank:
新しいタブまたは新しいウィンドウで開きます。
rel:リンク先との関係を指定します。
noopener
外部サイトへ移動する場合に発信元の文章改ざんを防ぎます。リンク先が信頼できない場合は指定してください。
noreferrer
Referer ヘッダー情報を発信したくない場合に指定します。リンク先が信頼できない場合は指定してください。
■span要素
<span> インライン要素の範囲コンテンツ </span>これ自体はコンテンツに対する意味の持たせるものではありませんが特定の範囲をまとめてスタイルシート（CSS）を適用したい場合などに使用します。
■br要素
<br>文章の中の改行位置を定義します。
2．埋め込みコンテンツ
（参考：L2.9）
■img要素
<img src="画像ファイルのパス" alt="Sample Image" width="600" height="400">※alt(代替テキスト)：画像が表示されなかったときに表示する文字情報
(参考)一般的にはカメラで撮った写真はサイズが大きい
→表示に時間がかかることが多いため、サイズを知策することが好まれる。
(参考)画像形式のはなし
GIF
・256色
・背景透過可能
・アニメーション可能。
JPEG（jpgも同じ）
・フルカラー（1677万色）
・非可逆圧縮形式のため、圧縮率によって画像劣化が起る
PNG-8
・背景は透過できる
・256色
（仕様はGIFとほぼ同じ）
PNG-24
・フルカラー（1677万色）
・可逆圧縮形式のため画像劣化が起きない
・ファイルサイズが多い
写真形式まとめ
アニメーション：GIF
透過：PNG GIF
色数が少ないイラスト：PNG GIF
グラデーション：JPEG
写真：JPEG
画質優先：PNG-24
■iframe 要素
<iframe src="インラインフレーム表示ファイルのパス"
width="横方向ピクセル値"
height="縦方向ピクセル値"
srcdoc="インラインフレームに表示するHTML"
name="インラインフレームの名前">
iframe要素が未サポート時の代替テキスト </iframe>GoogleマップやYoutubeなどを自分のサイトに埋め込む
（参考）特殊文字
コードにも使われる文字を表示させるために使用する。
3．CSS記述方法
※CSSとの紐付けについて:
HTMLのタグとCSSの紐付けを行うためにid属性（1ページ1箇所）とclass属性（1ページに複数箇所）が使用する
①別ファイルに記述（基本）
②HTMLデータに書き込む
③HTML タグにインラインで記述する
※タグの属性によって並び方など表示ルールは異なることを理解する
4.セレクタ
（参考：L3.4）
全称セレクタ（*）
* { プロパティ: 値; }型セレクタ
要素名 { プロパティ: 値; }id セレクタ（#）
#id名 { プロパティ: 値; }class セレクタ（.）
.class名 { プロパティ: 値; }子孫結合子セレクタ
セレクタ セレクタ { プロパティ: 値; }5.幅・高さの単位
（参考：L3.5 ）
px（ピクセル値）
<p style="width: 200px; font-size: 30px; background: pink; line-height: 1;">サンプル</p>%（要素の割合（百分率））
<div style="background: skyblue; line-height: 1;">親サンプル
<p style="width: 20%; font-size: 200%; background: pink; line-height: 1;">子サンプル</p>
</div>画面を拡大縮小しても、親と子の大きさの比率が変らない。
em（要素の割合）
<div style="font-size: 20px; background: skyblue; line-height: 1;">親サンプル
<p style="font-size: 2em; background: pink; line-height: 1;">子サンプル</p>
</div>親要素のサイズに対する割合（1em = 100%）を指定します。em は、フォントサイズの単位として使用されます。
rem（ルート要素の割合）
<div style="font-size: 20px; background: skyblue; line-height: 1;">親サンプル
<p style="font-size: 2rem; background: pink; line-height: 1;">子サンプル</p>
</div>ルート（html タグ）のサイズに対する割合を指定します。rem は、フォントサイズの単位として使用されます。ルートのフォントサイズの初期値は、16px に設定されています。
vw（画面の表示幅の割合）
<p style="font-size: 3vw; background: pink; line-height: 1;">サンプル</p>画面幅が基準なので、幅が小さくなると一緒に縮小される
6.色の指定
カラーネーム
（参考：A1.2 カラーネーム 140 色）
※緑ぽいのはlimeでlimeで表示される
#rgb（ハッシュ（#）で始まる 16 進数 3 桁）
#rrggbb（ハッシュ（#）で始まる 16 進数 6 桁）
#rrggbbaa（ハッシュ（#）で始まる 16 進数 8 桁）
※最後の二桁は透明度
rgb(r,g,b)（rgb 関数）
※10進数で指定することができる
rgba(r,g,b,a)（rgba 関数）
※最後の1桁は透明度
0＝不透明、1＝透明