■ トップページレイアウト講座 〜「Webデザイン」のはじめの一歩！１・２・３！〜
Webデザインのキホン。それは「トップページ」からはじまります。
何からはじめるか？はじめの一歩と言えば、やっぱり「トップページ」！
今回は、トップページにふさわしい【Webデザイン】絡みのお話です。
トップページにふさわしいWebデザインとは、
----------------------------------------------------------------
・カッコイイこと
・見やすいこと
・整理されていること
----------------------------------------------------------------
などがあげられます。
今回は、「その目的は何か？」を考えてみましょう。
----------------------------------------------------------------
・カッコイイこと
----------------------------------------------------------------
「あなたのホームページはカッコイイですね。
とても気に入りました。また来ます。。。」
あなたのWebデザインを気に入った方からこのようなメールを頂けます。
つまり、「カッコイイこと」ただそれだけで、
その内容に関わらずホームページの人気、評価も上がります。
ただ、「カッコイイホームページ」を作ることが
なかなか難しいというのも現実です。
Webデザイナーはカッコイイサイトをつくるプロです。
だからこそ、Webデザイナーという職業が成立しています。
ただし！センスの良い、カッコイイホームページは難しい！
と言ってあきらめてしまうのはもったいないですよ！！
まだ、まだ、あきらめる必要はありません。
それに「カッコイイ」は、次に説明する「見やすさ」で代用することが可能です。
----------------------------------------------------------------
・見やすいこと
----------------------------------------------------------------
ただ「見やすい」というだけで、
ホームページ全体のイメージが和らぐことがあります。
（この「和らぐ」というのはとても重要です。。）
とても簡単なことですが、「見やすい」ということは
Webにとって、大変強力な武器になるということを憶えておいてください。
（その結果、「カッコイイですね」と言われることだってあります。）
また、「見やすい」という要素には色々な意味が含まれています。
----------------------------------------------------------------
・文字が大きくて読みやすいこと、
・文字の色が区別されており情報の場所が分かりやすいこと、
・文字の大きさにメリハリがあり重要度なども分かりやすいこと、
・そして操作しやすいということ、
----------------------------------------------------------------
これらのことは、特に重要です。
スタイルシートを使うと、簡単調整することが可能です。
--------------------------------------------------------------
● 文字の大きさを調整する方法
--------------------------------------------------------------
▼エッセンス
スタイルシートの{font-size}を利用します。
▼ 説明
{font-size}は文字の大きさを変更するプロパティです。
文字の大きさの単位は、px,pt,emなどを利用します。
（pxはピクセル、ptはポイント、emは文字の高さを基準にした長さ）
▼ 使用例（まだコピー＆ペーストはしないでください）
見出しやテキストをこのように囲みます。
--------------------------------------------------------------
<div style="font-size:13pt;>なぜなぜ？スタイルシートのヒミツ</div>
--------------------------------------------------------------
注意して欲しいのが、このように必要な部分を１つ１つ指定してしまうと、
スタイルシートの便利さはなくなってしまうということです。
なので、非常に便利な”class”を利用することにしましょう。
▼ 使用例（コピー＆ペーストして利用できます）
--------------------------------------------------------------
<html><title>sample</title>
<head>
<style type="text/css">
<!--
.midashi {font-size:18pt;}
.text {font-size:13pt}
-->
</style>
</head>
<body>
<div class="midashi">０１．なぜなぜ？スタイルシートのヒミツ</div>
<div class="text">そもそもスタイルシートとは、、、</div>
<div class="midashi">０２．こんなに簡単スタイルシート！</div>
<div class="text">今思い返してみるとあれは、、、、</div>
（以下本文）
</body>
</html>
--------------------------------------------------------------
▼ 意味
まず<head>タグの中では、このように指定しています。
.midashi {font-size:18pt;} // 見出しに利用する
.text {font-size:13pt} // テキスト部分に利用する
※この名前は好きなもので構いません。
つまり「見だし部分」は文字の大きさが１８ポイント、
「テキスト部分」の文字の大きさは１３ポイントと設定していることになります。
▼ 使い方
あなたのホームページの「見だし部分」には、
<div class="midashi">０１．なぜなぜ？スタイルシートのヒミツ</div>と、
そして、本文中の「テキスト部分」には、
<div class="text">そもそもスタイルシートとは、、、</div>と、、
そんな感じで次々と指定していきましょう。
▼ 調整のしかた
文字の調整は{font-size}の値を変更するだけで、
指定した部分の文字の大きさを変えることができます。もちろん一括して！
ホームページの全Webページに同じように指定し、
スタイルシートを外部ファイル化しておけば、
例え、何十、何百ページあったとしても、
変更が必要な部分は１ケ所だけになります。
たった１ヶ所を変えるだけで、「見やすさ」の調整がすぐに可能です。
ここで浮いた時間は他の作業にまわすことだってできます。
ただスタイルシートを利用するのではなく、いかに効率的にスタイルシートを使いこなすか？
このことを大切にしてみてください。