HTML入門トレーニング

画像を挿入する

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLに画像を挿入する方法について学びます。
講師:
09:07

字幕

このレッスンでは HTML に 画像を挿入する方法について学びます 画面ではブラウザーでサンプルファイルの HTML を開いているところです HTML の中には サウスカロライナ州の画像が表示されています このようにページの上に画像を配置するには img タグを使います img タグを使って画像を配置すると ブラウザーではその img タグを 画像に置き換えて表示すると考えられます つまり ブラウザーは img タグに書かれた情報に基づいて その画像を読み込み その img タグと置き換えて表示する という仕組みになっています img タグに使える属性には 様々なものがあります 例えば src 属性 source 属性では その画像へのパスを入力します alt 属性を使うと その画像の代替テキスト 代わりのテキストを入力することができ スクリーンリーダーや 他の補助的なブラウザーに 非常に役に立ちます また width 属性 height 属性などの 幅や高さを指定することもできます これらはオプションではありますが ブラウザーに画像の幅や高さを指定して 表示することができます この幅や高さは 省略すると ブラウザーは 画像本来の幅と高さで 表示します 実際にコードを確認してみましょう エディターで同じ HTML を開きます 少しスクロールすると ここに 先ほどの画像を表示しているための コードがあります これが img タグです この画像は 一つの タグ 段落の中に含まれています img タグでは src 属性 src 属性を使って その画像へのパスを指定できます ここでは 「_images」 というディレクトリの下にある 「lowcountry.jpg」 という画像を読み込んで 表示する という指定になっています ここでは画像ファイルへのパスを 相対的に指定しています 「相対」とは この画像ファイルが HTML から見てどこにあるか ということを示すという意味になります 画面の左側を見ると HTML ファイルと同じ階層に 「_images」 というディレクトリがあります このディレクトリの中には 「lowcountry.jpg」 と 「sc_flag.png」 という 2 つの画像ファイルが入っています そのため この 「lowcountry.jpg」 という画像は HTML から見ると 「_images」 ディレクトリの中の 「lowcountry.jpg」 という風に言うことができます そのため この src 属性では HTML から見て 「_images」 ディレクトリの中の 「lowcountry.jpg」 という風に指定しているのです このパスの指定は 非常に重要です このパスの指定が 一文字でも間違っている場合 画像は表示されません 例えば この頭のディレクトリ名 本来はアンダーバー「_」が 先頭についていますが ここで 「_」 がなかった場合 コードを保存してブラウザーで表示すると 画像は表示されません このように 一文字間違えただけで 画像が表示されないということになりますので 画像のパスを入力する際は 慎重に入力をしてください src 属性で画像へのパスを指定したら その後は width 属性や height 属性を使って 画像を表示する時の幅や高さの値を 指定することができます ここでは 幅を 300 ピクセル 高さを 300 ピクセルに指定しています 試しに 幅を 400 ピクセルに変更して 保存 ブラウザーで表示してみましょう 画像が 少し変形されて表示されています 幅 400 ピクセル 高さ 300 ピクセルで表示されていますが これは実際の画像の比率 寸法よりも 違う寸法になっています このように 画像本来の大きさよりも 大きく表示することは あまりお勧めしません また 本来の比率と変えて 比率をゆがめた状態で表示することも 美しく表示されませんので お勧めできません コードエディターに戻って 幅を 300 ピクセルに戻しておきましょう そして属性の最後に alt 属性を使って テキストが入力されています この alt 属性は この画像がもし表示されなかった場合に 代替 代わりにこのテキストを表示する という指定です また 画像が表示されないブラウザーや スクリーンリーダーなどでも ここの値が使われます そして もう一つ重要な点として img タグは 終了タグを持ちません head タグの中で使う meta タグや 改行を示す br タグなどと同じように このように img タグ 単体で使用します ここまでの内容をふまえて 一番下の行に 新しく画像を表示してみましょう img タグを使って 画像を挿入していきます 画像へのパスは source 属性 src 属性で指定します 属性の値は HTML からのパスを指定します 現在使っているコードエディター Brackets では このようにパスを入力するシーンになると 相対的な値が 自動的に表示されるようになっています ここで指定したい画像は 「_images」 ディレクトリの 下にありますので このまま 「_images」 を選んで [Enter] を押します すると自動的に 「_images/」 という値が入力されました さらにこの 「_images」 の中には 2 つの画像ファイルがありますので こちらもコードエディターの Brackets の機能を使って 候補が表示されています ここでは 「sc_flag.png」 という画像を表示しますので こちらを選んで [Enter] キーを入力します Brackets を使うとこのような機能は 有効になっていますが 他のコードエディターでも同じような コードの補完が使えるエディターは 多くあります 一度これでタグを閉じて保存し ブラウザーで確認してみましょう 下にスクロールすると このように 2 つ目の画像は 表示されています それでは src 属性以外の属性についても 入力しておきましょう src 属性の後ろにスペースを入力して 今度は幅と高さを入力していきます 幅は width 属性を使って 400 ピクセルに 高さは height 属性を使って こちらも 400 ピクセルに入力します そして最後に 画像が表示されなかった時のための 代替テキストを alt 属性を使って 入力します ここでは この画像の内容を示すテキストを 入力しておくのがいいでしょう 旗の画像ですので South Carolina flag と 入力しておきます コードを保存し ブラウザーで確認すると 先ほどと見た目は変わっていませんが 内部的には 重要な幅や高さ 代替テキストといった値が 入力されています これらの属性も忘れず入力するようにしましょう 少し上に戻ると 元々表示されていた画像の横に テキストが回り込んで表示されています この時 画像をテキストの右側に回り込んで表示したい といったケースがよくあります コードエディターに戻りましょう HTML5 以前の HTML では 画像を表示する img タグの属性として align 属性というものがありました この属性ではテキストと画像の 回り込みの関係を 属性の値として指定すると ブラウザーで表示した時に 画像がテキストのどちら側に回り込むか ということを指定できました しかし 現在では このような表示方法を規定することは CSS で行うようになっています そのため align 属性は HTML5 では使いませんので 注意してください 古い HTML などを見るとまだ align属性を使っているものもありますが HTML5 では このような画像のレイアウトは CSS で行います このレッスンでは HTML に 画像を挿入する方法について学びました

HTML入門トレーニング

HTMLはWebページを作るうえでもっとも重要な言語です。これがきちんと定義されなければ、Webページは正しく表示されません。このコースではHTMLの成り立ちから基本的な構文の書き方、さまざまなタグの意味やその使い方まで幅広い内容を学ぶことができます。またHTMLと並んで重要な言語であるCSSやJavaScriptについても、それぞれその概要を説明します。

5時間43分 (48 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年05月01日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。