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)で表示されています。
画像の大きさを変える
画像の大きさを変える場合、使用するタグは<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)
画像にリンクを付ける
画像にリンクを付ける場合、使用するタグは<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」というアドレスになります。
実際の表示は以下の通り。
画像の枠線を消す
画像の枠線を消す場合、使用するタグは<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を指定した場合
画像を背景に指定する
画像を背景に指定する場合、使用するタグは<body>、要素は「background」です。
使い方は以下の通りです。
<html>
<head>
<title>画像に関するタグ一覧</title>
</head>
<body background="画像を置いたファイルのURL(※1).jpg"><p>画像を背景に指定する練習</p>
</body>
</html>
(※1)当サイトでは、「http://hpguid.com/img/画像ファイル名.jpg」というアドレスになります。
実際の表示は以下の通り。
画像を背景に指定する練習
画像の位置を指定する
画像の位置を指定する場合、使用するタグは<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」というアドレスになります。
実際の表示は以下の通り。
⇒左寄せ
⇒中央寄せ
⇒右寄せ
画像を横並びにする
画像を横並びにする場合、使用するタグは<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」というアドレスになります。
実際の表示は以下の通り。
関連記事
お名前どっとコムを利用した、100GBの巨大容量サーバー代をゼロで済ませる方法を掲載。
文字の大きさを変えたり、色を変えたりする為に使うタグが書かれています。
HTMLを全く知らない人がゼロから始める為の基礎講座です。
スポンサードリンク