本日の教材：Lesson-2 HTML での記述を始めましょう
Appendix-2（付録） 画像型式と品質・サイズ
テキスト分類タグについて（bodyの中）
a 要素（ハイパーリンク）
<a href="リンク先情報">ハイパーリンク定義情報</a>ハイパーリンクする範囲を指定します。ハイパーリンク定義情報には文章、写真を記述
外部サイトなどにリンクする時は「target=”_blank”」を付けることで新しいタブで開くことができます。
例：問い合わせフォームという文字にリンクを貼りたい。
<a href=”form.html”>
<h3>問い合わせフォーム</h3>
</a>
【注意事項】
「target=”_blank”」使用時に悪意ある外部サイトを指定しまうと外部サイトから自サイトを操作されるという脆弱性があります。これを回避するために外部サイトを指定する時は「rel=”noopener noreferrer”」を同時に指定するようにしてください。ペアで書く！！
L2.7.2 em 要素（強調）
<em>強調定義情報</em>強調する（アクセントを付ける）範囲を指定します。
L2.7.3 strong 要素（強い重要性）
<strong>強い重要性定義情報</strong>強い重要性を示す範囲を指定します。
L2.7.4 small 要素（免責・警告・著作権など）
<small>免責・警告・著作権など定義情報</small>免責・警告・著作権などの注釈や細目する範囲を指定します。
L2.7.5 i 要素（声や心の中で思ったこと）
<i>声や心の中で思ったこと定義情報</i>声や心の中で思ったことなど、他と区別したい範囲を指定します。
L2.7.6 b 要素（キーワードや商品名など）
<b>キーワードや商品名など定義情報</b>キーワードや商品名など固有名詞を、他と区別したい範囲を指定します。
L2.7.7 span 要素（ひとつの範囲）
<span>ひとつの範囲定義情報</span>ひとつの範囲として定義する範囲を指定します。コンテンツ分類のduvと同じ意味。
L2.7.8 br 要素（改行）
<br>改行する箇所を指定します。本要素には、終了タグがありません。
L2.8 コンテンツ埋め込みタグ
L2.8.1 img 要素（画像）
<img src="画像パス名" alt="代替テキスト">画像の埋め込み表示を指定します。本要素には、終了タグがありません。
「代替テキスト」は、画像が表示できない時に画像の代わりに表示するテキスト（文章）を指定します。万が一画像が表示されなくても何を置きたかったかわかる。必須項目なので必ず指定してください。
L2.8.2 iframe 要素（インラインフレーム）
<iframe src="フレーム内に表示する URL" width="フレームの幅" height="フレームの高さ" title="補足情報">フレームが表示できない時のメッセージ</iframe>インラインフレーム内に「フレーム内に表示する URL」で指定した URL の内容を表示します。「補足情報」には表示する内容の補足的な情報を指定します。
「フレームの幅」と「フレームの高さ」には、作成するフレームの大きさを指定します。幅の初期値は 300、高さの初期値は 150 です。
この大きさで外部サイトを自分のサイトに画像的にうめこめる。
iframeが使用できないブラウザがあるらしく（あまりない）、フレームが表示できない時のメッセージを指定する。
↑蒸気機関車がインラインフレーム。大浜先生の別サイト。
他に、Google map（ex.自宅周辺のマップうめこみたい）やYoutubeをうめこめたりする。
【Google map】左上三→メニュー→地図の共有またはうめこむ→地図をうめこむタブ→URLが出るのでHTMLコピー→自分のサイトで置きたいところにペーストすれば、インラインフレームとしてうめこめる。
【Youtube】動画を開いて、動画の右下➦共有→URLが出るのでコピー→自分のサイトで置きたいところにペーストすれば、インラインフレームとしてうめこめる。
必ずbody内に。他の上からの項目もちゃんと書いてないと表示されない。
※著作権はGoogle mapやYoutubeは大丈夫。ダメなサイトだとうめこみ作業ができないようになってる。
画像の取り扱いについて
<img>タグは、画像を表示する際に使用し、必須属性のsrc属性で画像ファイルのURLを指定します。一般的なブラウザで表示できる画像フォーマットとしては、PNG・GIF・JPEGがよく利用されています。 他にも、ウェブ用のベクター画像フォーマットであるSVGや、単一ページのPDF・アニメPNG・アニメGIFなどをsrc属性の値として指定できます。
alt属性には、画像が利用できない環境向けのテキストを指定します。 HTML5ではalt属性は必須ではありませんが、指定しておけばアクセシビリティーが高まるでしょう。
A2.1.1 概要（大浜先生サイト付録-2より）
- 「画像型式と品質・サイズ」は、複数ある画像ファイル形式の特徴と最適な使用用途を理解するために画像の品質と画像ファイルのサイズについて説明します。
- 対象となる画像ファイル形式は、以下の通りです。
(1) GIF（ジフ）は、Graphics Interchange Format の略称で、拡張子は、gif が使用されます。256 色までの色が使用でき可逆圧縮型式の保存形式です。背景の透過やアニメーション画像（パラパラ漫画。Photoshopでつくれる）を使用することができます。
(2) JPEG（ジェイペグ）は、Joint Photographic Experts Group の略でJPEGという画像形式を作った組織そのものの名前からきています。拡張子は、jpg または jpeg です。JPEGは、フルカラー（1677 万色）を扱うことができ圧縮率を指定することができます。写真などに適していますが非可逆圧縮型式（圧縮率を変えられる）のため圧縮率の指定値によっては大幅な画像劣化が発生することがあります。
JPEG の画像比較は、高画質（画質優先）、中画質、低画質（ファイルサイズ最小）で実施しました。
(3) PNG-8（ピング）は、Portable Network Graphics の略称で、拡張子は、png が使用されます。ウェブで使われるために生まれた画像形式です。PNG-8 は、256 色までの色が使用でき GIF と同様の仕様です。→GIFが使われることが多い
(4) PNG-24（ピング）は、Portable Network Graphics の略称で、拡張子は、png が使用されます。ウェブで使われるために生まれた画像形式です。PNG-24 は、フルカラー（1677 万色）の可逆圧縮型式を採用しているため色数が多くても画像の劣化はありません。ただし、その分容量が大きくなる。背景の透過設定も使用することができます。単に PNG というと、こちらを保存形式を示します。
- 検証で使用した画像ファイルは、以下の通りです。画像サイズは、すべて 256✕256 ピクセルです。
(5)svg…最近登場。図形〇△□など出る来る簡単なものには1番キレイ。ロゴなど。ただし、写真は✕。＆新しいものなので1アクション必要。
A2.5 まとめ
つまり、選択の上で大事なのは、画像品質とファイルの大きさ！！
A2.5.1 画像品質比較
◎：とても良い、○：良い、△：多少の劣化あり、×：大きい劣化あり
| PNG-24 | PNG-8 | GIF | JPEG 高画質 | JPEG 中画質 | JPEG 低画質 | |
|---|---|---|---|---|---|---|
| イラスト | ◎ | ◎ | ◎ | 〇 | △ | × |
| グラデーション | ◎ | △ | △ | 〇 | △ | × |
| 写真 | ◎ | △ | △ | 〇 | △ | × |
A2.5.2 ファイルサイズ比較
◎：とても小さい、○：小さい、△：大きい、×：とても大きい
| PNG-24 | PNG-8 | GIF | JPEG 高画質 | JPEG 中画質 | JPEG 低画質 | |
|---|---|---|---|---|---|---|
| イラスト | ○ 7KB | ◎ 5KB | ◎ 5KB | × 15KB | ○ 7KB | ○ 6KB |
| グラデーション | × 41KB | △ 14KB | △ 20KB | 〇 7KB | ◎ 3KB | ◎ 3KB |
| 写真 | × 107KB | △ 33KB | △ 36KB | △ 27KB | 〇 9KB | ◎ 6KB |
A2.5.3 結論
- アニメーションを使用する場合は、GIF を選択します。
- 背景を透過にする場合は、PNG-24 か PNG-8 か GIF を選択します。
- 色数が少ないイラスト画像は、PNG-8 か GIF か PNG-24 を選択します。
- 色数が多いグラデーション画像は、JPEG（画質優先）を選択します。
- 写真は、JPEG（適切な圧縮率）を選択します。
- 画質を優先する場合は、PNG-24 を選択します。但し、色数が多い場合は、ファイルサイズが大きくなるので注意が必要です。
- ファイルサイズを優先する場合は、JPEG（サイズ優先）を選択します。但し、画質劣化が発生しますので、必ず、元画像を保管しておいてください。
◎：とても適している、○：適している、△：画像に応じて判断、×：適していない
| PNG-24 | PNG-8 | GIF | JPEG 高画質 | JPEG 中画質 | JPEG 低画質 | |
|---|---|---|---|---|---|---|
| アニメーション | × | × | ◎ | × | × | × |
| 背景透過 | ○ | ○ | ○ | × | × | × |
| イラスト | ○ | ◎ | ◎ | × | △ | × |
| グラデーション | × | △ | △ | 〇 | △ | △ |
| 写真 | × | △ | △ | 〇 | 〇 | × |
| 画質優先 | ◎ | △ | △ | 〇 | △ | × |
| サイズ優先 | × | △ | △ | × | 〇 | ◎ |
※付録A3-11 画面幅での画像の切り替え
に、画面の幅に合わせて表示される画像を変えるコード載ってる。
PCで見たときはこの画像、スマホで見たときはこの画像…
書き出し後、どの圧縮率かわからなくなったら
photoshopで開いてイメージ→モード→8bitだとPNG-8、32bitだとPNG-24で保存している。JPEGはわからない。
コメントを残す