TOP > ホームページ作成 実践編 > 画像に関するタグ一覧

画像に関するタグ一覧※10月28日更新

画像に関するメニュー タグ一覧(クリックすれば該当箇所に飛びます)

画像をホームページ上で表示させるには、先に表示させたいファイルをFTPソフト等でサーバーにアップロードしておく必要があります。 (ブログの場合は各ブログのアップロードシステムを使用して下さい。)

画像を貼る

 画像を貼る場合、使用するタグは<img>です。

 使い方は以下の通りです。

			

<html>
<head>
<title>画像に関するタグ一覧</title>
</head>
<body>

<img src="画像を置いたファイルのURL(※1).jpg">

</body>
</html>

(※1)当サイトでは、「http://hpguid.com/img/画像ファイル名.jpg」というアドレスになります。

 実際の表示は以下の通り。

			

 ⇒元の画像の大きさそのまま(22×15px)で表示されています。

▲TOP

画像の大きさを変える

 画像の大きさを変える場合、使用するタグは<img>、要素は「width」です。

 使い方は以下の通りです。

			

<html>
<head>
<title>画像に関するタグ一覧</title>
</head>
<body>

<img src="画像を置いたファイルのURL(※1).jpg" width="20%">

<img src="画像を置いたファイルのURL(※1).jpg" width="50px">

</body>
</html>

(※1)当サイトでは、「http://hpguid.com/img/画像ファイル名.jpg」というアドレスになります。

 実際の表示は以下の通り。

			

 ⇒ 灰色の領域の横幅20%分まで大きさを拡大しています。

 ⇒ 50pxというピクセル数で横幅を指定して拡大しています。(元は22px)

▲TOP

 画像にリンクを付ける場合、使用するタグは<img>と、<a>です。

 使い方は以下の通りです。

			

<html>
<head>
<title>画像に関するタグ一覧</title>
</head>
<body>

<a href="指定する遷移先URL"><img src="画像を置いたファイルのURL(※1).jpg"></a>

</body>
</html>

(※1)当サイトでは、「http://hpguid.com/img/画像ファイル名.jpg」というアドレスになります。

 実際の表示は以下の通り。

			

 ⇒クリックすると、このページのトップに飛びます

▲TOP

画像の枠線を消す

 画像の枠線を消す場合、使用するタグは<img>、要素は「border」です。

 使い方は以下の通りです。

			

<html>
<head>
<title>画像に関するタグ一覧</title>
</head>
<body>

<img src="画像を置いたファイルのURL(※1).jpg" border="0" >

</body>
</html>

(※1)当サイトでは、「http://hpguid.com/img/画像ファイル名.jpg」というアドレスになります。

 実際の表示は以下の通り。

			

 ⇒borderを指定していない場合

 ⇒borderを指定した場合

▲TOP

画像を背景に指定する

 画像を背景に指定する場合、使用するタグは<body>、要素は「background」です。

 使い方は以下の通りです。

			

<html>
<head>
<title>画像に関するタグ一覧</title>
</head>
<body background="画像を置いたファイルのURL(※1).jpg">

<p>画像を背景に指定する練習</p>

</body>
</html>

(※1)当サイトでは、「http://hpguid.com/img/画像ファイル名.jpg」というアドレスになります。

 実際の表示は以下の通り。

			

画像を背景に指定する練習

▲TOP

画像の位置を指定する

 画像の位置を指定する場合、使用するタグは<div>、要素は「align」です。

 使い方は以下の通りです。

			

<html>
<head>
<title>画像に関するタグ一覧</title>
</head>
<body>

<div align="left"><img src="画像を置いたファイルのURL(※1).jpg(左)"></div>

<div align="center"><img src="画像を置いたファイルのURL(※1).jpg(中央)"></div>

<div align="right"><img src="画像を置いたファイルのURL(※1).jpg(右)"></div>

</body>
</html>

(※1)当サイトでは、「http://hpguid.com/img/画像ファイル名.jpg」というアドレスになります。

 実際の表示は以下の通り。

			

 ⇒左寄せ

 ⇒中央寄せ

 ⇒右寄せ

▲TOP

画像を横並びにする

 画像を横並びにする場合、使用するタグは<dl>です。

 使い方は以下の通りです。

			

<html>
<head>
<title>画像に関するタグ一覧</title>
</head>
<body>

<dl><dt style="float:left;"><img src="画像を置いたファイルのURL(※1).jpg"></dt>

<dt style="float:left;"><img src="画像を置いたファイルのURL(※1).jpg"></dt></dl>

</body>
</html>

(※1)当サイトでは、「http://hpguid.com/img/画像ファイル名.jpg」というアドレスになります。

 実際の表示は以下の通り。

			

▲TOP

関連記事

サーバー代を無料にする方法

お名前どっとコムを利用した、100GBの巨大容量サーバー代をゼロで済ませる方法を掲載。

文字に関するタグ一覧

文字の大きさを変えたり、色を変えたりする為に使うタグが書かれています。

ゼロからのHTML 基礎編

HTMLを全く知らない人がゼロから始める為の基礎講座です。

スポンサードリンク