毎週金曜日配信 What's New 2002/11/1
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
初心者のためのホームページ作り
http://www.scollabo.com/banban/
＜第25号＞
banban@scollabo.com
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
この講座はタグを覚えてテキストエディタだけでホームページを作るという、ど
ちらかというとやや専門的な作業が中心になります。各種の専用のオーサリング
ソフトとは一線を画して、思い通りのプロ並みのＨＰを作ることが出来ます。
時には専門的で難解な言葉も出てきますが、なるべく初心者にも分かりやすく
解説していきます。どうぞ、気軽な気持ちでお付き合いください。講座をすすめ
る中で分からない点がありましたら、ご遠慮なくメールください。
当講座ではHTML4.01を中心とした文法が主体となっています。なお、このマガ
ジンは等幅フォントでお読みいただくと快適に読めるようになります。
今週の課題 ■ 色の組み合わせ --- 基礎と応用
■ FTP --- ファイルのアップロード
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆色の基礎知識
サイトを訪れた時に、真っ先に飛び込んでくるのは色です。色の使い方でサイト
全体の性格が判断されてしまう重要なポイントです。
「 Webで扱う色」については、本誌第７号をお読みください。今回は色そのも
のの基礎知識とその応用について詳しく解説します。
（なお、色を扱うためにメールマガジンでは再現が困難であることをお断りして
おきます。実際の色の再現については本誌サイトの Webページ「今週のおさら
い」を参照してください。非常に苦労して作ったページです。）
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆色の属性
色を使ってページを構成する上で「配色」を考える必要があります。色の組み合
わせにとっては、見にくい、見やすいなどの質が問われます。
背景色や文字色、イラストに使う色など、その組み合わせには絶妙な味わいが
あります。
色には３つの属性が備わっています。「色相」「明度」「彩度」この３つの基
礎的な知識を学んだ上で配色について解説します。
■色相
色には、黒や灰色、白などの色のない無彩色と、それ以外の色のある有彩色と
に分かれており、有彩色には「色合い」と呼ばれる「色相」を持っています。
例えば、赤の隣りに橙色（オレンジ）というように、近似色を隣り合わせに
していくと、色の輪ができます。これを「色相環」と呼び、色相環上の相対す
る位置にある色を「補色」といいます。
赤 #ff0000 と青 #0000ff は「補色」の関係にあります。補色関係にある近
辺の色を「準補色」と呼び、赤に対して、緑系の色は準補色になります。
■明度
色には明るさの度合いがあり、それを「明度」と呼びます。基本的には白から
黒までのグレースケールを基準として考えられ、白に近づくほど明度は高く、
逆に黒に近づくほど明度が低くなります。 RGBのそれぞれに色を混ぜることに
より明度が変わってきます。
■彩度
彩度とは色の鮮やかさ（色の強さ）の度合いをあらわし、無彩色では彩度があ
りません。純色の赤、青、緑に白や黒などの無彩色を少しずつ加えていくと色
の鮮やかさが薄れていき、彩度は低くなっていきます。純色に近いほど彩度が
高いということになります。
これら色の３属性をまとめて、ある色相に関する部分を取り出して、明度、彩
度に応じて分類すると、１つの色調（トーン）が浮かび上がってきます。
・ビビッド 派手
・ブライト 明るい
・ライト 質素、地味
・ダーク 暗い
色にはこれらの「色調」を合わせ持っています。同じ赤でも、彩度、明度が異
なれば派手にもなったり、地味にもなります。色を使うダイナミックさがこの
ことでも十分お分かりいただけたと思います。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆色のもつ意味合い
ページ全体の色調で、サイトの雰囲気がすっかり変わってしまいます。例えば、
本誌サイトのメインカラーに緑色（#090）を使っていますが、これを青色に変え
ただけでぜんぜん違うページに見えてきます。
色とその配色はページにイメージと印象を与えます。見る人にある種の感情を
生み出す不思議な力があります。代表的な色のもつ意味を列挙しました。
■赤（#ff0000、#ff0033）
赤は情熱的、躍動感、生命力などのイメージがあります。一方で、闘争心や怒
り、熱狂という表現もあります。また強い禁止や血を表す不安定な意味も持っ
ています。補色は青、準補色は明るい緑系です。
■橙（#ff6600、#ff9900）
橙（オレンジ色）は親しみやすく爽快感と躍動感があり、きわめて暖かな色合
いです。補色は濃い青で、準補色は青や緑になります。
■黄（#ffff00、#ffff66）
黄は陽気で健康的なイメージを持ち、華やかさや明るさを表します。
補色はかなり濃い紺色で、準補色は青系、紫系となります。
■緑（#00ff00、#009900、#33ff00、#00cc00）
穏やかで落ち着いた雰囲気を作ります。緑は「植物」「森」をイメージし、温
かみと健康的、清涼感、新鮮な雰囲気を醸し出します。色自体に強く主張する
性格がないために、コンテンツを引き立てる機能があります。
補色はピンク系で、準補色は紫系になります。
■青（#0000ff、#000099、#0033ff）
「寒色」の代表的な色で、理性的なイメージがあります。また、空や海の色で
あることから爽快感、穏やかさ、神秘性などが連想され、新鮮な感情を与えま
す。一方で、冷たい、寒いというイメージも特徴的です。
補色は赤、準補色はオレンジ、黄色系です。
■紫（#800080、#6600ff、#9933cc）
自然界には比較的少ない色で、神秘性や高貴、非日常性を表します。時には権
力を象徴し、退廃や爛熟、狂気をもイメージします。一方で高級感や優雅さ、
色気もイメージし、使い方によっては、陰湿、下品なイメージになります。
補色は明るい緑、準補色は赤、青になります。
■茶（#800000、
茶（マルーン系）は土をイメージし、自然、環境、大陸を表わし、一方で高級
感、気品なども演出できる色です。補色、準補色を使うと落ち着いた雰囲気が
出ます。
補色は濃い緑系、準補色は濃い紫系です。
■黒（#000000）
黒は夜、暗い、怖いをイメージしますが、一方ではモダンで大人っぽく、シッ
クな雰囲気もあります。色として使うには難しく、他の色との兼ね合いで失敗
するケースも目立ちます。何故か、アダルト系のサイトには黒の背景色が多い
ようです。かえって危険なイメージがあります。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆実践的な配色
さて、色のもつ意味合いが理解できたところで、実際に使用する「配色」につい
て解説します。ただし、テキストのみのメールマガジンでは、おのずと限界があ
りますので、 Webサイトの「今週のおさらい」および「サンプル」をあわせてご
覧いただければ、より理解が深まると思います。
なお、使用する色コードはすべてWebセーフカラー（216色）です。
■モノトーン
黒、灰色、白を基調にしたモノトーンのページは、高級感、大人、モダンな雰
囲気を演出します。上手に利用できれば格調の高い雰囲気が出せます。
ベースとなる背景色 白（#ffffff）
ベースとなる文字色 黒（#000000） 濃い灰色（#666666）
タイトルの文字やイラスト 灰色（#999999、#666666）
ワンポイントの背景色 黒（#000000）
イメージ図
http://www.scollabo.com/banban/magazine/sample/mmsample_034.html
■暖色系の配色
赤やオレンジ、茶系などの暖色系の色を使った配色など、同一系色で統一する
と、派手な中にも落ち着きが見られ、彩度を落とすことで女性的で暖かな雰囲
気が出ます。
ベースとなる背景色 白（#ffffff）
ベースとなる文字色 赤茶（#cc0033） 茶系色（#990000）
タイトルの文字やイラスト 赤（#ff0000） 赤茶（#cc0033、#cc3366）
ワンポイントとなる背景色 肌色（#ff9999）
イメージ図
http://www.scollabo.com/banban/magazine/sample/mmsample_035.html
■エスニックを演出する配色
赤と緑をなどのビビッドな色を配することで、エスニックな雰囲気が出せます。
補色の関係を利用した配色がポイントです。
ですが、色弱障害者に対する配慮も忘れてはいけません。この点が難しいと
ころでしょう。
ベースとなる背景色 白（#ffffff）
ベースとなる文字色 白（#ffffff） 茶系色（#cc3366）赤（#ff0000）
タイトルの文字やイラスト 赤（#ff0000） 黄（#ffff00）
ワンポイントとなる背景色 朱（#ff6633）黒（#000000）
イメージ図
http://www.scollabo.com/banban/magazine/sample/mmsample_036.html
■寒色系の配色
青系統を中心とした配色は、一見寒々しい雰囲気になりますが、明度や彩度を
変えることにより落ち着いた爽やかなイメージに仕上げられます。
ベースとなる背景色 白（#ffffff）
ベースとなる文字色 濃い青（#000099） 黒（#000000） 白（#ffffff）
タイトルの文字やイラスト 濃い青（#003399） 白（#ffffff）
ワンポイントとなる背景色 薄めの青（#0066cc）薄い青（#99ccff、#6699ff）
イメージ図
http://www.scollabo.com/banban/magazine/sample/mmsample_037.html
■淡明色の配色
いわゆるライト系の色で全体の配色を設定します。パステルカラーの雰囲気を
持った淡い色は、彩度と明度の高い若々しい印象を与えます。
ベースとなる背景色 白（#ffffff）
ベースとなる文字色 濃い緑（#006600） 濃い青（#000099
タイトルの文字やイラスト 濃い緑（#006600） 薄い桃色（#ffcccc）
ワンポイントとなる背景色 薄い緑（#99ff99、#ccff99、#66cc66、#ccffff）
イメージ図
http://www.scollabo.com/banban/magazine/sample/mmsample_038.html
■明度を下げた中間色の配色
ライト系の色の明度を下げると印象が一変します。落ち着いた雰囲気とシック
な大人のイメージになります。ただし赤系の色の取り扱いには注意が必要です。
赤系の色を取り混ぜると、変に下品になる可能性があります。
ベースとなる背景色 淡い紫（#ccccff）
ベースとなる文字色 濃い青（#6666cc）濃い青緑（#006666）白（#ffffff）
タイトルの文字やイラスト 濃い青紫（#6666cc） 濃い青緑（#006666）
ワンポイントとなる背景色 濃い青（#6699cc） 濃い青緑（#006666）
イメージ図
http://www.scollabo.com/banban/magazine/sample/mmsample_039.html
■濃暗色系の配色
濃い茶やマルーン系の色は全体的な明度が下がり、暗いイメージになってしま
います。彩度の高い明るい色を織り交ぜることにより、芯の強い主張が表現で
き、気品のある引き締まった雰囲気が演出できます。
ベースとなる背景色 白（#ffffff）
ベースとなる文字色 マルーン（#660000、＃660033） 黒（#000000）
タイトルの文字やイラスト 薄い桃（#ffcccc） 薄い朱（#ff6666）
ワンポイントとなる背景色 マルーン（#660000、＃660033）
イメージ図
http://www.scollabo.com/banban/magazine/sample/mmsample_040.html
◆まとめ
この項ではほんの一部しかサンプルを取り上げることができませんが、今後は皆
さんの「センス」を磨いて、いろいろな配色を試してください。
また、サンプルはあくまでイメージです。当方の稚拙なイメージで作成したも
のですので、決して「絶対」ではありません、ご了承ください。
色はそれこそ色々です。考え方や思想によって配色はどのようにも変化させる
ことができます。簡単なようで、実は奥が深いのも色の取り扱いでしょう。楽し
い作業ではありますが、「色」はページ全体のデザインを決定してしまうくらい
の「力」を持っています。
参考：Web Safe Color/カラーチャート一覧（216色）
http://www.scollabo.com/banban/lectur/websafe.html
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆Tips --- ガンマ値
ガンマ値とは「明るさ」を表わす単位で、値が大きいと色が暗くなります。
Windowsマシンのガンマ値は「2.2」、Macintoshでは「1.8」となっていますの
で、同じ色でも、Windowsでは色が濃く、Macintoshでは薄く表示されます。
現在、スタイルシートのCSS Lebel 3 の仕様が検討されており、色についての
入力デバイスと出力デバイスで同じ色を再現することができるよう、設定可能に
なると言われています。
現段階では最終的な規格としてどうなるのか分かりませんが、Web においても
本格的なカラーマネージメントが考えられていることは確かです。
Color Profiles for CSS 3(W3C Working Draft) CSS Lebel 3草案
http://www.w3.org/TR/css3-roadmap/
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆FTP --- ファイルのアップロード（ホームページの開設）
ホームページを作って公開するには、 Webサーバにそのデータをアップロードし
なければなりません。アップロードと言うのは、ローカル（皆さんのパソコン）
マシンにあるデータをサーバに転送することです。ダウンロードの反対の意。
■FTPクライアントソフト
ファイルのアップロードは、Telenetでも可能ですが初心者にはややこしくて
少し難しいものです。ここでは FTP専用のクライアントソフトを使いましょう。
ソフトウェアはフリーでも優れたものがありますので、インターネットで探
してください。私もフリーソフトを昔から使っています。
●Windows用FTPクライアントソフト
FFFTP 人気の左右分割型のフリーの日本語FTPクライアント
http://www2.biglobe.ne.jp/~sota/
英語版 WS_FTP 95LE 個人使用フリーの定番FTPクライアントソフト
http://www.ipswitch.com/
●Macintosh用FTPクライアントソフト
FreePPP 2.6.2 米国FreePPP 2.6.2 日本語版のフリーソフト
http://www.lovetrain.com/
「電視鳩1.02」（AppleScriptによるFTPクライアントソフト）
http://www.geocities.co.jp/SiliconValley-Bay/6066/osx.htm
Transmit MacのFinder感覚で操作できるFTPソフト
http://www.02.246.ne.jp/~yingming/macclinic/Drug/yakkyoku.html#a3
NextFTP シェアウェア（2000円）非常に高機能で 2000円の価値以上あり
http://www.toxsoft.com/
■サーバ
さて、肝心のサーバですが簡単にその辺には転がっておりません。皆さんがイ
ンターネットに接続する際には、プロバイダにご厄介になっているハズです。
そのプロバイダのホームページにアクセスして、いろいろと調べてみてくだ
さい。どこかに「ホームページ」というキーワードがありましたら、片っ端か
らクリックすると、ホームページ公開についての「手続き」があるはずです。
プロバイダの「ホームページ開設」はほとんどが無料でサービスされていま
す。手続きを踏んで「開設」を依頼すると、IDとパスワードが記載された案内
が必ず送られてきます。
しっかりしたプロバイダは郵送してくれますし、そうでない場合はメール
で案内が送信されます。（本来は安全のため、郵送がいいのですが）
メールで送られてきた転送先の URL、ID、パスワードなどはメーラーに残さ
ず必ず印刷してから削除しておくことをお奨めします。
■設定と接続
案内には、ID、パスワード、そしてサーバの URLが必ず記載されています。そ
の内容は、FTPクライアントソフトの設定で入力する際に必要になります。
利用するソフトによって異なりますが、ほとんどが転送先のサーバの URL、
ID、パスワードを要求してきますので、大文字小文字に注意して確実に入力し
ます。入力された設定に問題がなければ「保存」ボタン、あるいは「ファイル」
から「保存」を選んで保存します。次の転送時にはいちいち入力せずに接続で
きます。
最初のうちは戸惑ってなかなかうまく接続できないことがありますが、落ち
着いて、ソフトのヘルプを参照するようにしましょう。
当たり前のことですが、「ファイルの転送」には、インターネットに接続で
きる環境にあることが前提です。
■URLは半角小文字で
転送するファイルそのものが URLです。ファイル名はすべて半角小文字で設定
してください。全角の日本語、全角の英数字、半角カタカナは使えません。
また、トップページは必ず index.html です。これも忘れないようにします。
■ファイルの転送（アップロード）
大体のソフトが左側にローカル、右側にサーバのディレクトリ一覧が表示され
指定したローカルのファイルを、サーバへドラッグするか「転送ボタン」を押
してアップロードします。
ファイルには２つの形式があります。１つはHTML文書のような「アスキー」
ともう１つが画像のような「バイナリ」の形式です。初心者がファイルの形式
を認識しながら転送するのは厄介なので、「AUTO（自動）」を選んでおきまし
ょう。ソフト側で簡単に設定できるようになっています。
CGI プログラムをアップロードする場合には、必ずパーミッション（権限）
の設定も忘れないようにしてください。これもヘルプを参照して操作するよう
にします。
パーミッションについて
http://www.scollabo.com/banban/cgi/cgi_005.html
■ディレクトリの設定
トップページは指定された領域のディレクトリに必ず index.html として転送
します。画像フォルダや他のフォルダがある場合には、領域内に同じ名前のデ
ィレクトリ（フォルダ）を作ってから、ファイルを転送します。ソフトウェア
によっては、フォルダごと転送して、同じ名前のフォルダをサーバに作ってく
れるものもあります。
ディレクトリ名も半角小文字を指定します。サーバは大体がUNIX系なので、
大文字と小文字を厳格に区別しますので注意してください。ローカルでは大文
字と小文字を区別なく参照できても、サーバはそうはいきません。
■リンク切れ、画像の表示
ローカルマシンでは必ずすべてのリンクが問題ないかを検証します。サーバに
転送する際の半角小文字になっているかをチェックしましょう。
画像が表示されないのは、画像ファイルを転送していない、パスが間違って
いるか、ファイル名が違っているなどのどれかです。また、外部スタイルシー
トや外部スクリプトなどがある場合も、忘れずに転送してください。
■アップロードが完了したら
何より先にブラウザで確認します。その際に、ブラウザのキャッシュをクリア
しておきましょう。
インターネットに接続して、自分のホームページの URLを入力してブラウザ
でチェックします。表示までの時間や、リンク切れがないか、画像はすべて表
示されるかを確認します。
表示までの時間が長くかかる場合は、画像の容量が大きすぎることが考えら
れます。容量が重いと表示までにかなりの時間がかかり、訪れるユーザに逃げ
られてしまいます。早急にレタッチソフトで修正しましょう。
■プロバイダ以外の無料の Webサーバ
無料で公開しているサーバはたくさんあります。お金もかけずにホームページ
を開設する場合にはうってつけです。ネットで探してみましょう。
ただし、無料なので、ページの中に広告が入るケースが多いようです。これ
ばかりは仕方がありません。「タダ」なので文句は言えません。
広告バナーの画像が重たくて表示に時間がかかる場合は、サーバの管理者に
相談して軽くしてもらいましょう。
■ホームページアドレス
プロバイダのサーバでホームページを公開するとホームページのアドレスは次
のようになります。
http://プロバイダのドメイン名/あなたのディレクトリ名/index.html
つまり、
www.scollabo.com ドメイン名
/banban/ ディレクトリ名
index.html Webページのトップページ
ご自分のディレクトリに index.html がある場合は
http://www.scollabo.com/banban/ というように、スラッシュで区切っ
て URLを表示させることができます。HTTPは自動的にディレクトリ内のindex
ファイルを探し出してブラウザにそのデータを返して表示してくれます。
ただし、index.htmlがないと「404」エラーを返します。
FTPファイル転送クライアントソフトの使い方
http://www.scollabo.com/banban/apply/ap6.html
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆Tips --- BBS掲示板と「荒らし」対策
ホームページを作って公開する中で、最近「掲示板」が増えてきています。無料
のレンタル掲示板や、フリーの CGIプログラムが利用できるため、簡単に作るこ
とが可能になっていますが、それに伴って「掲示板荒らし」の被害も急増してい
ます。
掲示板荒らしとは、個人サイトに対する誹謗・中傷の投稿などや、大量のテキ
ストを繰返し投稿したり、HTMLタグで文字を極端に巨大化するなどし、掲示板の
機能をマヒさせようとする行為です。
現在、こうした問題に対処するため、「荒らし」対策の施された BBSプログラ
ムなどが作られるようになっています。レンタル掲示板などでは、連続投稿の防
止やアクセス制限、匿名プロキシの禁止など対処機能を備えているかを確認して
おくようにしましょう。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
今回はここまで、ではでは・・
今週のおさらいはＷｅｂページにも掲載しましたので、是非見ておいてください。
ＷｅｂページはHTML分の実行結果のサンプルもあり、より分かりやすく説明して
います。あわせて過去の記事のおさらいも掲載しています。
（今週のおさらい）
http://www.scollabo.com/banban/magazine/backnm_025.html
次回は、文字の実体参照（特殊文字）について詳しく解説します。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、お使いのOS、通常使っているブラウザ、使っているテキ
ストエディタなど、なるべく分かりやすく制作環境を明記していただけると回答
しやすくなると思います。
ただし、平日の昼間は会社勤めなので、返事が遅れることがあります。ご了承
ください。
発行者 ばんばん
協 力 スズキ・コラボレーション http://www.scollabo.com/
配信エンジン まぐまぐ http://www.mag2.com/ （ID 0000090196）
誤字・脱字・変換ミス・表現欠乏などには平にご容赦願います。なお、マガジン
のすべての記述に誤りや重大なスペルミスがある場合、叱咤と罵声と共に私まで
突きつけていただくと幸いに思います。
バックナンバー こちらで公開しています。
プレーンテキスト http://www.scollabo.com/banban/magazine/magazine.html
各号のおさらい http://www.scollabo.com/banban/magazine/
アーカイブ http://www.scollabo.com/banban/daf/archive.html
講座教材 http://www.scollabo.com/banban/daf/material.html
まぐまぐの過去記事 http://backno.mag2.com/reader/Back?id=0000090196
配信の変更・中止はこちらです。
個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助か
ります。
当サイトにて http://www.scollabo.com/banban/magazine/top.html
まぐまぐにて http://www.mag2.com/m/0000090196.htm
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
＜えでぃた〜ず・るーむ＞
早いものでもう11月、あと２ヶ月で今年も終わりです。この時期になると急激に
寒くなって、油断するとヒドイ目にあいますのでご注意してください。
各企業も年末に向けた取り組みで忙しくなってきます。私もその例外に漏れず
思うように自由な時間が取れず、あわただしい日々を送っています。
それでも忙しいことはある意味で歓迎です。ヒマになると何時リストラされる
か分かりません。コマネズミのように動き回っています。というより、忙しそう
な真似をしているほうが多いようですが・・これもわが身の防御策です。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆著作権について
個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中の内容について、無断で使用することを固く禁じます。
なお、記事中のスタイルシート、HTMLをご自分のページ作成に自由に使ってい
ただいても差し支えありません。
Copyright(C) 2002 www.scollabo.com/banban/
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
Copyright(C) 2002-3003 banban@scollabo.com