-
imgタグとは？画像の配置とさまざまな単位を知ろう。
画像の配置には<img>タグを使う
WEB制作において「画像」は欠かせない存在です。
「画像」とは写真やロゴマーク、フォトショップやパワーポイントで作った素材やキャプチャなどを指します。
画像の設置に使うタグは<img>。
imgとは「image＝画像」の略です。
今回はWEBページの動画を貼る際に使う<img>タグに属性を追加する方法や、WEB制作で用いられるさまざまな単位についての基礎を学んでいきましょう。
<img>タグの特長は？
① 終了タグがない
<img>タグは「空要素」と言われ「終了タグがない」という特長があります。タグの最後は単純に「>」で囲みましょう。</img>とは書きません。
② srcで属性を記述
<img>とだけ書いても、どの画像を表示するのかという情報（ソース）が足りないとブラウザに表示されません。そのため<img>タグの中には「属性（写真のある場所）」を使って情報を記載します。
<src属性の例>
<img src="images/dog.jpeg" alt="寝ている犬の写真">上記の「src」は「source」の略。
「
src="images/dog.jpeg"」の箇所が「src属性」であり、この箇所に画像のパス（画像を格納している場所）を記述します。これでやっとコンピューターはどこに画像があるかを道筋をたどることができ、画像を拾って来れるのです。
③ alt属性を記述
<img src="images/dog.jpeg" alt="寝ている犬の写真">上記の「alt」は「alternate（代替テキスト）」の略。
「
alt="寝ている犬の写真"」の箇所が「alt属性」であり、その写真が何であるかの説明を簡潔に入れます。この箇所は視覚障害者の方にとってコンピューターが字を読み上げる際に重要な部分になります。また、SEOの観点からも書いておきたいパートです。
④ 使える画像形式は主に3つ
WEBサイトにおいて、表示する画像ファイルのsrc属性は
●GIF形式（.gif）
●JPEG形式（.jpg）
●PNG形式（.png）以上の画像形式を指定することができます。
絶対パスと相対パス
src属性で画像のパス（場所）を指定する際には「絶対パス」と「相対パス」という2種の指定方法があります。
▶まず「パス」って何？
その画像がある場所までの「道（path）」という意味です。WEB制作に関する場合は「道筋」と言うともっとイメージしやすいでしょう。
例えば自分のパソコン内に「sea.jpg」という「海の写真」を引っ張ってくる場合は、このようなパス（道筋）になります。
Usersフォルダから道筋をたどっていって、imagesフォルダのapple.jpgにたどりつくと。
<img src="file:///Users/user-name/Desktop/folder/images/apple.jpg" alt="りんごの写真">「
"file:///Users/user-name/Desktop/folder/images/apple.jpg"」の箇所ですね。これがパス（path）です。
▶絶対パスとは？
絶対に変わらないファイルの場所を指定する際に使います。その画像があるファイルのURLを記載します。
＜絶対パスの例＞
<img src="https://sample.com/images/apple.jpg" alt="りんごの写真">「
"https://sample.com/images/apple.jpg"」の箇所ですね。▶相対パスとは？
画像を掲載したいファイルから見て、画像ファイルのある場所をスラッシュ区切りで下降していく記述をします。
＜相対パスの例①「同階層フォルダ」指定の場合＞
<img src="images/apple.jpg" alt="りんごの写真">上記の例は「画像を掲載したいファイルから見て、同階層のimagesフォルダの中のapple.jpg」という写真を指定しています。
＜相対パスの例②「1つ上の階層」を指定の場合＞
<img src="../images/apple.jpg" alt="りんごの写真">上記の例は「../」とありますね。これは1つ上の階層を指定する際に行う記述です。
なお、同じ階層の場合は「./」と書いても良いですが通常は例①のように省略します。
画像の大きさを指定する時に使える単位
画像の大きさを変えたいときは「CSS」で指定します。
幅（width）高さ（height）内余白（padding）ボーダー（border）外余白（margin）を指定する際には、WEB特有のさまざまな単位があります。
※基本的には「高さ」は指定しないほうが良いです。レスポンシブのWEBデザインを考えると、様々なデバイスに対応させるために幅を相対指定にすることが多いからです。
では、画像の「単位」を見ていきましょう。
px
ピクセルで指定する場合は、下記のコードサンプルのように単位は付けずにOKです。もちろん「120px」のように指定しても問題ありません。
％
「親要素の幅や高さに対して何％か」を決める場合に使います。ただし、高さに％を指定する場合、親要素の高さが「auto」になっていると無視されます。
vw
vwは「view width」の略。ブラウザの画面の幅を元に指定します。%と異なり「画面幅」を元にするため、親要素のサイズは関係ありません。また、高さの指定にも使えるので、画面幅を元に高さを指定したいときに便利な単位です。
vh
vwは「view height」の略。ブラウザの画面の高を元に指定します。
ew
フォントのサイズ指定によく使われる単位です。「1em」は「1文字分」という意味になります。「親要素に指定されたフォントのサイズをもとに何文字分」と算出します。幅や高さなどに使用する場合は、要素自体にフォントサイズが指定されていれば該当要素のフォントサイズが基準になります。
rew
「r」は「root」の略です。<body>タグより外側に存在する<html>タグ（＝ルート）に指定されたフォントサイズをもとに何文字分、と算出します。前述の「em」に似ていますが、該当要素や親要素のフォントサイズがいくつであっても、ルートを基準にします。
max-widthとmin-width
画像は、最大幅（max-width）最小幅（min-width）を指定することもできます。
例えば<img>タグで置いた画像を、width: 1200pxにしたとします。しかしWEB閲覧者が1200pxよりも小さなモニターで見ていた場合、画像がはみ出してしまいますよね。
そこで「max-width: 100%」を指定しておくと「基本は1200pxで、100%を下回ることはない」という状態にできます。
その逆で「min-width」は「基本30%で200pxを下回ることはない」というように、幅が小さくなりすぎないように使います。
メンターをピンポイントで「レンタル」する学び方
今はプログラミングの基礎段階を早めに終わらせ「どんどん先に進もう」という学習が主流ですが「わからないところはちょっと習っておこう」というスタンスです。なるべく費用と時間をかけずに、ピンポイントでメンターをレンタルできるサービス。
『「プログラミングは簡単」はウソ。難しいですよ。』でも書かせていただいたとおりで、プログラミングってやっぱり難しいからです。
マークアップやプログラミングは立派な「専門職」。本来免許や試験があるべきレベルの学問です。
米国では大学等でコンピューター工学を修得した人が進む道であり、社会的地位も日本より高い位置づけとなっており、完全に専門職・技能職の取り扱い。なので「基礎」と言っても覚えることは実は山ほどあるんですね。
いたずらに応用に進んで自己満足にひたったり、プログラミングスクールであらかじめ強制的に決まっている無理なコースやスケジュールに挑戦すると、挫折の可能性が高まります。
大切なのは着実な理解の積み重ね。ここを大切にしているのが当サイト「メンタレ」です。メンターにあなただけの「実践講座」をしてもらい、俯瞰的に技術を習得していきましょう。
独学の途中でちょっと習いたい時、駆け出しエンジニアなのでたまに学びたいとき。初学者なのでまずは序盤だけきっちり固めたいとき。
いつでもお気軽に活用ください。
