top
ホームページ ホームページを作ろう
タグについて
 
基本構造
文字を装飾
レイアウト
背景
リンクを貼る
HTMLタグ紹介>背景・画像を貼り付ける
 
 


背景・画像を貼り付ける

ライン

背景

 

背景に色をつける

何も設定しない初期設定の状態だと、Internet Explorer であれば背景は白、Netscape Navigator であれば灰色になります。しかし、白や灰色だけでなく、もっといろんな色をつかったり、絵柄のある背景にしたいですよね。以下、もっとかっこよく、楽しくするための背景のタグを紹介します

<BODY BGCOLOR="#RRGGBB">~</BODY>
背景の色を指定します。#RRGGBB の値を変えることで様々な色に設定することが可能です。

また、BGCOLOR 以外にも、TEXT="#RRGGBB" やLINK="#RRGGBB" などの設定を用いることで、テキスト本文の基本色やリンクの色の設定なども変えることができます。そのほか、VLINK (既に訪れたリンクの色)、ALINK (リンクをクリックした瞬間の色) を指定することもできます。

ただし、背景色は白、文字色は黒、リンク色は青が一番読みやすいようですので、それに近い色にするようにしましょう。

<BODY BACKGROUND="ファイル名">~</BODY>

背景の画像を指定します。"ファイル名"の部分は背景の画像のファイルを保存してある場所 (パス) を指定します。拡張子まできちんと記述します。

背景色を指定していても、こちらの画像の方が表示されます。また、画像ファイルのファイル名の大文字・小文字、拡張子に気をつけてください。

(例 1)

<BODY BGCOLOR="#FF0000" BACKGROUND="BACK.GIF">

背景色は赤に指定されていますが、実際には、BACK.GIF という画像が背景に並べられて表示されます。


<BODY BACKGROUND="ファイル名">~</BODY>

背景の画像を指定します。"ファイル名"の部分は背景の画像のファイルを保存してある場所 (パス) を指定します。拡張子まできちんと記述します。

 


HTMLタグ紹介へ戻る

 

 

 

line


画像を貼りつける



やはり、かわいいイラストやかっこいい写真などをつかって、ご自分のホームページを飾っていきたいですよね。以下、ホームページに画像を貼りつける方法を紹介します。これを覚えれば、かなり多彩な表現が可能になってきますので、ぜひぜひ覚えてください。

<IMG SRC="画像のファイル名" WIDTH="n" HEIGHT="n" ALT="***" >

画像を貼りつけることを指示するタグです。SRC="*** (画像のファイル名)" の部分に貼りつけたいファイルまでの場所 (パス) を記述します。n には適当な整数が代入されます。
WIDTH="n"、HEIGHT="n" のそれぞれには画像ファイルの幅と高さを指定します。ALT="***" の *** の部分には、そのファイルを簡単に説明するコメントを記述します。



画像が記述されなくても、そこにあったはずの画像を説明するコメントが書かれています。回線が込んでいたり、何らかの原因で、画像データのダウンロードができなくても、この文字が表示され、何がそこにあるのかわかりますので、とっても便利です。ですので、ALT="***" はかならず指定するようにしましょう。

そして、画像の幅と高さですが、別に指定しなくても表示されます。ですが、ブラウザーは、まず、画像のための領域を確保してから実際に画像ファイルのダウンロードを行いますので、はじめから画像ファイルを入れる領域を指定しておいた方が、表示が速くなります。ですので、画像の幅と高さもきちんと指定するようにしましょう。


HTMLタグ紹介へ戻る


 


GIF と JPEG について

GIF (Graphics Interchange Format)
 

ジフとかギフと呼ばれるファイル形式で、線画、イラストなど、色数の少ない画像に適しています。背景として使っている色の透明化などもできます。拡張子は .GIF (.gif) です。
JPEG (Joint Photographic Experts Group)
 

ジェイペグと呼ばれるファイル形式で、写真イメージを圧縮し、保存するために開発されたもので、スキャナで取り込んだ写真やグラデーションのきれいな画像など、色数の多い画像に適しています。拡張子は .JPEG / .JPG (.jpeg / .jpg) です。

pickup

福岡の過払い相談WEB
http://www.taketomi-saimu.jp/

最終更新日:2014/9/26

Copyright (C) 2001-2008 hatena. All Rights Reserved.