TOP > ホームページ作成 実践編 > 画像に関するタグ一覧
画像に関するタグ一覧※10月28日更新
画像に関するメニュー タグ一覧（クリックすれば該当箇所に飛びます）
※画像をホームページ上で表示させるには、先に表示させたいファイルをＦＴＰソフト等でサーバーにアップロードしておく必要があります。 （ブログの場合は各ブログのアップロードシステムを使用して下さい。）
画像を貼る
画像を貼る場合、使用するタグは<img>です。
使い方は以下の通りです。
<html>
<head>
<title>画像に関するタグ一覧</title>
</head>
<body><img src="画像を置いたファイルのＵＲＬ（※１）.jpg">
</body>
</html>
（※１）当サイトでは、「http://hpguid.com/img/画像ファイル名.jpg」というアドレスになります。
実際の表示は以下の通り。
⇒元の画像の大きさそのまま（22×15px）で表示されています。
画像の大きさを変える
画像の大きさを変える場合、使用するタグは<img>、要素は「width」です。
使い方は以下の通りです。
<html>
<head>
<title>画像に関するタグ一覧</title>
</head>
<body><img src="画像を置いたファイルのＵＲＬ（※１）.jpg" width="20%">
<img src="画像を置いたファイルのＵＲＬ（※１）.jpg" width="50px">
</body>
</html>
（※１）当サイトでは、「http://hpguid.com/img/画像ファイル名.jpg」というアドレスになります。
実際の表示は以下の通り。
画像にリンクを付ける
画像にリンクを付ける場合、使用するタグは<img>と、<a>です。
使い方は以下の通りです。
<html>
<head>
<title>画像に関するタグ一覧</title>
</head>
<body><a href="指定する遷移先ＵＲＬ"><img src="画像を置いたファイルのＵＲＬ（※１）.jpg"></a>
</body>
</html>
（※１）当サイトでは、「http://hpguid.com/img/画像ファイル名.jpg」というアドレスになります。
実際の表示は以下の通り。
画像の枠線を消す
画像の枠線を消す場合、使用するタグは<img>、要素は「border」です。
使い方は以下の通りです。
<html>
<head>
<title>画像に関するタグ一覧</title>
</head>
<body><img src="画像を置いたファイルのＵＲＬ（※１）.jpg" border="0" >
</body>
</html>
（※１）当サイトでは、「http://hpguid.com/img/画像ファイル名.jpg」というアドレスになります。
実際の表示は以下の通り。
画像を背景に指定する
画像を背景に指定する場合、使用するタグは<body>、要素は「background」です。
使い方は以下の通りです。
<html>
<head>
<title>画像に関するタグ一覧</title>
</head>
<body background="画像を置いたファイルのＵＲＬ（※１）.jpg"><p>画像を背景に指定する練習</p>
</body>
</html>
（※１）当サイトでは、「http://hpguid.com/img/画像ファイル名.jpg」というアドレスになります。
実際の表示は以下の通り。
画像を背景に指定する練習
画像の位置を指定する
画像の位置を指定する場合、使用するタグは<div>、要素は「align」です。
使い方は以下の通りです。
<html>
<head>
<title>画像に関するタグ一覧</title>
</head>
<body><div align="left"><img src="画像を置いたファイルのＵＲＬ（※１）.jpg（左）"></div>
<div align="center"><img src="画像を置いたファイルのＵＲＬ（※１）.jpg（中央）"></div>
<div align="right"><img src="画像を置いたファイルのＵＲＬ（※１）.jpg（右）"></div>
</body>
</html>
（※１）当サイトでは、「http://hpguid.com/img/画像ファイル名.jpg」というアドレスになります。
実際の表示は以下の通り。
画像を横並びにする
画像を横並びにする場合、使用するタグは<dl>です。
使い方は以下の通りです。
<html>
<head>
<title>画像に関するタグ一覧</title>
</head>
<body><dl><dt style="float:left;"><img src="画像を置いたファイルのＵＲＬ（※１）.jpg"></dt>
<dt style="float:left;"><img src="画像を置いたファイルのＵＲＬ（※１）.jpg"></dt></dl>
</body>
</html>
（※１）当サイトでは、「http://hpguid.com/img/画像ファイル名.jpg」というアドレスになります。
実際の表示は以下の通り。
関連記事
お名前どっとコムを利用した、100ＧＢの巨大容量サーバー代をゼロで済ませる方法を掲載。
文字の大きさを変えたり、色を変えたりする為に使うタグが書かれています。
ＨＴＭＬを全く知らない人がゼロから始める為の基礎講座です。
スポンサードリンク
