暮らしをおトクにかえていく｜ポイントインカム
ワラウ - 遊べるポイントサイト

推奨ブラウザ

Internet Explorer
Version 7以降
Fire Fox
Version 3.5以降
Safari
Version 5以降
それ以前のバージョンでは表示が異なる場合があります。

更新情報

HTML講座

XHTML講座

  • 現在製作中...

CSS講座

質問・ご意見

関連書籍 Pick Up



HTML ＆ CSS ＆ JavaSc...

HTML ＆ CSS ＆ JavaScriptリファレンス

価格：2,625円（税込、送料別）

Link

レンタルサーバー&ドメイン

ホームページを作るときにはサーバー（作ったHTMLを置く所）を借りなければいけません。お手頃なレンタルサーバーをいくつか上げてみました。



月額105円から、キャンペーンあり

380円から借りれるお得なサーバ!!オススメ

ナウでヤングなレンタルサーバー

20GBの大容量で『お試し期間が2週間!!』

画像を表示する

画像について

ホームページで欠かせないのは画像です。ブログでもホームページでも画像の無いサイトはあまり見かけません。 自分のお気に入りの写真やイラストをホームページにのせる方法をみていきましょう。

画像ファイルはいくつかの種類があります。 GIF形式（〜.gif）や JPEG形式（〜.jpg） そして PNG形式（〜.png）です。〜 の部分は画像の名前です。ホームページに使用する場合、画像の名前は半角英数で付けなければいけません。

例）○→syashin.jpg　×→しゃしん.jpg　×→ｓｙａｓｈｉｎ.jpg

画像を表示するには

画像をはり付けるためには<img>（イメージ）タグとsrc（ソース）を使います。
img は『ここは画像ですよ』で、 src は『画像の場所はここですよ』と言う意味です。
※imgタグには前回まで出てきた『終了タグ』はありません。

<img src="画像のURL">

src="画像のURL"　"　に囲まれた部分にはり付けたい画像のURLを入力します。
URLとはホームページのアドレスと同じで、画像の置かれている場所です。
ちなみに今みているこのページのURLは

http://lecture.oshiirecords.com/html/le4

となります。では画像のURLはどうでしょう。下に画像をはり付けました。

子犬の画像 この画像のURLは

※写真提供 ipxp フォトギャラリー
http://lecture.oshiirecords.com/img/illust/koinu.jpg

URLを<img>タグに入れてみましょう。

<img src="http://lecture.oshiirecords.com/img/illust/koinu.jpg">

画像の名前は koinu　画像の種類はJPEG形式（〜.jpg）です。
一枚画像をはり付けるのに長いURLです。URLの内容は下の説明のようになります。

階層説明

入れ物１（http://lecture.oshiirecords.comフォルダ）の中に入れ物２（imgフォルダ）が有りその中に入れ物３（illustフォルダ）が有ります、その中に画像（koinu.jpg）が有るという意味です。それぞれを区切るのに / (スラッシュ)を入れます。 上の表は一例です。URLはフォルダの名前や画像を置いてある場所により変わります。
画像をクリックしてURLを確認してみて下さい。

画像を表示してみよう

それでは画像を画面上に表示してみましょう。
下に画像を用意したので好きな画像を表示してみましょう。

イメージ画像1

img1.jpg

イメージ画像2

img2.jpg

イメージ画像3

img3.jpg

イメージ画像4

img4.jpg

イメージ画像5

img5.jpg

※写真提供 ipxp フォトギャラリー

5枚の画像は全て　http://lecture.oshiirecords.com/html/up_img/　の中に入っています。
画像の名前はそれぞれの画像の下に書いています。

<img src="〜">　〜の部分に表示したい画像のURLを入力して下さい。

答えはここをクリック

<img src="http://lecture.oshiirecords.com/html/up_img/img1.jpg">
<img src="http://lecture.oshiirecords.com/html/up_img/img2.jpg">
<img src="http://lecture.oshiirecords.com/html/up_img/img3.jpg">
<img src="http://lecture.oshiirecords.com/html/up_img/img4.jpg">
<img src="http://lecture.oshiirecords.com/html/up_img/img5.jpg">

自分の画像を表示してみよう

表示したい画像を1枚用意してください。用意ができたら画像をサーバーにアップロードします。
画像をアップする

アップロードした画像のURLを使って入力してみましょう。

アップロードした画像を表示しましょう。

答えはここをクリック

<img src="http://lecture.oshiirecords.com/html/up_img/画像の名前.jpg">
<img src="http://lecture.oshiirecords.com/html/up_img/画像の名前.gif">
<img src="http://lecture.oshiirecords.com/html/up_img/画像の名前.png">

画像の大きさを変えよう

表示した画像を大きくしたり小さくしたりするには width（ワイズ・はば）と height（ハイト・高さ）を使います

<img src="〜" width="数値" height="数値">

数値の部分に 数字 で入力します。100ピクセルにしたいのであれば100と入力します。

指定なし（はば163　高さ135）
画像の実寸で表示されます。
height="50"

高さのみ50で指定
高さにあわせてはばが調整されます。
width="200"

はばのみ200で指定
はばにあわせて高さが調整されます。
実寸より大きいので画像が荒くなります。
width="400"　height="200"

はば400高さ200で指定
高さとはばの比率を無視しさらに実寸より大きいので画像が荒くなります。

では下の画像をつかって高さ・はばを変えてみましょう。

イメージ画像4

img4.jpg

URLはhttp://lecture.oshiirecords.com/html/up_img/img4.jpgです。

はばを300　高さを400にしてみましょう。

答えはここをクリック

<img src="http://lecture.oshiirecords.com/html/up_img/img4.jpg" width="300" height="400">

実際のサイズよりも大きくすると画像が荒くなります。通常画像をはり付ける時は表示したい大きさの画像を用意しましょう。

画像に名前をつける

画面上では変化はありませんが画像に名前を付けることができます。
画像に名前をつけるにはalt（オルト）を使います。

子犬
名前に子犬と付けた画像です。見た目に変化はありません。
タグは下のようになります。

<img src="http://lecture.oshiirecords.com/img/illust/koinu.jpg" alt="子犬">

では下の写真に名前をつけてみましょう。

イメージ画像1

img1.jpg

URLはhttp://lecture.oshiirecords.com/html/up_img/img1.jpgです。

名前を 子猫 にしてみましょう。

答えはここをクリック

<img src="http://lecture.oshiirecords.com/html/up_img/img1.jpg" alt="子猫">

画像をはり付ける方法は分かったでしょうか。色々な写真やイラストをはりつけて楽しいホームページを作りましょう。

次のページでは、リンク（別のページ・別サイトに飛ぶ）の付け方をみていきます。

前に戻る｜次に進む