初心者から始めるホームページ作成とアフィリエイト

　ホームページを製作しているときに頻繁に使う要素にdivがあります。このdiv等に、id属性やclass属性を与えて、CSSでデザインを整えていくのですが、そもそもid属性とclass属性の違いは何でしょうか。

　違いをまとめるとこうなります。

1.　id属性は、一つのHTMLで製作された文書の中で同じ名前のものは複数使うことができません。これに対して、class要素は同一のHTML文書の中に複数存在してもよく、一つの要素に対して複数のclass属性を与えることもできます。

2.　複数のCSSが一つの要素に競合した場合に、優先して使われるCSSを決める仕組み(個別性計算)が異なります。ちなみにid属性のほうがclass属性よりも優先されます。個別性計算やCSSの優先度を決める仕組みについて知りたい方はこちらから

3.　id属性とclass属性では使用できる文字が異なります。id属性は識別子を指定するためのデータ形式であるID型にあたり、任意のアルファベットで始まり、アルファベット、数字、ハイフン、コロン、ピリオドしか使うことができません。一方、class属性は、文字データを指定するCDATA型(Character Data)にあたり、任意の文字列を記述することができます。

　　

　一般的なブラウザでは、リンクテキストに下線が付いていることがほとんどです。もちろん、ユーザーがリンク部分を視覚的に確認しやすいというメリットもありますが、デザインを考えると下線が邪魔になる場合もあります。

　そこで、text-decorationプロパティを利用して、下線を消すことができます。text-decorationでnoneを指定して、下線を消し。疑似クラスのhoverを指定することでマウスがテキストリンク部分に重なったときにだけ下線を表示することができます。

　サンプルソースを書くとこんな感じになります

a {text-decoration:none}
a:hover {
text-decoration: under-line;
color: #eb7148;
}

普段、デザイン的な問題からナビゲーション部分などに画像を使うことが多いと思いますが、CSSのborderプロパティを使って見栄えを良くする方法があります。

やり方は簡単です。border-widthを使って、ボックスの左と下だけボーダーを表示させつつ、太さを調節します。さらに、colorプロパティで色を指定すれば出来上がりです。

　CSSのテックニックはこちらのページで紹介されています。

　ホームページを作るとき、何らかのナビゲーションは必ず作ると思います。その時、どのくらいの項目をナビゲーションに含めるのが良いのでしょうか？たくさん項目を作り、Webサイトを平面的な構造にした方がユーザーが使いやすいのでしょうか、それとも、項目を少なめにし複数の階層をもつWebサイトにしたほうが良いのでしょうか？

　この点について参考になるのが、MSR(マイクロソフトリサーチMicrosoft Research)のナビゲーションの項目数と特定の情報を検索するまでにかかるストレスと時間についての研究です。

　同研究は、512ページからなるコンテンツを次の三つの構造に分けて調査しました。

　1. 　8×8×8　(三階層)
　2. 　16×32　 (二階層)　
　3.　 32×16　 (二階層)

　この研究では、2の構造が最速で検索でき、ユーザーの混乱度合いも低いというデータがとれました。また、この実験の被験者の主観的な評価では、3の構造が最も、好まれる結果となりました。つまり、Webサイトは、広く浅い構造のほうがユーザーにとって、使いやすいといえます。

　MSRは、1991年にマイクロソフトが設立した組織で、ネットワークやグラフィック等の研究を行っています。MSRのホームページでは、様々な研究結果を公表していますので、とても役に立つと思います。

　MSRは、こちらから
http://research.microsoft.com/
　

　色には、心理的な効果があります。色によって、見るものの大きさや重さがことなって感じられるのです。例えば、ジュースの赤色の缶と青色の缶を同じ距離に置くと、赤色の缶のほうが青色の缶よりも近くに見えます。

　色の心理的効果は次のように分類できます。

知覚的印象
　
　1.視覚的印象　例：近くに見える

・色による距離感は、色相による影響が強く、長波長の色(赤、オレンジ、黄色などの暖色系)ほど近づいて見え、短波長の色(青などの寒色系の色)ほど遠くにあるように感じられます。
　
　
　2.触覚的印象　例：暖かく感じる。硬そう、柔らかそう。軽重感。
　　　
・赤などの長波長の色は暖かく感じられ、青等の短波長の色　は冷たく感じられる。注意したいのが、基本的な色でも色相が暖色系や寒色系にずれると印象が変わるということです。例えば、赤でもオレンジよりの赤は暖かみが感じられ、紫よりの赤は冷たさが感じられます。

・明度が低い色ほど、硬い印象があり、明度が高いと柔らかい　　　印象がうまれます。

・明度が高い色ほど軽く感じられ、明度の低い色ほど重く感じられる。唯、実際に同じ重さで、明度差のあるものを持ったときは、明度が高い物のほうが重く感じられる。これは「軽そうだ」という色による先入観が、実際に持ち上げることで感じる印象に影響を与えるからです。

色彩感情
　：美しい、陽気な、自然なといった感情的な印象

1.興奮・沈静感

・鮮やかな色、暖色系の赤から黄色の範囲の色には興奮を感じ、彩度の低い寒色系の色には沈静感があります。

2.派手・地味感
　　　
・彩度との関係が強く、彩度が高い色は、派手に感じ、逆に彩度が低くなると地味に感じられる。例えば、赤系の色でも彩度の低い赤は、地味に感じられ、緑系の色でも彩度の高い色は派手に感じられる。


　また、特定の色から、それと関係した物事や雰囲気を思い浮かべることを色彩連想といいます。唯、この色彩連想には個人差があり、生活圏によっても差が出てきます。例えば、日本では赤から、太陽やリンゴ等が連想されますが、太陽は欧米では黄色で描かれることが多く、リンゴは英語圏では緑のイメージが強い。apple greenという色名はあっても、apple redという色名はありません。(普遍的な連想もあります。黒から死や不安といった印象を受けるのは、年代や場所にかかわらず世界中で確認されています。)
　
　色彩連想をまとめた資料は、財団法人日本色彩研究所が販売しています。
http://www.jcri.jp/
　　　
　

　ファッション業界で使われる基本的な配色技法で、ベースカラー、アソートカラー、アクセントカラーを考慮してコーディネートする方法があります。

　ベースカラーとは、全体の基本となる色で、全体の支配色にもなる色です。コーディネートするときは、ベースカラーだとわかり易いように、ベルトや靴等も同じ色でまとめ全体に占める面積を増やします。
　
　アソートカラーとは、ベースカラーに組み合わせる色です。ベースカラーを基準にし、同じ色相で明度や彩度を変えたものを使います。ベースカラーとアソートカラーを使うことで全体的な調和がとれます。
　
　アクセントカラーとは、コーディネート全体のアクセントになり、演出効果を上げる色です。使用面積は少なめにし、周りの色より目立つ色や対照的な色を使います。ベースカラーとアソートカラーでは地味になってしまう配色もアクセントカラーを効かすことで、洒落たイメージを出すことができます。

　このファッション業界で使われる配色技法をWebサイトに応用することもできます。例えば、使用する面積について、ベースカラーを全体の70%、アソートカラーを全体の25%、アクセントカラーを全体の5%と決めることでバランスをとることができます。アクセントカラーをサイトの目立たせたい部分に使って見るのもいいでしょう

　
　ファッション業界では、流行色(trend color)があります。実はこの流行色とは、インターカラー(International Study Comission for Color)という情報機構が、世界レベルで調整したカラー情報を同組織に加盟している各国の団体に伝えたものです。日本での加盟団体は、JAFCA(日本流行色協会)です。

　流行色について詳しく知りたい方はこちらから
http://www.jafca.org/

　Webサイトに、画像を載せる機会は多いと思いますが、その際Webサイト全体の統一感が出る縦横比を紹介します。黄金比は昨日の記事で紹介したので省きます。

　　　16:9
　デジタルハイビジョン放送等で使用されるワイド型の縦横比です。
1920×1080等がこれに該当します。

　　　4:3
　パソコンンのディスプレイやデジタルカメラ、アナログテレビ等で採用されているので、かなり馴染み深い縦横比です。ディスプレイの解像度で使われる800×600や1024×768等がこれに該当します。ちなみにアナログ放送は、NTSC(National Television Standards omittee)によって規格化されており、画面サイズは4:3が標準サイズとして採用されています。

　　　白銀比
　古来から日本の建築に用いられてきた縦横比です。大和比とも呼ばれています。現在では、A4やA3等の用紙サイズに採用されています。

　白銀比の詳しい説明はこちらから
http://ja.wikipedia.org/wiki/%E7%99%BD%E9%8A%80%E6%AF%94
　
　白銀比や黄金比の利用例はこちらから
http://members3.jcom.home.ne.jp/aiteccom/topic6.html

　かなり専門的な内容になりますが、日本古来の建築について知りたいかたは、木子文庫を見ることをお勧めします。(建築産業図書館などで閲覧することができます。もちろん閲覧は閉架式で、貸し出しはしていません。)
　木子文庫とは、江戸時代に内裏の御用を務め、明治時代以降は、東京帝国大学で建築学の教授を勤めるものを輩出した木子家に伝わる建築資料です。
　
　木子文庫の目録はこちらで公開されています。
https://www.library.metro.tokyo.jp/12/12351.html
　
　建築産業図書館のホームページはこちらから
http://www.ejcs.co.jp/library/cil.html

　サイトのレイアウトを考えるときに役に立つのが黄金比とグリッドシステムです。

　黄金比(Golden ratio)とは、人間が最も美しく感じるとされる比のことで、近似値は1:1.618になります。古くは、ストーンヘンジの石の横と縦の比が1:1.618になるように構成されているのに見ることができます。また、レオナルド・ダ・ヴィンチが円の中に人間を配置して人体のプロポーション(比)を分析し、美しいプロポーションがどうなるか研究していましたが、そこでも黄金比は出てきます。さらに自然界でも動植物の成長のパターンに見ることができます。オウムガイの成長パターンが有名です。

黄金比については、こちらに詳しい説明があります。
http://ja.wikipedia.org/wiki/%E9%BB%84%E9%87%91%E7%8E%87

　グリッドシステムとは、ヨゼフ・ミュラー＝ブロックマンが考案したデザイン手法で、架空の縦横に引かれたガイドラインに合わせて、文字や図版を配置する方法です。(縦横のガイドラインを利用することにとどまらず、ブロックマンは円や三角形を用いて幾何学的な構成もしています。)この手法は今日では、Webデザインに広く取り入れられており、視覚的にまとまりのあるデザインを作るのに一役買っています。唯、完全にグリッドシステムに従ってサイトを作ってしまうと、単調でつまらない印象が出てしまうものです。そこで意図的に、グリッドからずれた部分を作るとアクセントになり、人の注目を集めることができます。

　ヨゼフ・ミュラー＝ブロックマンの作品はこちらから
http://www.imagenow.ie/gallery/flash.htm
(ヨゼフ・ミュラー＝ブロックマンの傑作といわれる作品の画像が見ることができます。サイトの左上の数字をクリックすることで画像を選べます。)

　グリッドシステムや構成を身に付けたいなら、この2冊の本が断然お勧めです。美術関連の本としては値段も比較的安く、デザイナー兼美術学校の指導者である著者が構成の詳しい説明をしており、説得力があり内容も充実しています。

　ホームページを作っていて、日付を表記する機会があると思います。特別、意識することなく表記してしまうこともあるのではないでしょうか。この日付の表記も場合によっては、ユーザーにきちんと意味が伝わらないことがあります。
　　
　例えば、西暦を二桁省略した表記があります。　07/08/01と表記されていたら、日本人なら、たいてい2007年8月1日のことだ受け取るでしょう。ところが、アメリカでは同じ表記が2001年7月8日の意味になり、イギリスでは、2001年8月7日だと受け取られてしまいます。

　また、音声ブラウザでは、/で区切られた数字を分数として、読み上げてしまう可能性があります。さらに.(ピリオド)を/の代わりに区切りとして用いたときも、小数点であると誤って解釈される恐れがあります。

　　　
　　　具体的な日付の表記方法

　日付と時刻の表記に関する国際標準規格として、ISO 8601があります。また、この表記法に基づいて、W3Cが日付の表記方法を公開しています。

　W3Cの公開している表記方法はこちらから
http://www.w3.org/TR/NOTE-datetime

　(X)HTMLでは、使用できる文字コードが複数あります。(X)HTML文書を保存したときに指定した文字コードとブラウザが(X)HTML文書を読み込む時に選択した文字コードが異なると、文字化けが起こります。
　
　文字コードは、サーバー側で設定を行うこともできますが、サーバーの設定には権限が必要になるので、(X)HTMLではmeta要素に文字コードを指定する方法が広く利用されています。
　　　
　　　
　　　文字コードとは
　
　文字や記号をコンピュータで扱うために割り当てられた固有の数字のことです。日本語の文字コードとしては、JIS(日本工業規格)が定めたJISコードやMicrosoftが制作に参加し、WindowsやMac OSで使われるShift_JIS(シフトジス)等があります。
　また、世界の言語を単一の文字コードで扱うことを目的として、Microsoft等が中心となって提唱し、1993年にISO/IEC 10646の一部として標準化されたUnicodeがあります。


　　　(X)HTMLの文字コード宣言方法　

　HTMLでは次のように指定します。

　文字コードを宣言する際に、注意して欲しいことが二つあります。まず、meta要素で文字コードを宣言する前に、title要素に日本語を使用してしまうと、文字化けの原因になります。二点目として、Shift_JISで用いられるのは_(アンダースコア)で、-(ハイフン)ではないということです。

　　　HTNL互換XHTMLの文字コード指定方法

　XHTMLでは、文書の第一行目で、XML宣言で文字コードを宣言する必要があります。又HTML互換XHTMLでは、XML宣言のencoding擬似属性による宣言と同時に、meta要素による指定が必要になります。
　XML宣言は次のようになります。

meta要素の指定方法はHTMLでの指定方法がXHTMLでは終了タグが必要になるので、最後の部分が>から/>に変わるだけです。