One Step
Takeshi Blog

【入門】画像の貼り付け方を勉強しよう

how to use image

画像を表示する

画像を挿入するときに使うタグは「<img>」です。それに付随して、「src属性」と「alt属性」を使用します。

書き方としては、

<img src="使用する画像のパス" alt="画像の注釈">

基本的に要素は開始タグと終了タグで一対になりますが、img要素は開始タグのみになります。このように終了タグを使わない要素のことを「空要素と言います。

src属性の画像のパスとは?

パスとは、英語で書くと「path」となり、意味は「道、進路、道筋」のような意味になりますので、画像のある場所を示すための属性ということです。

path explain

例えば上の図で、赤の文字が今自分が開いているファイルとし、使用したい画像が青色の文字します。

赤から青までのパスを、「../images/programming/code_images.png」と表すことができます。

この..」は、一つ前の階層に戻るを意味します。

言葉で表すと、「一つ前の階層に戻って、imagesフォルダーに入って、その中のprogrammingフォルダーのcode_images.png」となります。

このように今居る位置からみた使用したいファイルの場所を書く書き方を「相対パスと呼びます。

絶対パスがきになるからは、「【入門】相対パスと絶対パスとは」を読んでみてください。

alt属性とは?

alt属性とは、何らかの理由でサイトに訪問した人が画像を表示することが出来なかった場合に、ここにはこんな画像が貼られていますという説明文を表すために書く場所です。

SEO対策としてもこちらは記載した方が良いとされています。検索ロボットがどんな記事でどんな画像が貼られているのか評価したりするので、少しでも評価を上げるために記載はしておきましょう!

高さと幅を決める

高さと幅を設定するときに使うCSSプロパティーは「height」と「width」です。基本的に、高さもしくは、幅のどちらか片方だけを設定した場合、縦横比は原寸サイズと同じになります。

こちらの記事もどうぞ!!