のはこごと

モノヅクリノハコの中の人の雑記です

【HTMLとCSSの基礎の基礎講座】その10:画像の挿入方法

 

10日目です。もう少しで折り返しですね。意外と毎日続けられてて、筆不精ながらびっくりしています。

さて、本日は【画像の挿入】についてです。また新しいタグがでてまいります。まずは、画像の挿入に必要なタグをひと通り見てみましょう。

 

<img>←画像のことです。imageです。

<src>←属性です、ソースのこと、画像ファイルの位置、参照元を表します。この場合、相対パスで指定する事が多いです。絶対パスだと直リンクになってしまう為、よろしくないのです。

ここで出てくる"相対パス"と"絶対パス"ですが、これは是非ぐぐってください。今後ファイルの位置関係などでも重要になってくる言葉ですので、流し読みするよりも調べた方が絶対知識として身につきます。

さて、続きです。

<alt>←代替テキスト、これは必須です。画像が表示されない時に文字で表示してくれます。

<title>←カーソルを画像の上に合わせた時に表示される補足説明です。

<width>←画像の幅です。px単位。

<height>←画像の高さです。これもpx単位。

これらの要素・属性をひとくくりにしてあげる事により、画像の挿入ができます。

画像を貼ってみますね。

image

 

試しに、画像の上にマウスのカーソルを当ててみてください。

文字が出ましたか?出た場合、それが<title>で指定した文字になります。

どんな風に記載されているかちょっと見てみましょう。

 

<p><img class="クラス名" title="地元の風景です" src="http://写真のあるファイルの位置と名前.jpg" alt="image" ></p>

<img>はインラインレベルなので、ブロックレベルである<p>でかこってあげています。(これ、囲わない人もいるんですよね。実際どうなんだろ?教えて詳しい人!)

これに+、大抵の場合はwidth="数値" height="数値"が加わり、ひとつのかたまりが完成します。

 

画像をそのままリンクにする事も可能です。

<a href="URL" target="_blankにすると別タブが開きます"><img src="画像ファイルの位置と名前" alt="代替テキスト" title="補足説明" width="幅" height="高さ"></a>

<a>タグでくくっているので</a>でとじてあげます。

<a href~は、リンクの指示です。

 

徐々に複雑になってきましたが、書くことは決まっています。

素敵な画像を是非、貼ってみてくださいね!

というか、書けば書くほど自分の認識が本当に合っているのか不安になってまいりました。うっかり、ぷろふぇっしょなるの方々の目に止まりませんように(ガクブル