実践STEP.6-5 フォントを指定する
価格などの数値を表示する場合は、欧文フォントの方が見やすいので、フォントを指定してみましょう。
数値の部分にだけ欧文フォントを適用する方がよいのですが、それは面倒なので、ここでは表全体に欧文フォントを指定してみます。
表全体のフォントを指定するので、次のようにtable要素に対して適用するように書けばよいでしょう。
table.noveltable {
font-family: Verdana, sans-serif;
}
font-family: Verdana, sans-serif;
}
上記では、フォント名として(欧文フォントの)「Verdana」を指定しています。 その次に、半角カンマで区切って(ゴシック系を表すジャンル名である)「sans-serif」を指定しています。
こう記述すると、Verdanaフォントのある環境ではVerdanaで表示され、ない環境では「何かゴシック系のフォント」で表示されます。
このスタイルを適用させると、次のようになります。
作品名 | 作家名 | 出版社 | 価格 |
---|---|---|---|
合計 | 1,710円 | ||
涼宮ハルヒの憂鬱 | 谷川 流 | 角川書店 | 540円 |
ゼロの使い魔 | ヤマグチノボル | メディアファクトリー | 580円 |
灼眼のシャナ | 高橋弥七郎 | メディアワークス | 590円 |
これで、すべての装飾は完了しました。
記述したスタイルシートのまとめ
最後に、これまでの各ステップで記述してきたスタイルシートソースをまとめてご紹介しておきます。
表をワープロ並みに装飾する手順 (目次)
- [HOME] はじめに:表の罫線をワープロ並みに装飾したい
- [準備STEP.1] HTMLで表を書く
- [準備STEP.2] サンプル表のHTML上のポイントを確認
- [実践STEP.1] 表の外枠を描く
- [実践STEP.2] 表の内側の線を描く
- [実践STEP.3] 縦線と横線で線種を変える
- [実践STEP.4] 表のヘッダ(上部)だけ装飾を変更する
- [実践STEP.5] 表のフッタ(下部)だけ装飾を変更する
- [実践STEP.6-1] 表の文字サイズを指定する
- [実践STEP.6-2] セルの余白を指定する
- [実践STEP.6-3] 文字を左右に寄せる
- [実践STEP.6-4] 文字と文字の間隔を広くする
- [実践STEP.6-5] フォントを指定する
- [まとめ] 記述したスタイルシートのまとめ