ホームページ作成/テーブル(表)の作成・装飾 (HTML,CSS)

スタイルシートで表を見やすく装飾!(6ページ目)

ワープロで表を作成すると、様々な装飾ができますね。そのような表をウェブ上でも作ってみましょう! スタイルシートを使って、余白や文字間隔などを細かく調節し、自由自在に装飾する方法をご紹介。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

実践STEP.6-5 フォントを指定する

価格などの数値を表示する場合は、欧文フォントの方が見やすいので、フォントを指定してみましょう。

数値の部分にだけ欧文フォントを適用する方がよいのですが、それは面倒なので、ここでは表全体に欧文フォントを指定してみます。
表全体のフォントを指定するので、次のようにtable要素に対して適用するように書けばよいでしょう。

table.noveltable {
   font-family: Verdana, sans-serif;
}

上記では、フォント名として(欧文フォントの)「Verdana」を指定しています。 その次に、半角カンマで区切って(ゴシック系を表すジャンル名である)「sans-serif」を指定しています。

こう記述すると、Verdanaフォントのある環境ではVerdanaで表示され、ない環境では「何かゴシック系のフォント」で表示されます。

このスタイルを適用させると、次のようになります。

作品名 作家名 出版社 価格
合計 1,710円
涼宮ハルヒの憂鬱 谷川 流 角川書店 540円
ゼロの使い魔 ヤマグチノボル メディアファクトリー 580円
灼眼のシャナ 高橋弥七郎 メディアワークス 590円

これで、すべての装飾は完了しました。

記述したスタイルシートのまとめ

最後に、これまでの各ステップで記述してきたスタイルシートソースをまとめてご紹介しておきます。

今回記述したスタイルシートのまとめソースへ >>

表をワープロ並みに装飾する手順 (目次)

  • 前のページへ
  • 1
  • 5
  • 6
  • 7
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます