(1) 画像ってどう張るの？
|
さぁ、かなりhtmlに詳しくなったので
今度はお約束の画像を張ってみましょう！
↓こんな感じですね。
画像を張るには次の<img>タグを使います。
|
<img>：画像を張る
src=(URL):画像ファイルを指定する。
|
(URL)は画像ファイルを指定しますが、
フルパスまたは相対パスを指定します。
フルパスってのは↓こんな感じで
<img src="http://www.ask.ne.jp/~maru/study/html/img/3-1.gif">
URLを指定します。
相対パスの場合は、
そのhtmlがあるディレクトリを基準にして指定します。
※<base href=>で指定した場合は変わります。
例えば、
html文書と画像ファイルが同じディレクトリにある場合は
<img src="3-1.gif">
としてあげればＯＫですし、
次の様に
html文書のURL
http://www.ask.ne.jp/~maru/study/html/3.html
に
画像のURL
http://www.ask.ne.jp/~maru/study/html/img/3-1.gif
を張る場合
つまりimgというディレクトリの下に画像ファイルがあるので
<img src="img/3-1.gif">
となります。
|
| ポイント
|
画像ファイルはXXX.jpg または XXX.gif
|
ブラウザで表示できる画像ファイルには、
いくつか種類がありますが、
このＨＰでは、XXX.gif を中心に用いています。
少なからず、XXX.bmp は表示出来ないので、
画像フォーマットを変換して使いましょう！
では実際に画像を張ったＨＰを作ってみましょう！
SRC=3-1.html
こんな感じです。
画像を張るのは簡単ですね。
|
| ポイント
|
相対パスで指定するとローカルでHomePageが
作りやすい！
|
大抵の人がＨＰを作成する場合、
家のパソコン、つまりローカルで作ってから
サーバに転送していると思うのですが
フルパス指定をした場合、表示テストするには
サーバに転送しなくてはなりません。
つまり転送の時とテストの時は電話代がかかってしまいます。
不経済です。
その点、相対パスで指定した場合、ローカルで確認できますし
少し作っては確認の繰り返しでＨＰが作りやすいです。
電話代も最後の転送時と確認時くらいで済みます。
そんなわけで極力相対パスを使いましょう！
画像が別のサーバにある時は駄目ですけどね。
|
|
(2) 背景に画像を張りたい
|
背景に画像を使ったＨＰってのは多いですよね？
それはどうやるんでしょう？
それは、前に勉強した<body>タグのオプションで指定します。
|
<body>〜</body>：画像を張る
background=(URL):画像ファイルを指定する。
|
(URL)は画像ファイルを指定します。
<img>タグ同様、フルパス指定でも相対パス指定でも
構いません。
では実際に、やってみましょう。
"img/3-1.gif"
を背景にしたページを作ってみましょう！
<body background="img/3-1.gif">
と指定します。
SRC=3-2.html
こんな感じに出来ましたでしょうか？
|
| ポイント
|
|
あまり派手な背景は控えましょう！
|
例題みたいに派手な画像が背景になると
文章が読みにくくなるのでやめましょう！
あと、あまりサイズの大きな画像も控えた方がいいでしょう！
背景に合わせて、読みやすい文字の色にするのも忘れずに！
|
|
(3) 画像を使った小技を教えて！
|
では、今回は趣を変えて、小技を連発！
|
<img>：画像を張る
align=(位置):画像の位置を指定。
|
(位置)はtop/middle/bottom/right/left を指定します。
動作は以下に示すようになります。
文字列と絡めて画像を使う時に指定しましょう！
| イメージ
| ソース
| 備考
|
僕 です。
|
僕
<img src="img/3-2.gif">
です。
|
標準
|
僕です。
|
僕
<img src="img/3-2.gif" align=top>
です。
|
top
|
僕です。
|
僕
<img src="img/3-2.gif" align=middle>
です。
|
middle
|
僕です。
|
僕
<img src="img/3-2.gif" align=bottom>
です。
|
bottom
|
←
僕
で
す
|
<img src="img/3-2.gif" align=left>
←<br>僕<br>で<br>す<br>
|
left
|
→
僕
で
す
|
<img src="img/3-2.gif" align=right>
→<br>僕<br>で<br>す<br>
|
right
|
|
<img>：画像を張る
width=(size):画像の幅。
height=(size):画像の高さ。
|
画像の幅や高さを指定できます。
単位はピクセル（ドット）です。
これで指定すれば、拡大や縮小も行えます。
※例で用いている画像サイズは 64×64 です。
| イメージ
| ソース
| 備考
|
|
|
<img src="img/3-2.gif">
|
標準
|
|
|
<img src="img/3-2.gif" width=64 height=64>
|
６４×６４
|
|
|
<img src="img/3-2.gif" width=128 height=128>
|
１２８×１２８
|
|
|
<img src="img/3-2.gif" width=32 height=32>
|
３２×３２
|
|
|
<img src="img/3-2.gif" width=64 height=128>
|
６４×１２８
|
|
|
<img src="img/3-2.gif" width=128 height=64>
|
１２８×６４
|
|
<img>：画像を張る
alt=(string):代替テキスト
|
string は画像の説明等を書きます。
| イメージ
| ソース
|
![わざと無いファイルを指定してます。]()
|
<img src="" alt="わざと無いファイルを指定してます。">
|
こんな感じに、読み込みに失敗しても何の画像かわかります。
僕はやったり、やらなかったりだったりしますが
文字を入れておいた方が、
アクセスした人にやさしいホームページになりますね。
こんなところですね。画像については。
今回、例がちょっと少なかったですけどわかりましたか？
|
