HTMLで画像を挿入する方法

ウェブサイトやソーシャル・ネットワーキングのプロフィールに画像を追加することは、ページを華やかにする素晴らしい方法です。画像を追加するためのHTMLコードは簡単で、HTML初心者にとって最初のレッスンのひとつとなることがよくあります。

画像を挿入するためのサンプルHTML

パート1

画像の挿入

1. .Picasa Web Albums、Imgur、Flickr、Photobucketなど、多くの無料画像ホスティングサービスがあります。規約をよく読んでください。サービスによっては、画質を落としたり、閲覧者が多いと画像を削除したりするものもあります（ホストの帯域幅を使用するため）。

   • ブログホスティングサービスの中には、ブログ管理ツールを使って画像をアップロードできるものもあります。
   • 有料のウェブホストを利用している場合は、自分のサイトに画像をアップロードしてください。ファイルを整理しておくために、「images」ディレクトリを作成することをお勧めします。
   • 他のウェブサイトで画像を使いたい場合は、作成者に許可を求める。もし許可されたら、その画像を画像ホスティング・サイトにアップロードしてください。
2. HTMLファイルを開きます。画像を表示するウェブページのHTML文書を開きます。

   • フォーラムで画像を挿入しようとしている場合は、投稿に直接入力することができます。多くのフォーラムでは、HTMLの代わりにカスタムシステムを使用しています。うまくいかない場合は、他のフォーラム参加者に助けを求めてください。
3. imgタグから始めます。HTML本文の中で画像を挿入したい箇所を見つけてください。ここに<img>タグを記述します。これは空のタグで、閉じタグがなく独立しています。画像を表示するために必要なものはすべて、2つの角括弧の中に入ります。

   • <img
4. 画像のURLを見つけてください。画像がホストされているウェブページにアクセスします。画像を右クリックし（Macの場合はcontrolキーを押しながらクリック）、"画像の場所をコピー "を選択します。また、"View Image "をクリックして画像だけをページに表示し、アドレスバーにあるURLをコピーすることもできます。

   • 画像を自分のウェブサイトのimagesディレクトリにアップロードした場合は、/images/yourfilenamehereでリンクしてください。これがうまくいかない場合は、imagesディレクトリが別のフォルダの中にある可能性があります。ルート・ディレクトリに移動してください。
5. src属性にURLを記述します。すでにご存知かもしれませんが、HTMLの属性はタグの中に入れて変更します。src属性は "source "の略で、ブラウザに画像の場所を知らせます。src=" " と書き、引用符の間に画像のURLを貼り付けます。以下はその例です：

   • <img src="http://www.exampleimagehost.com/my-cute-dog.jpg"> です。
6. alt属性を追加します。技術的には、HTMLは画像を表示するために必要なものをすべて備えていますが、alt属性も追加するのがベストです。これは、画像の読み込みに失敗したときに表示するテキストをブラウザに伝えるものです。さらに重要なことは、検索エンジンがあなたの画像の内容を把握するのに役立ち、スクリーン・リーダーが視覚障害のある訪問者に画像を説明できるようにすることです。 この例に従って、引用符の中のテキストを変更してください：

   • <img src="http://www.exampleimagehost.com/my-cute-dog.jpg" alt="ミカンを食べる愛犬">。
   • 画像がページの内容にとって重要でない場合は、alt属性にテキストを含めないでください（alt=""）。
7. 変更を保存します。HTMLファイルをウェブサイトに保存します。編集したページにアクセスするか、すでに開いている場合はページを更新してください。画像が表示されるはずです。サイズが違っていたり、他の理由で気に入らない場合は、次のセクションに進んでください。

パート2

オプションの調整

1. 画像のサイズを変更します。最良の結果を得るには、 、新しいバージョンをアップロードしてください。HTMLを使用して幅と高さを設定すると、ブラウザに画像を縮小または拡大するように指示します。 ブラウザによって一貫性がないことがあり、（まれに）表示エラーの原因になることがあります。 迅速かつサービス精神旺盛な調整が必要な場合は、次の形式を使用してください：

   • <img src="http://example.com/example.png" alt="display this" width=200 height=200> (ピクセル数、またはHTML5ではより携帯電話向けの「CSSピクセル」)
   • または <img src="http://example.com/example.png" width=100% height=10%>（ウェブページの寸法の割合、または画像を含むHTML要素の割合）。
   • 1つの属性（widthまたはheight）だけを入力した場合、ブラウザはwidth:heightの比率を維持するはずです。
2. ツールチップの追加title属性を使って、画像に関するコメントや情報を追加することができます。例えば、ここにアーティストのクレジットを入れることができます。ほとんどの場合、このテキストは訪問者が画像の上にカーソルを置いたときに表示されます。

   • <img src="http://example.com/example.png" title="Photograph by J. Godfrey">とします。
3. リンクにする画像をリンクにもするには、<a></a>ハイパーリンクタグの中に画像タグを挿入します。以下はその例です：

   • <a href="http://www.urloflink.com"><img src="http://urlofimage.com/image.gif"></a> です。

この記事は、CC BY-NC-SAで公開されている「 HTMLで画像を挿入する方法 」を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。