 |
▼デザインの原則
イラストの描き方っていうよりは、ホームページのデザインのコツです。
基本的にこれを守って作っていると「それっぽい」ものが出来上がったりします。
朱沙はすべて、その法則にのっとって、勢いでホームページを増殖させている模様です。
●グループ化
関連が強い情報は、近くに配置します。ページ上での文字や画像の距離は、情報の関連性を暗示します。
関連の強いものは近く、関連の弱いものは遠く、同じレベルに並列される情報の固まりは、そのかたまりごとに等間隔に配置します。
また、ページ全体の周辺、要素と要素の間の余白を適当な大きさに調整することを忘れてはいけません。
●整列
どこかに「視線の基準線」を引くことが必要です。線を引くといっても、ただ「端を揃える」ことで、目に見えない線を意識させることもできます。
●コントラスト
目を引きたい部分を引き立てるには、フォントの形や背景色を変えます。はっきりとした対照で、そのページ内で重要なポイントを視覚的に浮かび上がらせることで、ページ内の情報の全体像を直観的にわからせることができると同時に、デザイン的にはページにメリハリがつき、しまった感じになります。
●繰り返し
色、形、線などの要素を全体を通して繰り返すことで見ている人に視線のリズムを与え、文章の要素の関連例を更に強調することができます。
■レイアウトを決めるための準備
●文章の要素を整理をします。
●文章の要素間の関連を明らかにします。
●要素をブロック化して配置します。
同じ構造のブロックがある場合は、同じ配置であるべきです。
┣テーブルタグを使用するとよいでしょう。
┗グループ化をわかりやすくするには、余白をうまく使うことが重要です。
・ブロック間に余白を作る：marginの設定
font-size:●px;margin:■px;
font-size:●px;margin:■em; |
マージンの指定にemを使う場合は、基準となるフォントのサイズをpxを単位として同時に指定することで、意図したとおりの余白をあけることができます。
・行間を整える
line-hight:●px;
line-hight:●em; |
普通の文章であれば、フォントサイズの1.3倍から1.5倍程度の指定（行間は0.3〜0.5文字分程度）が読みやすい。
・ボーダーラインの利用
| border-style:枠線の種類; border-weight:枠線の太さpx; width:ブロックの横幅px |
NNでは、ブロックの横幅を指定しないと、文字部分のみしかボーダーラインが表示されません。
・背景色
| background-color:#000000; width:ブロックの横幅;border-width:1px;border-color:#ffffff; |
NNでは、「背景色と同じ色の極細線枠で囲む」作業をしないと、文字のみにしか背景が適用されません。
■<div>タグと<span>タグ
<p>や<hn>タグはタグ自身に効果があるため、使い辛いときがあります。この二つのタグは、効果をもたらさないタグとして、スタイル指定する場合にはとても使いやすいです。
<div>タグは、ボックス要素のスタイルを指定するときに使用し、<span>タグはインライン要素、つまり改行の入らない一行の文字列の一部分だけに設定する場合に使用します。
【参照】
おすすめデザイン系の本♪
朱沙は、基本的に本で勉強しています。図書館で借りたり、買ったり…♪
そんな朱沙がおすすめ本はこちら⇒ デザインの仕方
ネタを探すならこちら⇒ デザインのネタ
|
| ▼ BACK |
|
|