レイアウトが出来た所で、画面のキャプチャを見てみましょう。現在こうなっています。

後は、各々の要素を、完成図に近付けていくだけです。早速スタイル指定をしていきましょう！

まずは、見出しであるh3です。
ここを見てみると、文字サイズが大きく、各ブラウザ間でもサイズの差がありますので、フォントのサイズ指定をする必要がありそうです。左側につけるハートのアイコン画像も用意しましょう。

フォントサイズの指定はfont-sizeプロパティ、背景の指定はbackgroundプロパティで指定します。CSSはこうなります。

font-sizeプロパティ

CSSで文字のサイズを何も指定しない場合、一部を除いて16pxがデフォルト値です。ですので、100%を指定すると16pxなのですが、この「px」でサイズ指定をした場合、IEではユーザー側でフォントサイズを変更する事が出来ず、アクセシビリティの点で問題がある事から、サイズ指定は「%」に代表される相対指定が一般的です。

相対指定では他にも「em」や「ex」がありますが、IEでのバグが報告されていますので、問題の少ない「%」をお勧めします。(小さいサイズでは%表示にもバグがあるようですが・・)

今回はbodyタグに基本となるフォントサイズを、80%と指定しています。

デフォルト16pxの8割なので、12.8、これを四捨五入して13pxの指定となります。
基本となるサイズが13pxで、今回のh3に100%指定しているので、h3も13pxの指定、つまり文章と同じサイズになるように指定をしました。h3にはもともと太字のスタイルがかかっていますので、13pxの太字で表示されるという事になります。

backgroundプロパティ

backgroundプロパティは背景を指定するプロパティです。背景には、色々と指定出来る事が用意されており、まとめて指定したい場合に使用します。指定できるのは以下の通りです。

背景色、画像の指定、繰り返しの有無と方向、固定の有無、画像の位置

これらは順番は自由、必要のない物は省略できます(その場合はデフォルト値が指定されます)。ですが、間違いを防ぐために、順番のルールは、自分で持っていた方が良いでしょう。

また、これらを一つずつ指定する事も出来ます。例えば、背景に色をつけたい場合、他の指定は必要なければ、

background-color:#f63;

とした方が、視覚的にも解りやすいでしょう。詳しくはTAG index等のリファレンスをご覧ください。

今回はハートのアイコン画像を指定して、繰り返しはせず(デフォルト値はrepeat、つまり繰り返しありです。)、画像の位置は横方向で左、縦方向で中央という指定です。

画像を指定すると、画像と文字とがぶつかってしまうので、画像の分、余白を取って左にずらす事にします。また、上下も詰まった印象を与えるので、少し間隔をとりましょう。

準備編でもお伝えした通り、padding指定された領域には背景がつきますので、今回の余白はpaddingで間隔をとります。

随分、完成図に近くなってきました！もう一息です。

ページ: 1 2

トラックバックURL