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

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/

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

  • publish_advertise
2014/02/20

 

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

 

前回は、表を作るHTMLソースの基本についてをご紹介いたしました。今回は、スタイルシート(CSS)を使って、表を装飾する基本をご紹介いたします。ここでは、最終的には以下のサンプルページにあるような表を作ることを例にしています。

 

サンプルページ①

 

 

●表を装飾するCSSの基本

 

表を装飾する基本は、「枠線」・「配色」・「余白量」の3点です。

装飾したい箇所に応じて、以下の要素に対してスタイルを記述します。

 


(1) 表全体の体裁や、外側の枠線 → table要素

(2) 内側の枠線や、枠線と文字(中身)の間の余白量 → th・td要素

(3) 行単位の装飾 → tr要素(や、thead・tbody要素など)


 

 

●表全体の体裁や、外側の枠線を指定

 

まずは、table要素に対して以下のようにスタイルを記述してみます。

 


table {

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

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

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

   border-collapse: collapse;

}


 

上記は、「太さ2px」の「実線(solid)」を「緑色」で引く指定です。

最後の「border-collapse: collapse」は、セルとセルの隙間をなくす指定です。

表を装飾する際には必須の指定だと考えて、そのまま記述してください。

 

上記の装飾だけを前回のHTMLソースに適用してみると、以下のページのように見えます。

 

サンプルページ②

 

 

●内側にも枠線を指定

 

次に、縦横に点線を引いてみましょう。

 


th,td {

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

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

   border-color: blue;   /* 枠線の配色 */

}


 

先ほどの装飾と違いが分かりやすいように、線の色を青色にしてあります。

 

上記の装飾を実際に適用してみると、

以下のページのように見えます。

 

サンプルページ③

 

 

●枠線と中身との間の余白量を指定

 

標準の状態では、セルの間隔が詰まりすぎています。

そこで、セルの内側(文字と枠線の間)に余白を設けましょう。

 


th,td {

   padding: 0.3em;

}


 

上記では、セルの内側に「0.3文字分」の余白を設けています。

このように記述すると、枠線の内側(=文字の上下左右)に0.3文字分の空間ができます。

 

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

 

サンプルページ④

 

 

●表のヘッダ行だけを、異なる装飾にする

 

表のヘッダ部分(見出し行の部分)は、他とは異なる配色にしておくと、分かりやすい表になります。

 

そこで、ヘッダ行にだけ背景色を指定し、さらに下側の枠線を二重線にしてみましょう。

 


thead {

   background-color: #ccffcc;

   border-bottom: 3px double green;

}


 

上記では、ヘッダ部分(thead要素)に、淡い緑色の背景色を指定し、下側の枠線を「緑色の二重線」にしています。

 

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

 

サンプルページ⑤

 

さて、ここまでの装飾で、「表」としての最低限の見栄えができてきました。

枠線に関しては、他にも、

 

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

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

・表の内側だけに線を引き、外枠はなくしてスリムに見せる

 

……などの装飾も可能です。

 

また、CSS3で追加された新しい記述方法を活用すると、

 

・1行おきに背景色を加えて、表が大きい場合でも見やすくする

・特定の列に限定して、異なる装飾にする

 

……などのように、偶数行と奇数行で装飾を分けたり、列単位(縦方向)を一括して装飾したりもできます。

 

これらについての詳しい説明は、次回にご紹介いたします。

 

 

【ご注意ください】

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

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

 

 

 

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

▲ページトップへ戻る

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

▲ページトップへ戻る