各業界のプロに学ぼう「本じゃ読めないアフィリエイト講座」

All About ホームページ作成ガイド 西村 文宏
All About ホームページ作成ガイド
西村 文宏 (ニシムラ フミヒロ)
2001年より、その道のプロ(専門家)が情報発信する生活総合情報サイトAll About内で、「ホームページ作成」ガイドサイトを担当。ウェブ製作に関して毎月数本の記事を連載。HTMLの記述方法から、スタイルシートやJavaScriptの活用方法、アクセス数向上テクニックなど、2011年現在までに300本近くの記事を公開している。著書として、「プロ顔負けのホームページ作成術」・「SEO・SEM使いこなしテクニック」などがあり、最近は作家デビューも果たしている。
コーポレートサイトhttp://allabout.co.jp/gm/gt/1053/
講師PR
RSSフィードを自動生成するフリーソフト「Fumy RSS & Atom Maker」が人気です!『にししふぁくとりー』
http://www.nishishi.com/

「表」の体裁を整える装飾で「見やすい表」を作る方法(第3回)

  • publish_advertise
2014/02/24

こんにちは。All About ホームページ作成ガイドの西村文宏です。

 

前回と前々回で、表を装飾する基本についてをご紹介いたしました。今回は、CSS3の記述方法も活用して、もっと自由自在に表を装飾する方法をご紹介いたします。

 

サンプルページ①

  

 

●横線を実線にし、縦線を点線にして、項目の関係を分かりやすくする

 

横線と縦線の線種を別々に指定することもできます。例えば、以下のように記述すると、横線は「緑色の実線」で、縦線は「灰色の点線」で描かれるようになります。

 


th,td {

   border-width: 1px;          /* 枠線の太さ */

   border-style: solid dotted; /* 枠線の種類 */

   border-color: green gray;   /* 枠線の色 */

}


 

上記の装飾を実際に適用してみると、以下のページのように見えます。

 

 サンプルページ②

 

 

●縦線をなくして、横線だけを表示してスッキリ見せる

 

縦横すべての線を引くのではなく、例えば横線だけに限って引くと、スッキリ見える場合もあります。以下のように記述すると、横線(上下の線)は引かれますが、縦線(左右の線)は引かれません。

 

 


th,td {

   border-width: 1px 0px;  /* 枠線の太さ */

   border-style: solid;    /* 枠線の種類 */

   border-color: green;    /* 枠線の色 */

}


 

 

上記の装飾を実際に適用してみると、以下のページのように見えます。

 

サンプルページ③

 

 

●内側だけに縦横に線を引き、外枠はなくしてスリムに見せる

 

外枠をなくすことで、表全体をスリムに見せても良いでしょう。

外枠は、table要素に対する装飾で指定します。外枠を消す方法はいくつか

ありますが、以下では「白色の枠線」を引く方法で実現しています。(単に記

述を省略するだけでは、td要素などに対する枠線が外側にも表示されてしまう

ため、表の外枠は消えません。)

 

 


table {

   border-width: 1px;      /* 枠線の太さ */

   border-style: solid;    /* 枠線の種類 */

   border-color: white;    /* 枠線の色 */

}


 

 

上記の装飾を実際に適用してみると、以下のページのように見えます。

 

 サンプルページ④

 

 

●マウスが載った行だけを装飾

 

閲覧者がマウスを載せている行だけをハイライト表示できるようにすると、より見やすい表になります。以下のように記述すると、マウスが載った行だけに背景色が付加されます。

 


tr:hover {

   background-color: #ffff80;

}


 

上記の装飾を実際に適用してみると、以下のページのように見えます。

実際に、表の上にマウスポインタを載せて、表示を試してみてください。

 

サンプルページ⑤

 

さて、これまでにご紹介してきた装飾は、従来のCSSだけで実現可能な装飾でした。

 

ここに、CSS3で新しく追加された記述方法を組み合わせて使うと、より自由自在に表を装飾できるようになります。

 

 

●1行おきに背景色を加えて、列が多い場合でも視線を動かしやすくする

 

表が大きくなると、ほんの一瞬、表から目を逸らしただけで「今までどこを見ていたのか」が分からなくなってしまうことがあります。

そのようなことが起きないよう、1行おきに背景色を付けておくと便利です。

 

以下のページでは、偶数行にだけ、淡い灰色の背景色を付加しています。

 

 サンプルページ⑥

 


tr:nth-child(2n) {

   background-color: #eeeeee;

}


 

上記は、表の「行」を作るtr要素の中で、

偶数番目に登場するものだけを対象にして装飾を指定する記述です。

 

もし、「3つおき」に装飾したいのであれば「nth-child(3n)」のように記述します。

 

 

●特定の列に対して装飾する

 

HTMLでは「表の行」をtr要素で作ります。

ですから、「行」を装飾するにはtr要素に対してスタイルを指定すれば良いことになります。

では、「列」を装飾するにはどうすれば良いでしょうか。

以下のように記述すると、「右端の列だけ」を装飾したり、「左から4番目の列」だけを装飾したりできます。

 


/* ▼右端の列だけを装飾 */

td:last-child {

   font-size: smaller; /* 文字を小さめに */

}

/* ▼左から4番目の内容セルだけを装飾 */

td:nth-child(4) {

   color: blue;    /* 文字を青色に */

   font-size: 90%; /* 文字を1割小さく */

}


 

「td:last-child」と記述すると、「最後に登場するtd要素」を対象にして装飾を指定できます。

 

親要素(tr要素)の中に登場する「最後のtd要素」とはつまり「右端の列」ということです。

 

また、「td:nth-child(4)」と記述すると、「4番目に登場するtd要素」を対象にして装飾を指定できます。親要素(tr要素)の中に登場する「4番目の要素」がtd要素だった場合に、指定の装飾が適用されます。上記の装飾を加えると、前々回の冒頭にご紹介した以下のサンプルページが完成します。

 

サンプルページ⑦

 

サンプルページのソース中にも、詳しくコメントを記載しています。それらもご参照ください。プロパティの値をいろいろ改変して、どう表示が変化するのかを試してみてください。前々回から3回に渡って、見やすい表を作る方法をご紹介いたしました。

駆け足でサンプルばかりを並べてきましたので、書き換えの例についてはご紹介できませんでした。それぞれの詳しい記述方法については、プロパティ名(border-styleなど)や疑似クラス名(nth-childなど)の名称で検索して調べてみてください。

 

 これらの記述を活用して、ぜひ、見やすい表を作ってみてください。

 

 

【ご注意ください】

このコンテンツで紹介されているサイトおよびサービス(ツール)は、
アクセストレードが運営するものではありません。必ず使用方法や注意
事項等をよく理解した上で、ご自身の判断のもとでご利用ください。

万が一、損害・トラブル等が生じた場合も、執筆者およびアクセス
トレードは責任を負いかねますので、あらかじめご了承ください。

 

 

 

 

 

 

Loading...
このエントリーをはてなブックマークに追加      mixiチェック
<<前の記事に戻る  
続編
2014.02.19
「表」の体裁を整える装飾で「見やすい表」を作る方法(第1回)
2014.02.20
「表」の体裁を整える装飾で「見やすい表」を作る方法(第2回)

▲ページトップへ戻る

1CLICKアンケート!!
Loading...
1CLICKアンケート!!
アフィリエイトで稼ぐための心構え3カ条
1.「稼ぐ気持ち」を出しすぎない
稼ぎたい気持ちが全面に出ていると、ユーザーはサイトに対し良い印象を持ちません。
2.「納得できる方法」で稼ぐ
報酬額ばかりで選ばず、自分自身がお薦めできるプログラムを心が伝わるように紹介しましょう。
3.実績のある方法や考え方などを「学ぶ」
「成功者のノウハウ」、「今盛り上がっている市場は?」など、常に最新情報をキャッチし、実践できているかどうかが、アフィリエイト成功のカギ。アフィ大では、アフィリエイトで稼ぐためのお役立ち情報を数多くの成功者が発信しています。ぜひご活用ください!

▲ページトップへ戻る