ＨＴＭＬを覚えたい～画像編・実践ページ

ＨＴＭＬを覚えたい～画　像　編・実践ページ

◆ ホームページを作ってみよう Ⅲ ◆ へ戻りま～す♪

★　ＨＴＭＬを覚えたい～画像編　★　←　この実践ページと合わせて見ると、もうちょっと分かりやすいかも。。。

「ＨＴＭＬを覚えたい～画像編」の実践ページです。　ＨＴＭＬの本を参考にして実際に試しています

お知らせ ・・・ 07/05/10　画像の横のテキストの回り込みを途中でカットする方法をＵＰしました♪ （一番下にあるよ ↓）

07/11/17　ページの一番下から、この表のＴＯＰへジャンプするようにしました

画　像

　　　このページでは、画像（ＩＭＡＧＥ）に関わるタグを使って、それぞれを試してみました

　　　　　　　 ※ 「 ★ 画像を貼る」の箇所のイラストを基本として説明しています

　★　画像を貼る

　●　この画像の実際のサイズは、「２１９×１９３」ピクセルです

　　　この箇所に貼り付けたイラストが、実際の大きさです

ヒマワリの家　

★ 画像のサイズ変更

　※　実際の画像のサイズを変えるのではなく、ブラウザで表示するサイズを変える方法

●　この画像の実際のサイズは、「２１９×１９３」ピクセルです

　　表示するサイズを変更する方法としては、ピクセル数を指定する方法と

　　表示ウィンドウに対して何パーセントの比率にするかの方法があります

　　サイズを、タテヨコ均等、比率を変えて、の２通りで試してみます

　◎ タテとヨコの比率を同じにして、サイズを変更する　（ピクセル数を指定）

　　　　◆　実際のサイズより、５０ピクセルずつ小さくしてみます

　◎ タテとヨコの比率を変えて、サイズを変更する　（ピクセル数を指定）

　　　　◆　実際のサイズを、タテはそのままで、ヨコを２倍にしてみます

　◎ タテとヨコの比率を、画面の幅の何％にするかを指定して、サイズを変更する

　　　　　◆　タテヨコ、２０％を指定してみます

　　　　　◆　タテを１０％、ヨコを４０％に指定してみます

★ 画像に枠を付ける

　●　画像の周りに、枠（境界線）を付ける方法

　　　　※　境界線の太さは、ピクセル数で指定します

　　　　　　ピクセル数を、「６」で指定してみます

　★ 画像の横に回り込むテキストの位置

（複数行の場合）

　以下の指定も同時にしましょう！

　◆ 画像とテキストの間の余白

　※　余白を指定しないと、画像とテキストがぴったりとくっ付いた感じになります

　●　画像の横に回り込むテキストの位置を指定する方法（複数行の場合）

　　　ＡＬＩＧＩＮ（属性）　・・・　ここでは、複数行のテキストの回り込みを指定する

　◆ テキストが回り込む位置を指定する場合、画像が左か右かを考えて指定すると分かりやすい

　　◎ ＬＥＦＴ　・・・　画像が左で、テキストが右

　　◎ ＲＩＧＨＴ　・・・　画像が右で、テキストが左

　◆ 画像とテキストの間の余白（属性値は、ピクセル数で指定する）

　　◎ ＶＳＰＡＣＥ　・・・　上下の余白

　　◎ ＨＳＰＡＣＥ　・・・　左右の余白

　　　※　ここでは、余白が分かりやすいように画像に境界線を付けています

●　画像の横に回り込むテキストの位置を指定する方法

ＡＬＩＧＩＮ（属性）　・・・　ここでは、複数行のテキストの回り込みを指定する

◆ テキストが回り込む位置を指定する場合、画像が左か右かを考えて指定すると分かりやすい

≪ 属性値 ≫

◎ ＬＥＦＴ　・・・　画像が左で、テキストが右

◎ ＲＩＧＨＴ　・・・　画像が右で、テキストが左

　◆ 画像とテキストの間の余白（属性値は、ピクセル数で指定する）

　◎ ＶＳＰＡＣＥ　・・・　上下の余白

　◎ ＨＳＰＡＣＥ　・・・　左右の余白

　★ 画像の横に回り込むテキストの位置

（１行の場合）

※　説明では、余白を付けていませんが、実際に記述する時は、余白も指定して下さい

　●　画像の横に回り込むテキストの位置を指定する方法（１行の場合）

　　　◎ ＴＯＰ　・・・　画像とテキストが、上揃え

　　　◎ ＭＩＤＤＬＥ（ＣＥＮＴＥＲ）　・・・　画像とテキストが、上下中央揃え

　　　◎ ＢＯＴＴＯＭ　・・・　画像とテキストが、下揃え

　◆　上揃え

画像の横に回り込むテキストの位置

　◆　上下中央揃え

　画像の横に回り込むテキストの位置

　◆　下揃え

　画像の横に回り込むテキストの位置

　　※　ＡＬＩＧＮを指定しない場合は、下揃え（ｂｏｔｔｏｍ）になります

★ 画像の横のテキストの回り込みをカット

（複数行の場合）

　●　画像の横のテキストの回り込みを途中でカットする方法（複数行の場合）

　　　ＢＲ（属性）　・・・　＜ＢＲ＞は、改行を定義するタグですが、＜ＣＬＥＡＲ＞（属性）を加えると

　　　イメージ＜ＩＭＧ＞に属性＜ＡＬＩＧＮ＞（ＬＥＦＴ、ＲＩＧＨＴ）を指定した場合の

　　　複数行のテキストの画像に対しての回り込みを、途中でカット（中断）することができます

※　この指定以降のテキストは、画像の下に表示されることになります

　　　　　　　　＜ＢＲ　ＣＬＥＡＲ＝ ” 回り込みを停止する属性値 ” ＞

このタグは、文章中のテキストの回り込みを停止したい箇所に記述します

　◆　回り込みを停止する属性値

　　◎ LEFT　・・・　ウィンドウの左端にある画像に対する回り込みをカット

　　◎ ＲＩＧＨＴ　・・・　ウィンドウの右端にある画像に対する回り込みをカット

　　◎ ＡＬＬ　・・・　画像が左右、どちら側にある場合も、画像に対する回り込みをカット

★　記　述　例

●　画像の横に回り込むテキストの位置を指定する方法　●

ＡＬＩＧＩＮ（属性）　・・・　ここでは、複数行のテキストの回り込みを指定する

◆ テキストが回り込む位置を指定する場合、画像が左か右かを考えて指定すると分かりやすい

≪ 属性値 ≫

◎ ＬＥＦＴ　・・・　画像が左で、テキストが右

◎ ＲＩＧＨＴ　・・・　画像が右で、テキストが左

◆ 画像とテキストの間の余白（属性値は、ピクセル数で指定する）

◎ ＶＳＰＡＣＥ　・・・　上下の余白

◎ ＨＳＰＡＣＥ　・・・　左右の余白

※　ここでは、回り込みを分かりやすくするために、境界線を付けています

　 ●　画像の横に回り込むテキストの位置を指定する方法　●

ＡＬＩＧＩＮ（属性）　・・・　ここでは、複数行のテキストの回り込みを指定する

◆ テキストが回り込む位置を指定する場合、画像が左か右かを考えて指定すると分かりやすい
　
　≪ 属性値 ≫

　◎ ＬＥＦＴ　・・・　画像が左で、テキストが右
　◎ ＲＩＧＨＴ　・・・　画像が右で、テキストが左

　◆ 画像とテキストの間の余白（属性値は、ピクセル数で指定する）

　◎ ＶＳＰＡＣＥ　・・・　上下の余白
　◎ ＨＳＰＡＣＥ　・・・　左右の余白

この表のＴＯＰへ

★　このページの説明で使っている画像は、Microsoftのクリップアートです　★