コーディングで画像挿入する時の
注意点とよくあるトラブルの対処方法

• 画像を入れるコードを書いたのに表示されない
• 画像が縦に伸びてしまう
• 画像が希望の位置に表示されない
• 画像のサイズが重くページ表示に時間がかかってしまう

こんな悩みを解決できる記事になっています！

この記事で紹介する「コーディングにおける画像挿入時の注意点」の知識を身につければ、初心者で起こりがちなミスを防げます。また、使用画像の扱い方によってページの表示速度も変わるので、コーディングの際には画像の適切な加工・調整が大切です。

記事前半では「画像挿入時の注意点」について、後半では「よく起こるトラブルの対処法」について解説するので、ぜひ参考にしてみてください。

この記事を読み終えることで、コーディングで画像を入れる時に知っておきたい注意点やミスを理解して効率よく正しいコードが書けるようになります。

記述例を参考に、ぜひ取り組んでみてください！

【デザスタ公式LINE限定】200分超えのデザイン完全攻略コンテンツを今すぐGET！

コーディングにおける画像挿入

コーディングにおいて、画像挿入は非常に重要なスキルです。記述するコードはシンプルですが、正しい方法で画像を挿入すれば見た目を良くするだけでなく、情報をより効果的に伝える手助けをします。実際に、HTMLで画像を挿入するコードは次の通りです。

挿入画像のURLを記述する「src属性」は必須事項ですが、同様に「alt属性」は画像が適切に表示されないときに代わりとなる説明を表示するので、検索エンジンでWebページの検索結果を上位に表示させる施策であるSEO対策にも役立ちます。コーディング時の画像の扱い方について、詳しくはこちらの記事をご覧ください！

check!!

【初心者必見】コーディング時の画像の扱い方を徹底解説

2025.02.25

コーディング時に「この位置に画像を入れたいけどうまくいかない」「背景に画像を入れる方法がわからない」と思ったことはありませんか。この記事を読んで、HP作成で必須となる画像の扱い方を理解していきましょう。

コーディングで画像挿入する時に気をつけるポイント5つ

画像をWebサイトに挿入する際、ただ単にimgタグを使って画像を入れれば良いという訳ではありません。ここではコーディングにおける画像挿入時の重要なポイントを5つ紹介しますので、クオリティの高いサイト作りのためにもしっかり押さえておきましょう。

1. ファイル形式を使い分ける

Webサイトで使用するファイル形式は複数あります。用途に応じて画像のファイル形式を使い分けることで、サイトの表示速度や画質が大きく変わります。よく使用するファイル形式は以下の通りです。

1. JPEG(ジェイペグ)
2. PNG(ピング)
3. GIF(ジフ)
4. WebP(ウェッピー)

① JPEG(ジェイペグ)

ファイルサイズが小さいながらも色数が多く高画質を保てるため、写真やグラデーションの表示に使われるファイル形式です。一方で、背景透過には対応していないため、透明にしたい部分がある場合には使用できません。

② PNG(ピング)

JPEG同様、色数が多く背景透過機能もあるため、透明な背景が必要な場合や画像上に配置したい場合に使われるファイル形式です。ただし、色数が多くなるほどファイルサイズが大きくなるため注意が必要です。

③ GIF(ジフ)

Web上で簡単なアニメーションを入れる場合に使われるファイル形式です。ファイルサイズは小さいものの、色数が256色と限られているため写真やグラデーションの表示には不向きです。

④ WebP(ウェッピー)

JPEG、PNG、GIFのメリットを兼ね備えたファイル形式で、以下に対応しています。

• 豊富な色数
• グラデーション
• アニメーション表現
• 透過処理

ただし、比較的新しいファイル形式のためブラウザによっては対応していない場合があります。使用の際は注意しましょう。

ファイル形式についてより詳しく知りたい方はこちらの記事をご覧ください！

check!!

【もう迷わない】10個の画像ファイル形式の違いを徹底解説！用途別におすすめも紹介

2024.11.28

デザインを作って保存をする際、様々なファイル形式があって保存方法に迷ったことはありませんか？ ファイル形式や用途を覚えておくと、適切な画質・サイズの画像にすることができ、デザインの品質向上にもつながります。 より良いデザインを作るために欠かせない、画像についての知識を深めるために必読の内容となっています。ぜひ最後までお読みください。

2. HTMLとCSSを使い分ける

画像挿入の際のHTMLとCSSの使い分けは、誰が見てもわかりやすいコードを書くことや効果的なSEO対策にとっても大切なポイントです。

表示する要素内で必要不可欠な画像はHTMLで挿入し、なくても困らない画像または装飾として使う画像はCSSで挿入します。また、HTMLで挿入した画像のサイズや余白等をCSSで細かく調整することで、他の要素とバランスが取れ、見た目の整った分かりやすいサイトが作成できます。

HTMLとCSSの使い分けのポイントは以下の通りです。

	画像表示	使用コード	使用例
HTML	必須 ※画像がないと文章の内容が 伝わらない場合	imgタグ	・バナー画像 ・サムネイル画像 ・地図 ・見出し画像
CSS	不要 ※画像がなくても意味が伝わる場合 ※装飾を目的としている場合	background-imgプロパティ	・背景画像 ・アイコン画像 ・写真や要素を含む枠線

3. 画像にレイアウト要素を入れない

画像のレイアウトを組む際は、HTMLではなくCSSを使って管理するようにしましょう。HTMLに画像のサイズや位置などのレイアウト要素を直接記述すると以下のようなデメリットが生まれます。

CSSでレイアウトを管理することでコードが見やすくなり、修正も簡単になります。また、CSSで画像のサイズを指定すると、異なるデバイスに対応したレスポンシブデザインも可能になります。

4. 画像の書き出しはRetinaディスプレイに対応させる

Retinaディスプレイとは、Apple社の製品で使われる高解像度・高画素密度のディスプレイを指します。一般的なディスプレイの解像度が100〜200dpiであるのに対し、Retinaディスプレイは解像度が300dpi以上のため、非常にクリアで美しい画像表示が可能です。

Retinaディスプレイと一般的なディスプレイの解像度の差により、Windows製品では問題なく綺麗に見える画像でも、Retinaディスプレイではぼやけて見えてしまいます。そこで、Retinaディスプレイでも綺麗に画像表示させるためには通常の2倍の解像度の画像を用意することが必要です。例えば100pxの画像を表示する場合、Windows用で100px、Mac用で200pxの画像を用意して調整します。

5. 著作権侵害を避ける

他のサイトで使用されている画像の無断使用は著作権侵害に当たる行為なので、十分に注意しましょう。フリー素材や自分で用意した画像を使用すれば問題ありませんが、どうしても他サイトの画像を使用する必要がある場合は、画像の出典を明記することが大切です。この他、画像を引用する際は文化庁が定める以下の点を抑えておきましょう。

引用元）https://www.bunka.go.jp/seisaku/chosakuken/textbook/index.html

デザイナーが知っておいたほうがいい著作権について、こちらの記事で解説しています。トラブル回避のポイントも紹介しているので、気になる方はぜひチェックしてみてくださいね。

check!!

【知らないと怖い】著作権とは？デザイナーが知っておくべき権利やルールを徹底解説

2025.02.06

デザイン制作と切り離せない著作権。デザイナーを守る権利でもあれば、侵害してしまうと大きなトラブルにもつながる重要な権利です。この記事では、難しい著作権についてわかりやすく解説をしています。またクライアントと著作権にまつわるトラブルが起きないようにしておくべきことや侵害しないための調査方法などを紹介しています。ぜひ参考にしてくださいね！

画像挿入時によく起こる問題と解決方法4選

Webサイトにおいて画像を使うと次のようなメリットがあります。

メリットが多い一方で、画像を挿入する際にはさまざまな問題が発生することがあります。ここではよく起こる問題とその解決方法について4つ解説します。ポイントを押さえて正しく画像を活用していきましょう。

1. 画像表示の設定をしているのに表示されない

画像の表示設定をしているにもかかわらず画像が表示されない場合、主にHTMLもしくはCSSの記述ミスに原因があります。よく起こる3つのパターンについて、それぞれのチェック項目を確認していきましょう。

① HTMLで画像が表示されない

HTMLで画像を挿入しても表示されない場合「imgタグ」内を確認します。主なチェック項目は次の6つです。

1. <img>と併せて</img>(とじタグ)を書いていないか…imgタグは空要素のため</img>は記述しません。

2.画像が入っているフォルダを指定しているか…指定するフォルダが間違っていたり、フォルダ名に誤りがあったりすると表示されません。

3.パスを正しく記述しているか…パスの書き方に誤りがあると、画像の場所を特定できないため表示されません。

4.スペルミスがないか…「src→scr」や「alt→art」など、スペルミスがあるとブラウザ上で表示されません。

5.全角の文字やスペースがないか…コードを記述する際、全角の文字やスペースが含まれていると反映されません。ただし、テキスト情報を記述するalt属性では、全角で入力して問題ありません。

6.拡張子を書き忘れていないか…画像ファイル名そのものが間違っていると画像は表示されません。

② 背景画像が表示されない

背景画像は、imgタグで画像を入れる時とは仕組みが異なるので、チェック項目にも違いがあります。

1.HTMLで要素と高さを記述しているか…背景画像は要素の範囲に対して表示されるため、まず要素そのものの記述がないと表示されません。また、高さが指定されていない場合「要素の範囲がない＝背景画像の設定が反映されない」ことにより画像が表示されません。

2.画像が入っているフォルダを指定しているか…指定するフォルダが間違っていたり、フォルダ名に誤りがあったりすると表示されません。

3.パスを正しく記述しているか…imgタグを使用する場合は「htmlファイル～画像」までの道のりを記述しますが、背景画像の場合は「cssファイル～画像」までの道のりを記述しないと画像が表示されません。

4.スペルミスがないか…「background-image→bakgrond-img」や「background-color→background-colar」など、スペルミスがあるとブラウザ上で表示されません。

5.全角の文字やスペースがないか…コードを記述する際、全角の文字やスペースが含まれていると反映されません。

6.拡張子を書き忘れていないか…画像ファイル名そのものが間違っていると画像は表示されません。

③ 画像が正しい位置に表示されない

画像が正しい位置に表示されない場合、CSSで指定したプロパティが効いていない可能性が高いです。画像の表示位置を調整するにはプロパティ「object-position」を使用します。使用方法についてはこちらの記事を読んでみてください。

check!!

【初心者必見】コーディング時の画像の扱い方を徹底解説

2025.02.25

コーディング時に「この位置に画像を入れたいけどうまくいかない」「背景に画像を入れる方法がわからない」と思ったことはありませんか。この記事を読んで、HP作成で必須となる画像の扱い方を理解していきましょう。

チェック項目は次の通りです。

1.値を正しく指定しているか…object-positionを使用する場合、値（数値・%・キーワード・オフセット）を使用します。値が記述されていない、もしくは正しく記述できていない場合、プロパティが効かず指定した位置に画像が表示されません。

2.1つの画像に対して重複して設定していないか…CSSでは、一番下に書いているコード（設定）が優先されます。そのため、1つの画像に対して複数の設定をしていた場合、最初に記述した位置には表示されません。

3.セレクタを正しく記述しているか…CSSは以下の要素で構成されます。

• セレクタ
• プロパティ
• 値

特にセレクタは設定の対象を指すため、正しく記述できていないと設定が反映されません。例えばclaas名の場合は「.（ドット)」id名の場合は「#（シャープ）」を前に記述するといったルールがありますので、間違わないように気をつけましょう。

4.スペルミスや記入漏れがない…CSSではセレクタの後に「{}（波カッコ）」その中のプロパティと値の間に「：（コロン）」値の最後に「;（セミコロン）」が必要です。これらの記述ができていないとプロパティの指示が完了せず正しく反映されません。

5.全角文字やスペースがないか…コードを記述する際、全角の文字やスペースが含まれていると反映されません。ただし、コードの説明やメモとして使うコメントアウト内であれば全角が入っていても問題ありません。

2. 画像の比率が崩れてきれいに表示されない

HTMLやCSSの設定によって画像の縦横比が崩れたり、画像が縦に伸びてしまう原因は主に2つあります。

①HTMLやCSSで異なる比率で高さと幅を指定している

画像のサイズはHTMLとCSSで指定できますが、このとき比率を無視してしまうと以下のように画像が引き伸ばされてしまいます。

そこで、HTMLでは画像の元サイズを正しく記述し、CSSで比率を維持した状態でサイズを調整するようにしましょう。よく使われる設定は、横幅いっぱいに画像を表示させる「width:100%」と、横幅に合わせて高さを自動調整する「height:auto」です。この設定を行うことで、画像の元の比率を保ちながら要素に合わせてサイズを調整できます。

ただし、画像を配置する要素の高さが足りない場合は画像の一部が切れて表示されるため「height:auto」を設定するなど注意が必要です。

②CSSのプロパティ「align-items」が初期値になっている

CSSで画像を横並びにする「display:flex;」と併せて使用するプロパティ「align-items」の設定に注意が必要です。このプロパティは、親要素に対する子要素の配置方法を指定できます。

「align-items」の初期値は「stretch」のため、そのまま使用すると以下のように表示されます。

これを防ぐために、画像の配置でalign-itemsを使用する際はstrech以外の値を使用します。

stretch	親要素の高さに合わせて子要素の高さを調整して配置
flex-start	親要素の上側に子要素を上揃え
flex-end	親要素の下側に子要素を下揃え
center	親要素の中央に子要素を中央揃え
baseline	子要素のテキストが下揃えになるように配置

CSSのプロパティは様々な設定ができ便利ですが、初期値や高さの指定によっては画像の表示がうまくいかないこともあるので、基礎知識をおさえて活用していきましょう。

3. 画像が粗い

画像が粗くなる原因は、サイト上に表示する幅と高さに対して元の画像サイズが小さいことです。小さい画像を表示サイズに合わせて引き伸ばすため、画像が粗くなってしまいます。

画像を粗くしないための3つのポイントを押さえておきましょう。

1. 画像編集ソフト（Photoshop等）で表示するサイズに合わせて画像のサイズを調整する
2. 使用する画像に適したファイル形式を使用する　
3. Retinaディスプレイ用に画像を用意する　

Retinaディスプレイとは、Apple社の製品で使われる解像度が300dpi以上の高解像度・高画素密度のディスプレイのことです。あらかじめ画像を用意することで非常にクリアで美しい画像表示が可能になります。

綺麗に画像を表示するためには、表示サイズに適した十分な解像度を持つ画像の使用が大切です。

4. ページが重く表示に時間がかかる

ページの表示に時間がかかることは離脱率やSEOにも影響しますので、訪問者がストレスなくページを閲覧できるようしっかり対策しておきましょう。

画像の容量が大きい

ページが重くなる原因のほとんどは画像の容量が大きいことです。画像が綺麗に表示されるかだけでなく、表示サイズに合わせたサイズ調整ができているかも確認しましょう。

例えば、幅2000px×高さ1000px（容量1MB）の画像を使い、CSSで幅1000px×高さ500pxに設定した場合、画像はきれいに表示されますが容量が1MBと非常に重くなります。画像の容量が重くなるほどページの表示に時間がかかり、SEOにも影響しますので1枚当たり100〜200KB以下になるよう調整しましょう。画像を圧縮するツールもありますので、活用してみてください。

また、Retina対応として高解像度の画像を使用する際、Windowsでも高解像度の画像を使用してしまうと容量が大きくなります。そこでMacでは高解像度、Windowsでは通常の解像度と2種類の画像を準備して読込時間が遅くならないようにしましょう。

必要ないコードを記述している

Webサイトは、HTMLやCSS、Javascriptといったコードを閲覧用に変換する「レンダリング」によって画面上に表示されます。その際、外部ファイルであるCSSやJavascriptの読込・変換処理を行う間はHTMLの読み取りができなくなります。CSS内で余分な空欄やコードを記述していたり、不要なJavascriptを読み込んだりするとその分ページ容量が大きくなるため、画像表示に多くの時間が必要です。必要なコードのみ記述し、外部ファイルを最小化しましょう。

まとめ

今回は、コーディングにおける画像挿入時の注意点や気を付ける点についてご説明しました。

今回紹介した画像挿入時の注意点やトラブルを防ぐ方法を知っていると、サイト内の画像のクオリティが上がるだけでなく、サイト全体の見やすさやコーディング時の効率アップにもつながります。ぜひ、実践していきましょう。

【デザスタ公式LINE限定】500分超えのデザイン完全攻略コンテンツを今すぐGET！