皆さんこんばんにちは、ユウです。
今回はHTMLタグの紹介6回目となります。
他の記事については以下にリンクを張っておくのでぜひ、足を運んでみて下さい。
...
今回紹介するのは、<img>, <video>, <audio> の三種類です。
メディアの挿入に困っていらっしゃる方にはぜひ、見てほしいです。
img ではJPG,GIF,PNGについても紹介しているので、それらの違いが分からないという方はぜひ見て下さい。
お時間がある方は最後まで読んでいただけると嬉しいです。
それでは紹介していきたいと思います。
<img> 画像の挿入
img タグは画像をWebページ内に挿入するためのタグです。
このタグは、よく使われるので必ず覚えてください。
img タグは必須属性である src 属性で画像のURLを指定することによって、写真を読み込んでいきます。
alt 属性は画像の短い説明（名前）を入れておきます。
画像が表示されない場合に、その画像が一体何なのかについて説明出来るようにしましょう。
他の属性では width や height が指定できるものなどがあります。
一般的な画像フォーマットとしては JPG,GIF,PNG があげられます。
今回は JPG,GIF,PNG についても軽く解説していきたいと思います。
JPG（Joint Photographic Experts Group）
JPG はジョイント・フォトグラフィック・エキスパート・グループが、プロのカメラマンの標準となるべく開発したものです。
JPG は画像データをピクセルと呼ばれるタイルに分割することでデータを圧縮しています。
この圧縮は非可逆性となっており、一度圧縮してしまうと復元は出来なくなってしまいます。
しかし、この圧縮方法は大きなデータをものすごく小さく出来る圧縮方法であるので、様々なところで使用されている。
JPEG という JPG とにた様な名前を聞いたことがある人も多いのではないでしょうか。
これらの違いは、JPEGが圧縮率を自由に設定できるという点になります。
この圧縮率は通常は2:1～100:1程で調整できます。
JPG,JPEGは24ビットRGB、CMYK、8ビットグレートスケールのすべてに対応しているので、色鮮やかな画像を保存することが出来ます。
この保存方法のデメリットとしては、非可逆性であるため保存するたびにデータを損失してしまうという事です。
GIF（Graphics Interchange Format）
透明色を使え、動画を作成することが出来る事が特徴になります。
GIFは可逆圧縮のため、線をくっきりと保つ事が出来ます。
そのため、フォントや幾何学模様の保存などに最適となります。
欠点としては8ビットカラー、256色しか使えないということです。
色が少ないため、写真などの多色の画像には向いていません。
PNG（Portable Network Graphics）
PNGは可逆圧縮であり、画像の質を落とすことはありません。
GIFのように8ビットカラーをサポートし、JPGの用に24ビットRGBもサポートしています。
ですので、PNGは透明色を用いた画像や可逆圧縮を重視したい画像に適しています。
しかし、JPGやGIFと比べると容量が大きくなりがちになってしまいます。
これらの事から、一番便利なのはJPGであり、保存することでデータが劣化することに気をつけていけば問題ないと思います。
＜使用例＞
See the Pen
pozqOmg by 悠(人) (@yutohanabusa)
on CodePen.
<video> 動画を再生
video タグを使用することで、ユーザーにFlash等のプラグインをインストールしてもらうことなく、標準のHTMLでシンプルに動画を再生することが出来ます。
video タグないで文字を記述すると、動画が再生しない場合に表示させることが出来ます。
ファイルを指定するには img と同様に src 属性でURLを指定するか、video タグの中に<source>を入れ込み指定する方法の2種類があります。
同じ箇所に2種類以上動画を挿入したい場合は、source タグを使用するようにしましょう。
属性の指定には、preload, autoplay, loop, width, height 等が指定できます。
preload 属性はあらかじめ、動画を読み込んでおくかどうかを設定できます。
preload の値には auto, metadata, none の3種類が指定できます。
auto の場合はページの読み込みと一緒に動画自体も一緒に読み込んでおきます。
何も指定しない場合は、値は auto のままです。
metadata は動画全体ではなくサイズ・フレーム・トラックリスト・再生時間などのメタデータだけをページの読み込み時に読み込みます。
none は何も読み込まず、動画欄をクリックするなどして始めて読み込みが開始されます。
autoplay 属性はページの読み込みが終わると自動で動画が始まるように出来ます。
loop 属性は繰り返し動画を流すことが出来ます。
controls 属性はインターフェースを表示し、ユーザーが動画を操作しやすいように出来ます。
＜使用例＞
See the Pen
NWKeMgJ by 悠(人) (@yutohanabusa)
on CodePen.
<audio> 音声を再生
音声ファイルを再生することが出来ます。
ほとんど使い方は video タグと同じです。
属性の指定などは上の video タグを見て下さい。
＜使用例＞
See the Pen
JjPwvWW by 悠(人) (@yutohanabusa)
on CodePen.
最後に
今回はメディアに関するタグを紹介してきました。
Webページを作成する際はメディア使うことで印象が大きく変わってきます。
ですので、今回使用したタグについては大体で良いので覚えておくようにして下さい。
今回は以上になります。
最後まで読んでいただきありがとうございました。
