HTMLで画像を貼り付ける方法

PDF形式でダウンロード

ウェブサイトやSNSのプロファイルに画像を追加すると、ページが一段と魅力的になります。HTMLで画像を追加する方法は、HTML初心者のための基本レッスンとして取り上げられる頻度も高く、さほど複雑ではありません。

パート 1

パート 1 の 2:

画像を挿入する

PDF形式でダウンロード

1
画像をアップロードする　Picasaウェブアルバム、Imgur、Flickr、Photobucketなど、無料で利用できる画像ホスティングサービスは数多くあります。どのサービスを使うかは、利用上の注意をよく読んで決めましょう。中には低画質でしか保存できなかったり、閲覧者があまりにも多くなると（ホストの帯域幅の使用が一定の値を超えると）、画像の表示を停止するサービスもあります。
- ブログのホスティングサービスには、ブログ管理ツールで画像をアップロードする機能を提供しているものもあります。
- 有料のウェブホストを利用している場合は、FTPサービスを使用してサイトに画像をアップロードします。「images」ディレクトリを作成し、画像ファイルはまとめて整理するようにしましょう。^{[1]X出典文献}
- 他のサイトに掲載された画像を使用したい場合は、サイト作成者から許可を得ます。使用許可が下りたら、画像をダウンロードし、画像ホスティングサイトにアップロードします。
2
HTMLファイルを開く　画像を貼りたいページのHTMLファイルを開きます。
- ウェブフォーラムで画像を挿入する場合は、投稿する記事に直接画像のURLを入力することができます。ほとんどのフォーラムでは、HTMLではなく独自のシステムを使用しています。画像が上手く貼れない場合は、他の投稿者にやり方を聞きましょう。
3
imgタグを使って画像を貼る　画像を挿入したい部分のHMTLコード内での位置を確かめます。そこに<img>と入力します。このタグは空要素なので、終了タグは入力せずに単独で使用します。画像の表示に必要な指定はすべて、2つの山括弧の間に記述します。
- <img>
4
画像のURLを確認する　画像をアップロードしたホストサイトにアクセスします。貼り付けたい画像を右クリックし（Macの場合はControlキーを押しながらクリックし）、「画像の場所をコピー」を選択します。また、「画像の表示」をクリックし、画像だけを表示させ、アドレスバーのURLをコピーすることもできます。
- 自分のサイトの画像ディレクトリに画像をアップロードした場合は、「/images/画像ファイル名」と入力してリンクを張ります。正常に表示されない場合は、恐らくimagesディレクトリが別のフォルダの中にあります。ルートディレクトリの直下にimagesディレクトリを移動させましょう。
5
src属性にURLを指定する　周知でしょうが、HTML属性はタグの中に挿入します。src属性は「source」の略で、画像の場所をブラウザに指示するものです。「src = ""」と入力し、画像のURLを引用符の間に貼り付けます。以下は参考例です。
- <img src="http://www.exampleimagehost.com/my-cute-dog.jpg">
6
alt属性を追加する　ここまでの作業だけでも画像は表示されますが、もし可能であればalt属性を追加しておきましょう。画像の表示に失敗した場合、alt属性で指定したテキストが代わりに表示されます。他にも、検索エンジンに画像の内容を認識させたり、文字読み上げソフトに読ませることで視覚障害を持つユーザが画像の内容を理解できるなどの、重要な役割があります。^{[2]X出典文献} 下記の例を参照にして、引用符の中のテキストをカスタマイズしてみましょう。
- <img src="http://www.exampleimagehost.com/my-cute-dog.jpg" alt="How.com.vn 日本語: 飼い犬がミカンを食べている写真">
- ページの中でその画像がさほど重要な意味を持たない場合、alt属性のテキスト部分は（alt = ""）のように未入力のままにします。^{[3]X出典文献}
変更したHTMLファイルをサイトに保存します。編集し終わったページを開くか、既にページを開いている場合は表示を更新すると、画像が追加されているはずです。画像の表示サイズがおかしい場合、あるいは別の不都合を見つけた場合の処理方法を次のセクションで説明します。
広告

パート 2

パート 2 の 2:

画像の調整（任意）

PDF形式でダウンロード

1
画像サイズの変更　無償の編集ソフトウェアを使用して画像のサイズを変更し、更新したファイルをアップロードするのが一番いい方法です。HTMLでwidthやheightを指定して画像を縮小あるいは拡大させることもできますが、この方法ではブラウザの種類によって表示形式が違ってくるので、ページの一貫性が失われてしまいます。場合によっては（ごくまれに）表示エラーが発生することもあります。すぐに画像調整が必要な場合は、以下の形式を使用しましょう。
- <img src="http://example.com/example.png" alt="How.com.vn 日本語: display this" width=200 height=200> （HTML5のピクセル数、または携帯電話対応の「CSSピクセル」を使った指定）^{[4]X出典文献}^{[5]X出典文献}
- あるいは <img src="http://example.com/example.png" width=100% height=10%> （ウェブページのサイズに対するパーセンテージあるいは画像を含むHTML要素のパーセンテージを使った指定）
- 属性（widthあるいはheight）のどちらか一方のみを入力した場合、ブラウザは幅と高さの比率を維持したまま指定のサイズで表示します。
2
ツールチップを追加する　title属性を使用して、画像に関する追加のコメントや情報を表示することができます。例えば写真家のコピーライト表記を追加する場合は、以下のようになります。ここで指定するテキストは通常、カーソルを画像の上に置いた際に表示されます。
- <img src="http://example.com/example.png" title="J. Godfrey氏撮影">
3
画像をリンクにする　画像をリンクにするには、imgタグを <a></a> のハイパーリンクタグの中に挿入します。以下は参考例です。
- <a href="http://www.urloflink.com"><img src="http://urlofimage.com/image.gif"></a>
広告

ポイント

もしもの場合に備えて、コンピュータに保存した画像ファイルはバックアップをとりましょう。
GIF画像はロゴや漫画に適した形式です。写真などの複雑な画像はJPEG形式を使用する方がよいでしょう。
URLを入力する際は、ファイルの拡張子（.jpg、.gif等）まで含めましょう。
使用するのは.gif、.jpeg、.jpg、または.pngのファイル形式の画像にします。^{[6]X出典文献} ブラウザによって違いはありますが、ほとんどの場合、その他の形式の画像は正しく表示されません。

注意事項

画像を貼る際、他のサイトのURLを挿入する「直接リンク」の使用は避けましょう。直接リンクは相手のサイトの訪問数は増やさず、帯域幅だけを浪費させてしまいます。この方法はエチケットとして失礼なだけでなく、リンク先のサイトがダウンした場合、貼った画像が消えてしまう不都合が発生します。また、相手が直接リンクを貼られたことに気付いた場合、画像を変更される可能性があり、知らないうちに自分のサイトの画像が意図しないものに変わってしまうことになります。^{[7]X出典文献}