2月16日(木)-HTML基礎③テキスト分類タグ/コンテンツ埋め込みタグ/画像の取扱い

テキスト分類タグについて

【要参考】HTML での記述を始めましょう | HTML-CSS 入門講座 | 情報デザイン工房 濱屋 ※「L2.7 テキスト分類タグ」以下が分かりやすい

a 要素(ハイパーリンク)

<a href=”リンク先情報”>ハイパーリンク定義情報</a>

ハイパーリンクする範囲を指定します。
外部サイトなどにリンクする時は「target=”_blank”」を付けることで新しいタブで開くことができます。

【注意事項】
「target=”_blank”」使用時に悪意ある外部サイトを指定しまうと外部サイトから自サイトを操作されるという脆弱性があります。
これを回避するために外部サイトを指定する時は「rel=”noopener noreferrer”」を同時に指定するようにしてください。

em 要素(強調)

<em>強調定義情報</em>

強調する(アクセントを付ける)範囲をを指定します。

strong 要素(強い重要性)

<strong>強い重要性定義情報</strong>

強い重要性を示す範囲を指定します。

small 要素(免責・警告・著作権など)

<small>免責・警告・著作権など定義情報</small>

免責・警告・著作権などの注釈や細目する範囲を指定します。
(コピーライトや著作権についての説明を書くのに使用する)

i 要素(声や心の中で思ったこと)

<i>声や心の中で思ったこと定義情報</i>

声や心の中で思ったことなど、他と区別したい範囲を指定します。

b 要素(キーワードや商品名など)

<b>キーワードや商品名など定義情報</b>

キーワードや商品名など、他と区別したい範囲を指定します。

span 要素(ひとつの範囲)

<span>ひとつの範囲定義情報</span>

ひとつの範囲として定義する範囲を指定します。
テキスト分類の中での<div>のようなもので、意味はないけど囲っておく範囲(後でCSSなど、範囲指定するときに便利とのこと)

br 要素(改行)

<br>

改行する箇所を指定します。本要素には、終了タグがありません。
普通にWordやメモ帳のように書いても改行は無視されるので、改行時には基本<br>を書く

コンテンツ埋め込みタグについて

img 要素(画像)

<img src=”画像パス名” alt=”代替テキスト”>

画像の埋め込み表示を指定します。本要素には、終了タグがありません。
「代替テキスト」は、画像が表示できない時に画像の代わりに表示するテキストを指定します。
※必須項目なので必ず指定してください。

iframe 要素(インラインフレーム)

<iframe src=”フレーム内に表示する URL”
  width=”フレームの幅”
  height=”フレームの高さ” title=”補足情報”>
  フレームが表示できない時のメッセージ</iframe>

インラインフレーム内に「フレーム内に表示する URL」で指定した URL の内容を表示します。「補足情報」には表示する内容の補足的な情報(ほとんどないけど、フレーム表示できない場合のメッセージ等)を指定します。
「フレームの幅」と「フレームの高さ」には、作成するフレームの大きさを指定します。幅の初期値は 300、高さの初期値は 150 です。

例:Webサイトに埋め込まれ表示されている、GoogleマップやYouTube動画など
◆Googleマップ→示したい位置が指定されている状態で左側メニュー→「地図を共有または埋め込む」→【地図を埋め込む】タブ→リンクコピーできる
◆YouTube→視聴画面右下の共有から埋め込みorリンクコピーできる

【外部サイトをiframeで表示することの著作権について】
(先生より)著作権は問題ないわけではなく、グレーゾーンとのこと。
最近はiframeで表示されるのを拒否しているサイトも多い(metaタグで設定できるとのこと)
拒否されている場合は、iframeを使用しても表示されないようになる。
※埋め込み表示できた(=拒否設定されていない)としても、著作権が問題ないわけではないので注意。

画像の取り扱いについて

【要参考】画像型式と品質・サイズ | HTML-CSS入門講座 | 情報デザイン工房 濱屋 以下が分かりやすい

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

・jpg、jpegは同じ。先生は混ざっているのが心地よくないので個人的にjpgに統一しているとのこと。
・PNGは8はあまり使われず、24が主流とのこと。
・それぞれ使用目的などにより向き不向きがあるので、↑先生のサイト下部の表で見るとわかりやすい。

【参考サイト】