RGB色サンプル色の指定の方法は"red"とか"aqua"とか， 色名を直接指定する方法があります．しかし，この方法だと知っている色は簡単に出せますが，微妙な色使いができません．
そこでHTMLでは，色をRGB形式を用いて細かく指定できるようになっています．光の色は
- 赤(Red)
- 緑(Green)
- 青(Blue)
の三原色から構成されています．三原色のそれぞれの色の強さを微妙に変えて混ぜ合わせることであらゆる色を出すことができます．
HTMLでのRGB形式による色の表し方は， "#rrggbb" となります．ここで，rrは赤，ggは緑，bbは青の色の強さを 16進数(00からffまで256段階)で指定します．例えば，白(white)は"#ffffff"，黒(black)は"#000000"，赤(red)は "#ff0000"等となります．
では実際に自分の好きな色のRGB形式を調べてみましょう．
- メインメニュー(足跡のアイコン)から「グラフィック」→「GIMP」を選びます．
- メインウィンドウで色パレット（左下２つの四角がある）をダブルクリック．
- 好きな色をマウスでポイントしてみる．右下の"16進3つ"のところにその色のRGB形式が表示される
自分の好きな色が選べたら，自分のHTML中の色を更新してみましょう．
<HTML> <HEAD> <TITLE>Welcome to My Homepage!</TITLE> </HEAD> <BODY text="black" bgcolor="#d7f9c0"> <H1><FONT color="#f409b2">中村のホームページにようこそ</FONT></H1> <HR> <H2><FONT color="brown">今日のひとこと</FONT></H2> 私のホームページにようこそ！！<BR> 今ホームページを作っています．<BR> 更新するまで待っていてくださいね．<BR> <H2><FONT color="#995b04">新着情報</FONT></H2> 2000年6月12日 <BR> 情報活用基礎で初めてのホームページを作りました．<BR> 今日はいい天気でした．<BR> <H2><FONT color="#995b04">自己紹介</FONT></H2> 中村匡秀 (Masahide Nakamura)<BR> <P> 1972年兵庫県生まれ<BR> 現在 <A HREF="http://webserver/">サイバーメディアセンター</A> 助手<BR> <P> <H2><FONT color="#995b04">面白いサイト</FONT></H2> <A HREF="http://webserver/~naka/">中西先生のページ </A> <P> <A HREF="http://www.asahi.com/">朝日新聞</A> <P> <A HREF="http://www.jra.go.jp/">JRA中央競馬</A> <P> <P> <HR> masa-n@ecs.cmc.osaka-u.ac.jp </BODY> </HTML>
このように 表示されるはずです．
ホームページに画像を貼り付ける前に，次のことを確認しましょう．
- 画像ファイルの名前と形式・・・ファイル名は半角でついているか？GIFまたはJPEG形式になっているか？
- ファイルの場所・・・画像ファイルはpublic_html の中にあるか？
- ホームページの公開・・・public_htmlに画像ファイルを入れた後，「自分のWebページの公開」を行ったか？
HTMLに画像を貼り付ける場合，次の3つの方法があります．
これはホームページの文面に直接画像を貼り付ける方法です． これにはイメージータグ<IMG> を使います．オプション SRC, ALTとあわせて次のように覚えてしまいましょう．
<IMG src="画像ファイル名" alt="画像の説明">
src は画像ファイルの名前，altはその説明です．説明はどんな文字列を入れてもかまいませし，省略することもできます．Netscape で見たとき，どのように表示されるか確認してみましょう．
インライン表示の規定値では，画像が左寄せで表示されます．センタリングしたい場合は， <CENTER>〜</CENTER>タグを使い，次のようにはさみます．
<CENTER >
<IMG SRC="画像ファイル名" alt="画像の説明">
</CENTER >
<BODY>タグのオプション，background に画像ファイルを指定することで，ページの背景に画像を貼り付けることが出来ます．
<BODY background="画像ファイル名">
例えば，文字の色を黒，背景をhaikei.gifという画像にしたい時には
<BODY text="black" background="haikei.gif">
とします．この場合，背景が画像haikei.gifになるわけですから，背景の色bgcolorは省略できます．
リンク表示は以前に習ったハイパーリンクと同じ方法です．リンク先で画像が表示されます．
<A HREF="画像ファイル名"> 文字列 </A>
例として，下の画像を貼り付けて見ましょう．
タイトルロゴ(ファイル名：title.gif)
背景用(ファイル名：haikei.gif)
リンク用(ファイル名：sunset.gif)
<HTML> <HEAD> <TITLE>Welcome to My Homepage!</TITLE> </HEAD> <BODY text="black" background="haikei1.gif"> <CENTER > <IMG src="title3.gif" alt="タイトル"> </CENTER > <H2><FONT color="brown">今日のひとこと</FONT></H2> 私のホームページにようこそ！！<BR> 今ホームページを作っています．<BR> 更新するまで待っていてくださいね．<BR> <H2><FONT color="#995b04">新着情報</FONT></H2> 2000年6月12日 <BR> 情報活用基礎で初めてのホームページを作りました．<BR> 今日はいい天気でした．<BR> <H2><FONT color="#995b04">自己紹介</FONT></H2> 中村匡秀 (Masahide Nakamura)<BR> <P> 1972年兵庫県生まれ<BR> 現在 <A HREF="http://webserver/">サイバーメディアセンター</A> 助手<BR> <P> <H2><FONT color="#995b04">面白いサイト</FONT></H2> <A HREF="http://webserver/~naka/">中西先生のページ </A> <P> <A HREF="http://www.asahi.com/">朝日新聞</A> <P> <A HREF="http://www.jra.go.jp/">JRA中央競馬</A> <P> <H2><FONT color="#995b04">ギャラリー</FONT></H2> <A HREF="sunset.jpg">「夕暮れ時」</A>...初めて書いたCGです． <P> <HR> masa-n@ecs.cmc.osaka-u.ac.jp </BODY> </HTML>
このように 表示されるはずです．
ホームページの背景画(壁紙)やロゴ，アイコンや箇条書きマークなどの画像は，ホームページ素材と呼ばれます．インターネットには，ホームページ素材を提供するホームページがたくさんあります．goo や Yahoo などの検索サイトで「ホームページ素材」などで検索してみましょう．
素材の利用方法は，ほしい画像の上で「右クリック」→「リンクを名前を付けて保存」でダウンロードすることができます．
ただし，ホームページ上の画像やテキストは，作成者の知的財産です．肖像権や著作権などに絡む場合があるので，他人の写真や肖像画など，ダウンロードの可否が明確でない場合には，自分のホームページに使うのは控えましょう．
自由に使ってよい素材には大抵「フリー」「無料」「使ってください」などの記述があります．ホームページ素材を用いて，自分のページをどんどんグレードアップしてみましょう．
初級編では，別のページ(URL)へのハイパーリンクを学習しましたが，URL以外へのリンクの方法もあります．
index.html は自分のホームページの玄関のようなもの(トップページという)です．自分のホームページの情報量が多くなってきた場合，index.htmlにすべての情報を詰め込んでは，とても見にくくなります．その時は，新たに別のHTMLファイルを作って，そこへのリンクにしましょう．要領は簡単です．
- index.htmlをつくったときと同じ要領で，gEditでHTMLを書く．
- 適当な名前(例： newpage.html)をつけて，public_htmlの中に保存する．
- index.htmlからリンクする．
<A href="newpage.html"> 新しいページへ </A>
参考 (余力のある人向け)： public_htmlのファイルが多くなってきたら，public_htmlの中にディレクトリを作って整理しましょう．ディレクトリ中のファイルは，スラッシュ/でくぎって指定します． また，親ディレクトリは..で参照します．
- 例A： public_htmlの中に，ディレクトリnewdirをつくり，その中のhomepage.htmlを参照する場合．
- <A href="newdir/homepage.html"> 新しいページ </A>
- 例B： 例Aのhomepage.htmlから，親ディレクトリのindex.htmlを参照し直す場合
- <A href="../index.html"> ホームに戻る </A>
ファイルへのリンクはHTMLに限りません．テキストファイル(.txt)や画像ファイル(.gif, jpg)なども同様です．
メールアドレスへのリンクを指定することもできます．この場合，リンクをクリックすると，標準のメール作成ソフト(センターではNetscape Messenger)のメール作成画面が現れます．アドレス指定には，mailto:を使います．
例：<A href="mailto:ie-014nm@ecs.cmc.osaka-u.ac.jp"> 中村へメールする </A>
1ページが長くなってきた場合，ページのある部分にリンクすることで，その場所へジャンプすることができます．参考：別ページのページ内へのリンク(ジャンプ元）を設定したい場合は，<A href="別ページのURL#そのページ内ラベル"> 等とします．
- ジャンプ先の設定・・・まず，ジャンプ先にしたいテキストの部分をアンカータグ<A>〜</A>ではさみ，オプションnameでジャンプ先の名前をつけます．
例：<A name="jump_here"> ここにジャンプしてきます． </A>
- ジャンプ元リンクの設定・・・先ほど設定したジャンプ先へ飛ぶためのジャンプ元を，ハイパーリンクで作ります．ジャンプ先の指定は，#（シャープ)をつけます．
例：<A href="#jump_here"> クリックすると，ページ内へジャンプします</A>
ホームページ上達への早道は，たくさん練習することです．インターネットのさまざまなページを訪れて，「あ，素敵だな」と思ったら，ページのソースを見てみましょう．それをまねることで，色々な技術が身に付くようになります．また，HTMLに関する図書もたくさんありますので，図書館で借りたり，書店で買うなりして，どんどんスキルアップしましょう．
Copyright to Masahide Nakamura, Cybermedia Center, Osaka University
masa-n@cmc.osaka-u.ac.jp
http://webserver/~masa-n/
(Last Updated on 2001-06-22 14:16:28)