Step.1.1-色を変えてみる…カラーコードを知る。
オンラインエディタを使ってソースを見てみると、あちこちにcolorという文字が見えます。
そして、その後に＃○○○○○○ という形で数字が並んでいます。
これが色を表しているらしい…
まず始めに、＃○○○○○○（カラーコード）と色の関係について簡単にまとめておきます。
カラーコードは16進数6桁の値で表します。2桁ずつ赤，緑，青の成分を指定します。
加法混色（光の三原色とも呼ばれ、重ねあわせるほど明るくなる）ですので、
すべての値を最大（ｆ）にすると白、すべてを最小（０）にすると黒になります。
| 色名称 | 色表示 | １６進数 | 色名称 | 色表示 | １６進数 |
|---|
| 赤 | 緑 | 青 |
赤 | 緑 | 青 |
|---|
| Black (Black: 黒色) |
|
00 | 00 | 00 | Yellow (Yellow: 黄色) |
|
FF | FF | 00 |
| Blue (Blue: 青色) |
|
00 | 00 | FF | Gray (Gray: 灰色) |
|
80 | 80 | 80 |
| Green (Green: 緑色) |
|
00 | 80 | 00 | Orange (Orange: 橙色) |
|
FF | A5 | 00 |
| Purple (Purple: パープル) |
|
80 | 00 | 80 | Red (Red: 赤) |
|
FF | 00 | 00 |
| Violet (Violet) |
|
EE | 82 | EE | White (White: 白) |
|
FF | FF | FF |
主な色は色名でも指定できます。（100以上の色が色名指定できるようです）
自分の望む色の「色名」「カラーコード」が知りたい場合は以下のサイトを参照してください。
カラーコードの意味が何となく分かっていれば自分で数字をいじって調整することもできると思います。
実際にどんな色になるか、どんな風に見えるかを確認できるサイトもあります。
- Gens Party−color chart−
-
左フレームで背景、文字色のRGB値を入力すると、右フレームに色が反映されます。背景のみ、文字のみ、両方の3パターンのいずれかの入力方法を指定できます。
また、こんな便利なソフトウエアもあります。
- プレジャースカイ
- フリーのソフトウエア「Colors」がダウンロードできます。これは、画面の色から色名を調べたり、逆に色名からRGB値などを調べたりすることができるものです。
- ホームページ作成支援カラーコード辞書
- ＦＥＰ（ＩＭＥ）に組み込むカラーコード辞書です。 例えば「あか」と打つと「#FF0000」のように変換してくれます。 ホームページのソースを書くのにお役立て下さい。
カラーコード、色名指定について簡単に知ったところで、色の変更に取りかかります。
ここでは、body (bgcolor／text／vlink／alink／vlink)とfont color、をいじってみました。
BGCOLOR=ページの背景色です。BACKGROUNDに壁紙が設定されているときは、壁紙に隠れてしまいます。
TEXT=このページの（特に色指定のない）テキストの色です。
LINK=リンク設定部分の色です。
ALINK=読み込み中のリンクの色です。
VLINK=訪問済みのリンクの色です。
FONT COLOR=部分的にテキストの色を変えることができます。
オンラインエディタを用いたソースの編集の仕方が分からない方は
Step0（自己紹介の裏話）を先にご覧になってくださいね。
Step.1.2-素材を手に入れる
素材の探し方と保存（ダウンロード）の仕方
イメージライブラリ
Step.1.3-壁紙の設定
イメージなどのアップロードの仕方
ここに、下の方（ゲストブックなどへのリンクアイコン）を削除した旨をかいておく
Step.1.4-文章を書く
自己紹介の表の中身を書き換えることにしました。ソースと表示画面を見比べれば
どこがどこに当たるか、わかると思います。左の列に、自分の作りたいコンテンツ名、
右の列に説明を書くことにしました。
また、タイトルの下や、テーブルの上に説明の文章を書くことにしました。
ソースを書くときに気をつけなければならないのは、普通に書いても書いたとおりに表示されない、ということです。
文章はブラウザではソース通りに改行されず、横にひたすら長くなり、ウインドのはじっこで自動的に改行されます。
ですから自分の思い通りに改行させるにはタグを入れる必要があります。
- <br>…この位置で改行されます。
- <pre></pre>…このタグの間の文章はソース通り（書いたとおり）に改行されます。
また、文章の区切りやアクセントに直線を挿入したいときには
<hr>と入れると
自動的に画面の幅いっぱいに直線が挿入されます。
Step.1.5-ほかのページやサイトへのリンク
<a href="○○.html">△△</a>
実際にはタグは表示されず△△だけ表示され、△△をクリックすると、○○.htmlのページへ移動できます。
” ”の間の書き方
今いるところと同じURLで、最後だけが変わるときは変わる部分だけを書けばOK。
それ以外の可能性は、フォルダ（ディレクトリ）を新たに作ると出てきます。
indexは「親フォルダ」にあります。フォルダにはファイルの他にフォルダ（サブフォルダ）も入れることが出来ます。
項目ごとに新しいフォルダを作り、同じ項目のファイルを同じフォルダに入れたいと思ったとします。
（まだファイルやフォルダの作り方はわからない状態です。）
その場合、このページからリンクするときには”フォルダの名前/ファイルの名前.html”と指定します。
友人のところなどにリンクしたいときは例えば、http://〜.html と最初から最後まできちんと書きます。
…わかりにくいですね。すみません。
わかんなかったら、すべてのリンク先を http://〜 の形で書いてしまえば問題ないんじゃないかな？
ここでは、上で削除してしまった、ゲストブックなどへのリンクを設定しました。
また、今後新しいページを作る毎に、この表にリンクの設定を追加しました。
Step.1.6-メールの宛先を記入する
<a href="mailto:XX@YYYY.ne.jp">メールお待ちしています</a>
今、なにもかかれていないmailto: の直後に、自分のメールアドレスを書きます。それでOKです。
ここまでは、「よくわかんないけど、出来ちゃったページを部分的にいじってみた」だけのページです。
まだ、トップページしかないので、ちょっと寂しいですよね。
そこで、新しいHTMLファイル（＝新しいページ）を作成する事にしました。
こちらも参考にしてください