親方.info
もっと楽しく!
インターネットショッピング!
便利なページを創りましょう!
CONTENTS
◆Top
◆Shopping
◆オンラインカジノ
◆アフィリエイトを始めよう!
◆ホームページ作成
◆フリー素材集
◆懸賞情報をチェック
◆Search&Link
◆ホームページ製作
◆Gallery
◆BBS
◆Fishing
◆リンク集
◆Profile
◆ゲームセンター
 
楽天フリマ
古本・ブランド・PC等300万商品を激安ショッピング!
サーチ:
Keyword:
Amazon.co.jpアソシエイト

 
簡単ホームページ作成講座

※用語解説のリンクにつきましては、「 IT用語辞典 e-Words (株式会社インセプト)」 様の許可を得てリンクしています。 下記の検索窓もご利用ください。
 
IT用語検索
 |INDEX|5|
色をつけてみよう!
 
 白い背景に黒い文字だけでは、せっかくのホームページも映えないものです。背景色を変えてみたり、文字の色を変えてみたりしてみましょう。
 背景を変えるには、BODY タグに属性を設定します。 ここで使うのは、BGCOLOR タグです。
Sample
<HTML>
<HEAD>
<TITLE>背景を変える</TITLE>
</HEAD>
<BODY BGCOLOR="#FF0000">
背景が赤くなりました。
</BODY>
</HTML>
19.html
 色の指定をするには、6桁の16進数表記を使用します。コンピュータのディスプレイで色を表現するには、光の3原色である、赤・緑・青(R・G・B)の組み合わせで表します。最初の2桁が赤、次の二桁が緑、最後の二桁が青の量を表しています。上の例では、赤を使いますので、赤の量が最大のFF。緑と青が最小の00と00となり、FF0000となっているわけです。
 16進数というのは、0〜9とA〜Fの16個の英数字を言います。0が一番弱く、Fが一番強くなります。組み合わせとしては、R・G・B各2桁づつですから、赤=16×16で256通り、緑・青も256通りありますので、3色の組み合わせとしては、256×256×256で1677万7216色の組み合わせが考えられるわけです。
 論理上は、1677万7216色の色を使うことができるわけですが、実際に多く使用されている色は、「Webセーフカラー」と呼ばれる216色です。この色数は、最近はあまりみられなくなりましたが、256色しか表現できない性能の弱いディスプレイの事を考慮して考えられたものです。16進数の中で、00・33・66・99・CC・FFだけを組み合わせたもので、一番色化けを防ぐ基本色となります。色見本は、こちらをご覧ください。

 次に背景に色ではなくて、画像を使って見ましょう。ここで使う属性は、BACKGROUND です。
←左の十字模様の画像を背景に設定してみます。

※今までのように、下のソースをテキストエディタに貼り付けてブラウザに表示するだけでは、Sampleのような表示にはなりません。今まで作ってきた「html」というフォルダの中に「img」というフォルダを作成してください。上の画像を保存してください。良く分からない方はこちらをご覧下さい。
Sample
<HTML>
<HEAD>
<TITLE>パターンを使う</TITLE>
</HEAD>
<BODY BACKGROUND="./img/pattern1.gif">
背景全部に画像が配置されます。
</BODY>
</HTML>
20.html
 上記の例のように、小さい画像が背景に敷き詰められたと思います。背景にパターンを指定すると、連続してタイル上に表示されます。1ページ分の画像を用意して、背景に設定したら、膨大なファイルサイズになってしまいます。画像を背景に設定する場合は、なるべく小さく、パターンを考えて設定しましょう。
 
 上記のソースのように、パターン画像を呼び出すときや、後で紹介する、別ページへのリンクを設定するときなどには、パスというもので指定します。要するに、現在のファイルから見て、指定先の画像やファイルがある場所を指定するものです。(./img/pattern1.gif)
 指定方法には、絶対パスと相対パスがあります。絶対パスとは、httpではじまる、何処からみてもその場所が分かる記述方法です。
http://www.oyakata.info/img/pattern1.gif
のように記述します。相対パスは、同一サーバ内での指定に用いる、省略?された記述方法です。こちらの図を参照してみてください。
 どちらを使うのが正しいかという事は一概には言えませんが、今後 CGI プログラムなどを使うようになった場合は、相対パスしか使えない事もありますので、両方使えるようにしましょう。絶対パスで指定しておけば、リンク元のファイルを移動したりしてもリンク先のファイルは絶対的に指定されているので、ソースの書き換えは少なくて済むかも知れませんね。
  最近は常時接続が主流になりましたので、あまり利用しませんが、通信料節約のため、一旦Webページを自分のパソコン(ローカル)に保存してオフラインでブラウズする場合、リンクが相対パスで指定している場合にはエラー(パソコン内部でパス先のファイルを探してしまいます)になります。トップページへのリンクだけは、絶対パスで指定するように心がけましょう。最悪トップページには戻れますので、他のページも閲覧できるようになります。
 
 次に文字の色を変えてみましょう。この章では、FONTタグで簡単に文字色を変えてみます。
Sample
<HTML>
<HEAD>
<TITLE>文字の色を変える1</TITLE>
</HEAD>
<BODY>
<FONT COLOR="#FF0000">
赤くなります。
</FONT><BR><BR>
<FONT COLOR="#00FF00">
緑色になります。
</FONT><BR><BR>
<FONT COLOR="#0000FF">
青くなります。
</FONT> <BR><BR>
</BODY>
</HTML>
21.html
 背景色と同じように、”#FFFFFF”で指定します。色見本は、こちらをご覧下さい。
  実は、色を指定する方法としては、16進数以外の指定方法も用意されています。色名で直接指定する方法です。例えば、「Aquamarine」(#7FFFD4)とか、「Lightskyblue」(#87CEFA)等です。但し、パソコン環境や、OS、ブラウザによってはサポートされていない場合もあり不安定です。色名で指定するのは、次の16色だけにした方が良いようです。もっとも、数字で指定した方が簡単だと思いますので、参考までにこんな方法もあるんだとだけ、覚えておいて下さい。
Sample
<HTML>
<HEAD>
<TITLE>文字の色を変える2</TITLE>
</HEAD>
<BODY>
<FONT COLOR="Red">
赤くなります。
</FONT><BR><BR>
<FONT COLOR="Green">
緑色になります。
</FONT><BR><BR>
<FONT COLOR="Blue">
青くなります。
</FONT><BR><BR>
</BODY>
</HTML>
22.html
 左のページで折角画像を使う事を書きましたので、背景ではなく、単純にページに画像を表示する方法をお教えしておきましょう。パスを理解していれば、いたって簡単です。
イメージを使おう!
 上の画像をダウンロードして、先ほど作成した、「img」フォルダに保存してください。保存方法をもう一度図解を見て確認される方はこちらをご覧下さい
Sample
<HTML>
<HEAD>
<TITLE>画像を表示する</TITLE>
</HEAD>
<BODY>
<IMG SRC="img/image.gif">
<BR>
画像は表示されましたか??
</BODY>
</HTML>
23.html
 画像自体は上記のように簡単に表示させる事ができます。さらに、属性を付けて下記のように表示するのが普通です。
Sample
<HTML>
<HEAD>
<TITLE>画像を表示する</TITLE>
</HEAD>
<BODY>
<IMG SRC="img/image.gif" WIDTH="80" HEIGHT="40" BORDER="0" ALT="イメージを使おう!">
<BR>
画像は表示されましたか??
</BODY>
</HTML>
24.html
 WIDTH は、画像の幅を表します。
 HEIGHT は、画像の高さを表します。
 この数値を変更すると、表示される画像のサイズが変更されます。基本的には画像ファイルの大きさにあわせて記述します。縮小するのは良いのですが、基本的に大きくすると画像は荒れます。縦横比も注意しないと、不恰好な表示になってしまいます。
 BORDER は、画像の枠の太さを表します。
  指定しないと”0”になるはずですが、枠が付いてしまう場合がありますので、必ず指定するようにしましょう。
 ALT は、画像の説明を記述します。
 画像を表示できない(表示しない)パソコンを使用している場合、ここに書いた文字が表示されます。画像を表示できるパソコンの場合は、マウスカーソルを画像にあわせるとテキストが表示されます。

INDEX|5|

Copyright(c)2004 oyakat All rights reserved