4.imgタグの使い方

画像を表示するものが、imgタグです。オプションに、src="アドレス"を指定します。タグは、基本的にはアルファベットの大文字小文字は関係ありません。以後は、キィボードの半角入力をそのまま使って、小文字で表記します。

imgタグのポイントは、アドレスです。

●すでに、インターネットに公開されている画像を使う

ブラウザで開いた画像を、右クリックします。メニューから、画像アドレスをコピーします。

 

新 し い タ ブ て 費 ぐ 
新 し い ウ イ ン ド ウ て ぐ W ) 
シ ー ク い ト ウ イ ン ド ウ で 背 く ( G ) 
Pinte 「 est て リ ン ク を 背 く 
ロ NO F ョ に リ ン ク を き 信 
名 前 を 付 け て リ ン ク 先 を 保 存 凶 ... 
リ ン ク の ア ル ス を コ ビ - 旧 
新 し い タ ブ て 亘 像 を 弩 く 働 
名 前 を 付 け て 画 を を 保 停 Ⅳ ) … 
亘 像 を 」 ビ - ( v ) 
画 像 ア ド レ ス を コ ビ - ( C) 
( な ト 引 1 れ

 

すぐにメモ帳を開いて、張り付けます。

張り付けたアドレスの先頭にカーソルを入れて、タグカッコ img スペース エス・らアール・シー・イコール・ダブルクオーテーション を追加します。カーソルを最後に移動して、ダブルクオーテーション・タグカッコ閉じ を入れます。これを、拡張子htmlで保存します。保存したhtmlをWクリックで開き、画像が表示されるのを確認しますが、メモ帳はそのまま開いておきます。

●imgタグに、サイズを追加する

タグの中に、width= 数字 を追加すると、表示する画像の横幅を指定できます。昔は、データ量を減らすために、画像ファイルを表示するサイズに縮小しましたが、今は印刷などの再利用を考えて、画像ファイルは表示サイズより大きくしています。サイズ指定はwidth=で横幅、height=で高さを指定できますが、比率を正確に指定しないと画像がゆがみます。計算はブラウザに任せて、どちらかだけの指定で構いません。

画像を、実寸より縮小して表示している場合、右クリックで、画像を別ページで開けば、拡大画像が見られます。

 

https://i .p in mg. con/236x/06/ee/12/06eel 22bd9cged983e2f bC)5f99901637 . jpgl 
lesson2.htmI - 
Kltng src="https:// 
•lesson2.html - 
<irng src-"https://i 
. pi n i mg. corn/564x/06/ee/12/06ee 122bdgcged983e2fb05f99901637. jpg" > 
.pinimg. corn/564x/06/ee/12/06+122bdgcged983e2fb05f99901637. jpg"

 

新しいタグで開いたものが、右です。

ロ 
鬥 550n2 第 t 
鬥 師 ee122bd9 「 9ed98 ヨ e2fb05f9 x | 十 
X 
0 
〇 フ ァ イ ル ー C:/Users/winboys/Des 
上 t 
☆ 
臨 
の 
女 
朝 
朝 
新 し い タ フ で を 賈 く 0 
名 前 を 付 け て 画 像 を ) 
亘 を を コ ビ ー ( め 
画 を リ ン ク を コ ビ - ) 
Web て 画 を を 物 〒 す る ( 5 ) 
」 し ク シ ョ ン に 追 加 
ま 発 者 ツ - ル て ま 支 す 引 N )

 

●画像の配置を指定するタグ

imgタグのオプションに、更に align="left" を追加すると、画像はleft左に、アラインメント(alignment 配置の略)されます。これが無くても画像は左ですが、文字を画像の右に並べたいときは、このオプションで、画像を左に並べます。この下から

<img src="https://i.pinimg.com/564x/06/ee/12/06ee122bd9c9ed983e2fb05f99901637.jpg" width=300 align="left">

画像が、左に配置され、説明の文字は右に配置されます。<br>画像に高さがあるので、何行か配置できますが、自分で改行します。

<br clear=all>これで、画像の下に改行されます。

この上まで、コピーして貼り付けて、html拡張子で保存してください。

 

に 55 。 n2 。 ht 司 - メ モ 第 
ロ 
X 
フ ァ イ ル 第 第 旧 書 式 ) 表 示 ( Ⅵ ヘ ル ス 
画 擣 が 。 差 に 配 置 さ 、 説 明 あ 文 字 は 右 に 配 置 さ れ ま す 。 く b 。 ) 画 像 に 高 さ が あ る の て ・ 掎 矗 を 尋 = 占 分 で 改 行 し ま す 。 
く b 「 c 尾 a ← a Ⅱ > こ れ で 、 画 像 の 下 に 改 行 さ れ ま す 。 
鬥 に 驪 0 htm 
☆ の 朝 朝 
0 〇 フ ァ イ ル 1 0 / Us ぎ 5 / winboys / Desktop / 550n2. ht 
、 第 : : : た = ヤ : ・ 等 : - ま 強 画 像 が 、 左 に 配 置 さ れ 、 説 明 の 立 字 は 右 に 配 置 さ れ ま す 。 
、 3 み 画 像 に 高 さ が あ る の て 、 何 行 か 配 置 て き ま す が 、 自 分 て 改 行 し ま す 。 
こ れ で 、 画 像 の 下 に 改 行 さ れ ま す 。 
ロ 
X 
鬥 に 550n2 上 い 
0 〇 フ ァ イ ル ー c : / Use 「 5 / wi... ☆ 臨 査 ・ 
み 、 「 当 = “ ・ - ま 環 画 像 が 、 左 に 配 置 さ れ 、 説 明 の 
二 、 ' ~ 、 .3 文 字 は 右 に 配 置 さ れ ま す 。 
画 像 に 局 さ が あ る の で 、 何 行 か 
配 置 で き ま す が 、 自 分 で 改 行 し 
ま す 。

 

下は、ブラウザの横を千縮めた場合です。<br>は強制改行ですが、無くても画面によって折り返されます。

<br clear="all">で改行すると、画像の横から抜けます。これも、開くブラウザのサイズによらず、alignから強制的に開業するオプションです。

さらに、画像の周りに余白を作って、文字を離したいときは、 hspace=10  のように、左右余白を指定します。vspace=10 は、上下のスペースを10ピクセルにします。

<img src="https://i.pinimg.com/564x/06/ee/12/06ee122bd9c9ed983e2fb05f99901637.jpg" width=300 align="left" hspace=10 vspace=10> タグは、テキストファイルが見やすいようにと、勝手に改行してはいけません。

alignやhspaceなどは、もとはCSSコマンドですが、htmlの中に書き込む(インライン)ことが出来るようになりました。古いHTML4規格では使えない時代もありましたが、殆どのブラウザが使えるようになっています。

 

■ポイント htmlは文字だけなので、文字以外のものを表示するには、そのファイルがある場所のアドレスを指定して、そこから持ってきます。インターネット上のファイルは、常時接続でないと表示できませんが、現代のパソコンは、インターネットを使うなら、常時接続されています。昔は、必要なときにダイヤルアップ接続していましたが。