更新日: 2024 / 11 / 14

初めてでもできる！HTMLで画像挿入とカスタマイズする方法

カテゴリー: HTML&CSS 入門ガイド

HTMLで画像を挿入したり、挿入した画像のサイズや位置をカスタマイズする方法を紹介します。

画像の挿入はigmタグにURLを入力するだけなので一度わかればあとは簡単。

でも最初はうまく表示できなかったりすることもあるので、よくある問題の解決方法も合わせてサンプルコード付きで解説していきます。

  1. HTMLで画像が表示される仕組み

    1. サーバーに画像をアップロードする
    2. 画像の場所をURLで指定する

  2. HTMLで画像を挿入する方法

    1. 1.imgタグを書く
    2. 2.画像のURL(パス)を書く
    3. 3.画面をチェックする

  3. 挿入した画像が画面に表示されない問題の解決方法

  4. 挿入した画像の位置やサイズをカスタマイズする方法

    1. 画像のサイズを大きくしたり小さくしたりする
    2. 画像を中央に表示する

  5. まとめ

HTMLで画像が表示される仕組み

挿入する方法を紹介する前に、HTMLで画像が表示される仕組みについて確認しておきましょう。

ここがわからないと、なぜ画像が表示されないのかもわからないので永遠に画像表示できないという悪夢に悩まされてしまいかねません。

ホームページで画像を表示するためには最低限次の2つのことが必要です。

  • サーバーに画像をアップロードする
  • 画像の場所をURLで指定する

以下で詳しく解説します。

サーバーに画像をアップロードする

まず画像というのは.jpgとか.pngとかになっているファイルのことです。

HTMLで画像が表示される仕組み サーバーに画像をアップロードする

このような画像ファイルをホームページで表示するには、自分のパソコンではなくサーバーなどにアップロードしてブラウザで見れるようにしておく必要があります。

ちなみにこちらの記事では無料のFC2ホームページを使って画像のアップロードからホームページの作成方法まで解説しています。

無料なので初めてホームページを作る人はどんな感じか試してみることもできます。

-> FC2でHTMLを使ったホームページ作成方法

画像の場所をURLで指定する

画像をサーバーにアップロードできたら次は画像のある場所を指定する必要があります。

画像のある場所は以下のように書きます。これをURLとかパスと言ったりします。

https://storage.designup.jp/blog/html/html-image-01.png

上記の例ではホームページのドメインにあるblogというフォルダの中にあるhtmlというフォルダにあるhtml-image-01.pngという画像ファイルが指定されます。

ドメイン名やフォルダ名、フォルダの階層などはWebサイトによって全く異なるので注意してください。

ここまでの内容がわかればあとはHTMLのimgタグを使って画像を表示するだけです。

上記のURLの場合はこんな感じになります。altには画像の説明文を入れます。

<img src="https://storage.designup.jp/blog/html/html-image-01.png" alt="画像の説明文">

HTMLで画像を挿入する方法

ここからはHTMLで画像を挿入するやり方を詳しく解説していきます。

HTMLで画像を挿入するにはimgタグをHTMLコードないに配置して、画像のURLを書けばOKです。

次のような手順で画像を挿入することができます。

  1. imgタグを書く
  2. 画像のURL(パス)を書く
  3. 画面をチェックする

1.imgタグを書く

まず最初にimgタグを設置します。タグを書く場所は画像を表示したい位置です。

例えばホームページのロゴ画像を設置したい場合はheaderの位置にタグを設置することになると思います(実際にはHTMLコードによって異なります)。

<header>
  <h1>
    <img src="ここに画像のURLを貼り付け" alt="ここにホームページのタイトルを貼り付け">
  </h1>
</header>

2.画像のURL(パス)を書く

imgタグを設置したら画像のURLを記入します。記入する場所はsrc=""の""の中です。

domain-name.comというドメインのfolderというフォルダにlogo-image.pngという画像がある場合は次のようになります。

<header>
  <h1>
    <img src="https://domain-name.com/folder/logo-image.png" alt="ホームページ名">
  </h1>
</header>

3.画面をチェックする

画像のURLを記入できたらブラウザでチェックしてみましょう。

意図するところに画像が表示されているはずです。

挿入した画像が画面に表示されない問題の解決方法

もし画像がうまく表示されていなかったり、画面が真っ白で何もないという問題が発生した場合は以下のことをチェックしてみてください。

  • 画像のURL(パス)が間違っている
  • 画像がアップロードできていない
  • imgタグが正しく書けていない
  • CSSで非表示になっている

基本的にはURLの場所に画像があって、書き間違いがなければ正しく表示されると思います。

画像が表示されない状況と原因、解決方法について詳しくはこちらの記事をご覧ください。

-> HTMLで画像が表示されない場合の原因と修正方法

挿入した画像の位置やサイズをカスタマイズする方法

画像が問題なく表示されるようになったら、次は大きさや位置をカスタマイズして綺麗に表示できるようにします。

ここでは以下のようなカスタマイズ方法を紹介します。

  • 画像のサイズを大きくしたり小さくしたりする
  • 画像を中央に表示する

以下で具体的に解説します。

画像のサイズを大きくしたり小さくしたりする

画像の大きさはデフォルトだと下の画像サイズに合わせて表示されます。

なのでPhotoshopや画像編集ツールを使って細かくサイズを調整する必要があると思われがちですが、実はCSSを使えば簡単にサイズ調整が可能です。

画像サイズを調整するにはwidthで横幅、heightで高さを指定します。

.image-size {
  width: 300px;
  height: 300px;
}

この場合、横幅300px、高さ300pxで表示されます。

挿入した画像の位置やサイズをカスタマイズする方法 画像のサイズを大きくしたり小さくしたりする

ただ、この方法だと横長の画像の場合、横幅が圧縮されて表示されてしまいます。

横幅は300pxに指定して、高さは元の画像の縦横比に合わせたい場合は次のようにします。

.image-size {
  width: 300px;
  height: auto;
}

これで縦横比を維持したまま画像のサイズ調整が可能です。

画像を中央に表示する

画像入れるとデフォルトでは左寄せに表示されてしまいます。中央に表示したい場合は次のようにします。

<div class="image-center">
  <img src="画像のURLをここに貼り付け" alt="画像のタイトルをここに貼り付け">
</div>
.image-center {
  text-align: center;
}

imgタグを囲っている親タグ(ここではdivタグ)にtext-align: center;をつけることで中央に表示することが出来ます。

まとめ

ここまでHTMLで画像を挿入する方法を解説してきました。内容をまとめると以下のようになります。

  • imgタグを使って画像を挿入する
  • 画像はサーバーにアップロードして、正しいURLを指定する必要がある
  • 画像が表示されない場合は、サーバーに画像があるか、書き方が間違っていないかをチェック
  • 画像のサイズや位置をカスタマイズするにはCSSが必要

画像はホームページのメインビジュアルやロゴ、ブログのサムネイルなどあらゆるところで使用されるので、問題が発生したときにすぐ修正できるようになっておくと作業がはかどります。