画像をページに貼付けるには <img>タグを使います。例えば<img src="fuji.jpg" style="width:240px; height:180px; float:right;" alt="富士">
と書きます。srcには画像ファイル名(fuji.jpg)、width と height で画像の幅と高さを
指定します。また画像を表示できないとき、画像の代わりに表示される文字を alt="**"で指定します。
＊ファイル名(fuji.jpg)は、半角英数字で記述します。
float:right; と書くと、画像を右に寄せて表示します。左に表示したいときは、float:left; と書きます。
"fuji.jpg"の記述は、画像の URLを意味し、リンクのときと同様で、一般には「相対指定」をします。
【相対的URL指定の例】 public_html (利用者のWebスペース) ├ page01.html (1) ├ page02.html ├ fig01.jpg (2) ├ folder1 │ ├ page11.html │ ├ page12.html (3) │ ├ fig11.jpg │ ├ fig12.gif │ └ folder11 │ ├ page111.html (4) │ └ fig111.png (5) └ folder2 ├ page21.html (6) ├ style21.css (7) └ fig21.jpg 基点→行先 記述例 (1)→(2) ./fig01.jpg (又は fig01.jpg) (1)→(3) ./folder1/page12.html (1)→(5) ./folder1/folder11/fig111.png (4)→(2) ../../fig01.jpg (4)→(6) ../../folder2/page21.html (6)→(4) ../folder1/folder11/page111.html (7)→(2) ../fig01.jpg |
| 絶対的指定 | <img src="https://kurage.ready.jp/jhp_g2/syoho/fuji.jpg"
> のようにURLを表示します |
| 相対的指定 例 参照 |
<img src="./fuji.jpg">
のように現ページより相対的な位置を表示します ../～ は一つ上のフォルダの、../../～ は二つ上のフォルダのファイル～を示し、 ./fuji.jpg又は、fuji.jpg は同じで現フォルダ内のファイル fuji.jpg を示します。 ＊この記述関係は呼び出す側のファイルが、css や javascript でも同様です。 |
２．画像をリンクボタンにする
画像をリンクボタンにするには、
<a href="../hp_g.html">
<img src="top51.gif" style="width:100px; height:20px;" alt="Topへ"></a>
のように書きます。
すると
のように表示され、クリックするとその指定先( ../hp_g.html )にジャンプします。
この記述の働きは、 <a href="../hp_g.html">ＨＰを作る</a>
と書いたときの、
ＨＰを作る の文字の部分を画像に置き換えただけで、同じような働きをします。
３．画像を加工する
デジカメなどで撮った画像を使う場合は、画像を適当なファイルサイズ( 100kB以下を推奨)にしたり、文字を追記したりする「画像編集」が必要になります。
ホームページビルダーなどの編集ソフトを使っている場合は、付属の 画像編集ソフトを使えばよいでしょう。
それが無い場合は、ペイント などの PC付属ソフトを使って、こちらのサイト のように画像を加工編集する必要があります。なお、編集した画像は、jpg、gif もしくは png ファイルとして保存する必要があります。
bmp でしか保存できないときは、そのままではファイルサイズが大きくなってしまうので、このようなソフトや、その他のソフトを使い、「ファイルの種類」をjpg、gif もしくは png にして保存します。