- −画像の上部にテキストを揃える場合−
◆HTMLサンプル
<img src="./osu.gif" width="100" align="top">
画像はこのように貼ります。 ただし、一行のみの表示です。
画像はこのように貼ります。 ただし、一行のみの表示です。
- −画像の中央部にテキストを揃える場合−
◆HTMLサンプル
<img src="./osu.gif" width="100" align="middle">
画像はこのように貼ります。 ただし、一行のみの表示です。
画像はこのように貼ります。 ただし、一行のみの表示です。
- −画像の下部にテキストを揃える場合−
◆HTMLサンプル
<img src="./osu.gif" width="100" align="lower">
画像はこのように貼ります。 ただし、一行のみの表示です。
画像はこのように貼ります。 ただし、一行のみの表示です。
- −画像の中央部にテキストを複数行入れる場合−
◆HTMLサンプル
<img src="./osu.gif" width="100" align="left" hspace="20">
画像はこのように貼ります。
複数行の表示を行う場合はこのようにします。
ただし、画像の左右に２０ドットの空白をとっています。
また、<br clear="all">を入れないとどんどん下の行が入ってきます。
<br clear="all">
画像はこのように貼ります。
複数行の表示を行う場合はこのようにします。
ただし、画像の左右に２０ドットの空白をとっています。
また、<br clear="all">を入れないとどんどん下の行が入ってきます。
それぞれの内容を Webページで調べ、簡単に説明する。
先頭に戻る
この方法は、説明文や作品の背景色を変えることによって、
見せたい部分を目立たせ、マスの中に収めることができます。
また、表示幅を固定することができます。
|
◆HTMLサンプル <table border="0" cellpadding="10" width="700"> <tr><td> <img src="./osu.gif" width="100"> </td><td> 画像はこのように貼ります。 tableタグで表示を行う場合はこのようにします。 tableタグを使うと思い通りの表示ができるので HTML文書の作成には欠かせません。 "bgcolor"の指定がないと透けて見えます。 </td></tr> </table> |
|
|
画像はこのように貼ります。 tableタグで表示を行う場合はこのようにします。 tableタグを使うと思い通りの表示ができるので HTML文書の作成には欠かせません。 "bgcolor"の指定がないと透けて見えます。 |
|
◆HTMLサンプル <table border="1" cellpadding="10" width="700"> <tr><td bgcolor="#E0D0C0"> <img src="./osu.gif" width="100"> </td><td bgcolor="F8F0E0"> 画像はこのように貼ります。 tableタグで表示を行う場合はこのようにします。 背景色をセル（枠）単位で変えたいときはこうします。 ただし、背景の色は、 このページを参考にして下さい。 色の設定は、ホームページの作成において非常に重要なファクターとなります。 </td></tr> </table> |
|
|
画像はこのように貼ります。 tableタグで表示を行う場合はこのようにします。 背景色をセル（枠）単位で変えたいときはこうします。 ただし、背景の色は、 このページを参考にして下さい。 色の設定は、ホームページの作成において非常に重要なファクターとなります。 |
|
◆HTMLサンプル <table border="1" cellpadding="10" width="700"> <tr><td bgcolor="#C0D0E0"> <img src="./osu.gif" width="100"> </td><td bgcolor="C0D0E0"> <table cellpadding="10" bgcolor="#A0A0B0"> <tr><td> <font color="#F8FFFF"> 画像はこのように貼ります。 tableタグで表示を行う場合はこのようにします。 背景色をセル（枠）単位で変えたいときはこうします。 ただし、背景の色は、 このページを参考にして下さい。 色の設定は、ホームページの作成において非常に重要なファクター となります。 </font> </td></tr> </table> |
|
|
|
|
◆HTMLサンプル <table border="1" cellpadding="10" width="700"> <tr><td bgcolor="#C0E0D0"> <img src="./osu.gif" width="100"> </td><td> <table cellpadding="10" bgcolor="#A0C0B0"> <tr><td> <font color="#F8FFFF"> 画像はこのように貼ります。 tableタグで表示を行う場合はこのようにします。 背景色をセル（枠）単位で変えたいときはこうします。 ただし、背景の色は、 このページを参考にして下さい。 色の設定は、ホームページの作成において非常に重要なファクター となります。 </font> </td></tr> </table> </td></tr> </table> |
|
|
|
画像そのものにリンクを張る方法は、小さな画像でだいたいの雰囲気を伝え、
さらに大きな画像で鮮明に見せたいときに効果があります。
|
<a href="./osu.gif"> <img src="./osu.gif" border="0" align="left" width="100" hspace="20"> </a> |
画像はこのように貼ります。
これは、１枚の画像で行った例ですね。
複数行の表示を行う場合はこのようにします。
ただし、左右に２０ドット空白をとっています。
問題は、元のページに戻すことができなくなることです。
|
<a href="./images/osu-1.jpg"> <img src="./images/osu-1.gif" border="0" align="left" hspace="20"> </a> |
画像はこのように貼ります。
これは、２枚の画像を用意した例ですね。
複数行の表示を行う場合はこのようにします。
ただし、左右に２０ドット空白をとっています。
問題は、元のページに戻すことができなくなることです。
|
<a href="./osu-1.html"> <img src="./images/osu-1.gif" border="0" align="left" hspace="20"> </a> |
画像はこのように貼ります。
これは、２枚の画像を用意した例ですね。
複数行の表示を行う場合はこのようにします。
ただし、左右に２０ドット空白をとっています。
元のページに戻すためにはこのようにします。