続きすすめていきます。
フォントとテキストのスタイリング
●フォントはユーザー環境に依存
そのフォントが表示されるかどうかはユーザー環境に依存する（ユーザーのパソコンにインストールされていないフォントは別のフォントになってしまう）という条件があるものの、特に欧文フォントはさまざまな種類が最初からOSに入っており、それぞれから文字の表情をいろいろ読み取ることができる。
Webページの本文部分は読みやすさを重視すべきであり、文字が主張しすぎるのは考えものだが、見出しなどで個性的なフォントを効果的に使うことで、画像を使わなくてもかなり豊かな表現ができるようになる。
書体の選択の際には、すべての環境に完璧に対応するのは難しいことをまず認識する。Windows Vistaに入っているフォント、Windows XPに入っているフォント、Mac OS Xに入っているフォント、これら全てのOSに入っているフォント、名称は違うけれど雰囲気の似ているフォントなどを理解したうえで、イメージどおりに書体が選択されるように指定する。
「choco*choco Cafe And Sweets」というロゴを例に、XHTML+CSSだけでスタイリングする。このような表現を実現するには、画像を使うのが一般的だが、あえてチャレンジングなサンプルとして。
このロゴをXHTML+CSSで実現するために、次のような細かなポイントを順番に確認する。
| 書体 | Verdana |
|---|---|
| 色 | 「choco*choco」の文字色は#663300、「Cafe And Sweets」の文字色は#ffffff |
| 文字同士の間隔 | 「Cafe And Sweets」の間隔が広めになっている |
| 大文字・小文字 | 「choco*choco」はすべて小文字、「Cafe And Sweets」はスモールキャップスの大文字 |
| 背景色 | 「choco*choco」の背景色は#ffffff、「Cafe And Sweets」の背景色は#663300 |
| 上下左右のマージンとパディング | 画像を拡大して値をどうするか確認 |
これらのポイントに注意しながら作成したXHTMLとCSS
XHTML
<h1>choco*choco<span>Cafe And Sweets</span></h1>
CSS
h1 {
margin: 0;
padding: 0;
width: 310px;
height: 104px;
color: #663300;
font-size: 40px;
font-weight: bold;
font-family: Verdana, Helvetica, Arial, sans-serif;
text-align: center;
}
h1 span {
margin: 5px auto 0;
display: block;
width: 300px;
line-height: 1.6;
color: #ffffff;
background-color: #663300;
font-size: 20px;
font-weight: normal;
font-variant: small-caps;
letter-spacing: 5px;
}
●希望の書体に近いフォントをあわせて指定する
font-familyプロパティでフォントの種類を指定する際は「Verdana」だけでなく比較的近いフォントを指定しておく。先に書いてあるフォントが優先的に適用され、もしもそのフォントがなければ次に書かれているフォントという順序で適用される。
「Verdana」に雰囲気が似たフォントとして、「Helvetica」はＭac OS Xの多くに、「Arial」はWindowsやMac OS Xの多くにインストールされているので、これらも指定しておく。いずれのフォントも入っていない環境のために総称ファミリー（ここではゴシック体を意味する「sans-serif」）を指定しておくことで、より多くの環境に対応させることができる。
h1 { font-family: Verdana, Helvetica, Arial, sans-serif; }
●文字の大きさを調整する
「choco*choco」は「Cafe And Sweets」に比べて文字が大きくなっている。フォントの大きさはfont-sizeプロパティで指定する。単位をピクセルで指定すれば大きさを忠実に再現できる。
なお、IE6以前では、単位がピクセルで指定されていると、文字サイズを変更してもフォントサイズが変わらないという問題がある。ロゴについてはこれでよしと考えるか、CSSハックでIEに対してのみ、「em」などの相対単位を適用する。
●文字の太さを調整する
「chocochoco」は「Cafe And Sweets」に比べて文字が太くなっている。文字の太さはfont-weightプロパティで指定。font-weightプロパティの値は「normal」「bold」「bolder」「lighter」「100～900」（100刻みの数値）が指定できる。ただし、現在普及しているブラウザでは「100～900」の数値で指定しても100から500は「normal」と同等に、600から900は「bold」と同等になるため、はじめから「normal」か「bold」を選ぶのが現実的。
「bold」を選んだ場合、そのフォントファミリーにbold用の書体が含まれている場合、その書体でレンダリングされる。たとえば、「ヒラギノ角ゴ Pro」ファミリーで表示されている要素に対し「font-weight: normal」と指定した場合は「ヒラギノ角ゴ Pro W6」で表示される。
ただし、ブラウザの種類やバージョンによって、この機能をサポートしていない場合がある。その場合は「normal」で表示される書体を単純に太らせたかたちで表示される。
●文字間隔を調整する
「Cafe And Sweets」の文字間隔を多少広めにするためにはletter-spacingプロパティを利用する。このロゴのように幅や高さを固定している場合にはピクセルで指定する。本文部分で文字の大きさに合わせて読みやすさを確保する目的で使う、letter-spacingプロパティには、ピクセルではなく「em」で指定し、文字サイズとのバランスをもとに間隔が設定されるようにする。
●スモールキャップスの設定
「Cafe And Sweets」単語の先頭が通常の大文字、他の文字は小さめの大文字となっている。このような表現を「スモールキャップス」といい、font-variantプロパティで「small-caps」と指定することで実現できる。
今日はここまで。
0 件のコメント:
コメントを投稿