メモ

メモを入力してみよう!


Lesson 03「画像を表示させてみよう!」

学習概要

imgタグを使ってホームページに画像を表示させてみましょう!

補足

■パスとURLとURI
ファイルの場所を示すものを「パス」と言ったり「URL(ゆーあーるえる)」「URI(ゆーあーるあい)」と言ったりもします。厳密には違うものですが、同じものだと思っていて大丈夫です。
■タグと属性
色々なタグには「属性」といった「オプション」のようなものをつけることができます。属性は「属性名="属性値"」という形の書き方をします。
属性をつける場合は、今回のようにタグ名の後に必ず半角スペース(空白)をいれるようにします。
属性を複数つけたい場合も、同じく属性ごとの間には半角スペースを入れます。

どのプログラミング言語もそうですが、半角スペースで区切ることで「その1つ1つが別の命令なんだ」ということがPCの方で理解できるようになります。

タグによってつけられる属性は違うので、使いたいタグはどんな属性がつけられるのか調べてみましょう。

この練習でわからない所を質問する※部活外の質問はできません

既に出ている同じ内容の質問やレッスン以外の質問には回答致しません。こちらから既出の質問・回答をワード検索できます。(仮入部部員は利用不可)

ログインが必要です

この練習への質問一覧

ログインが必要です

Lesson 03「画像を表示させてみよう!」 の内容※SEO用のため読めません

ではこれから画像を表示させていきましょう。

前回作ったファイルをそのまま使っていきたいと思います。
まずは新しくフォルダを作成しましょう。フォルダ名は何でも結構です。新しく作ったフォルダの中に前回作成したファイルをコピーします。コピーしたファイルを開くと前回と同じホームページが表示されるはずです。次に表示させる画像を用意しましょう。

今回はインターネット上から適当な画像をダウンロードしてきます。用意した画像を先ほど新しく作成したフォルダの中へ移動します。今回は画像の名前を [ sample.jpg ] とします。画像が準備できたらホームページのファイルを開きましょう。編集画面が表示されたら画像を表示させるプログラムを書いていきます。

画像を表示させるには タグというものを使います。タグを使い画像のパスを指定します。パスとは場所のことです。パスを指定するには [ src=" " ] で指定します。 [” ”] の中に画像のパスを入れていきます。

今回は [ sample.jpg ] とします。また [ alt=" " ] で画像の名前を入れることもできます。今回は飴の写真としたいと思います。これで画像を表示させるプログラミングは完了です。書き終わったら保存をしましょう。保存が終わったら再度ファイルを開いてみます。これでホームページに画像が表示されました。

はい、ではパスについて説明をしていきたいと思います。
画像のパスの指定方法なんですけども、この画像のパスというのは今編集しているHTMLファイル、これの場所を基準にして表示したい画像がどこにあるのかというのを指定してあげます。なので画像を別の場所へ移動してみたいと思います。また新しいフォルダを作ってもらって、画像をその中に入れてみてください。その状態でHTMLファイルを開いてみると画像の場所が分かりませんよっていうことで画像が表示されなくなります。先ほど指定していたパスはですね [ sample.jpg ] なのでこのHTMLファイルと同じフォルダにある [ sample.jpg ] という画像を表示してください、という意味になります。なのでこの場合のパスの指定方法は [image]フォルダの中にある [ sample.jpg ] を表示したいので[image/sample.jpg] という形にします。[ / ] はそのフォルダの中のという意味になります。そうするとまた画像が表示されます。

はい、いかがだったでしょうか。画像を表示させるにはタグを使って画像のファイルの場所を指定してあげる、ということですね。