HTMLで画像挿入の方法について解説!概要からサンプルコードまで【初心者向け】
  • facebookページ
  • twitterページ
  • 2020.06.03

    HTMLで画像挿入の方法について解説!概要からサンプルコードまで【初心者向け】

    HTMLの学習を始めたばかりの方は、画像挿入の方法についてまだ何も知識がない状態かも知れません。

    Webサイト作成において、画像挿入は頻出処理の1つであるため、しっかりと理解しておくことが大切です。

    本記事では、HTML初心者の方向けに画像挿入の方法について、概要からサンプルコードを交えた解説まで、順にご紹介していきたいと思います。

    HTMLで画像挿入に使用するのはimgタグ


    HTMLで画像を挿入するためには「imgタグ」を使用します。imgはimageの略称です。

    imgタグの記述方法

    imgタグの記述方法は下記のようになります。

    src属性のみ必須属性と指定されており、Webサイト上に表示する画像のパスを指定します。

    最低限これだけ記述すればWebサイト上に画像を表示することが可能です。

    ポテパンダの一言メモ

    imgタグには閉じカッコは不要です。

    HTMLでの画像挿入:imgタグの属性を把握しよう


    HTMLでの画像挿入に使用するimgタグで、設定可能な属性について確認していきましょう。

    今回はよく利用される属性のみに絞ってご紹介していきます。

    • src属性(必須)
    • alt属性
    • width属性
    • height属性
    • align属性

    src属性(必須)

    src属性では、挿入したい画像のファイルパスを指定します。

    パスの指定方法には「相対パス」と「絶対パス」を利用することが可能です。

    このようにファイル名だけを画像パスとして指定した場合、htmlファイルと同階層にある「sample.jpg」ファイルが挿入されます。

    一方で、絶対パスを指定することで別のWebサイトから画像を引用することも可能です。

    ポテパンダの一言メモ

    他のWebサイトからの画像を使用する場合は、著作権や利用規約に従った形で利用するようにしましょう。

    alt属性

    alt属性は、画像が表示出来なかった場合に代替文字として表示するテキストを指定します。

    ブラウザが何らかの理由により画像を表示出来なかった場合、alt属性に指定したテキストがWebサイト上に表示されます。

    width属性

    width属性では、画像の横幅をピクセル単位またはパーセンテージで指定することが可能です

    単位を指定しなかった場合には、デフォルトでピクセルが指定された状態となります。

    ポテパンダの一言メモ

    width属性と後述するheight属性の両方を指定しなかった場合には、元画像のサイズで表示されます。

    height属性

    height属性では、画像の縦幅をピクセル単位またはパーセンテージで指定することが可能です。

    基本的な使い方はwidth属性と同じです。

    ポテパンダの一言メモ

    ちなみにwidth属性・heiht属性どちらかしか指定しなかった場合、もう一方の値は元画像の比率に従って自動で決定されます。

    align属性

    align属性では、画像とテキストの配置を決定することが可能です。

    「top」「middle」「bottom」「right」「left」の値を指定することで画像とテキストの位置関係を決定していきます。

    具体的なイメージは後述するサンプルコードでご確認ください。

    HTMLでの画像挿入:サンプルコードで動きを確認しよう


    では実際にHTMLでの画像挿入をサンプルコードで確認していきたいと思います。

    各属性の動きを確認するサンプルコード

    alt属性以外の各属性の動きについて確認していきたいと思います。

    index.html

    サンプルコードをブラウザ上で表示した結果が下記となります。

    align属性に設定した値の違いをサンプルコードで確認しよう

    次にalign属性の値によって表示される内容の違いを確認していきましょう。

    index.html(top, middle, bottom)

    サンプルコードをブラウザ上で表示した結果が下記の通りです。

    次にalign属性に「left」と「right」を指定した場合の動きを確認してみます。

    index.html(left, right)

    サンプルコードをブラウザ上で表示した結果が下記の通りです。

    ポテパンダの一言メモ

    ちなみに<br clear=”all”>を設定しなかった場合、pタグに記述した「align属性にrightを指定」のテキストも上の画像の右側に回り込んだ状態で表示されてしまいます。

    一度実際に試して動作を確認してみてください。

    さいごに:HTMLでの画像挿入はWebサイト作成の必須知識


    本記事では、HTMLでの画像挿入の方法について、概要からサンプルコードでの動きの確認を行ってきました。

    Webサイト作成において、画像挿入は必ずといって良いほど頻繁に利用することになります。

    基本をしっかりと抑えた上で、Webサイト作成に何度も挑戦し、HTMLでの画像挿入を使いこなせるようになりましょう。



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE