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

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/

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

  • publish_advertise
2014/02/19

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

 

ウェブサイトでは、table要素を使って「表」を作ることが多々ありますね。特にアフィリエイトサイトでは、紹介する商品・サービスの仕様を掲載する際などにも「表」をよく活用されるのではないでしょうか。

 

今回は、表を見やすく掲載するために、表の体裁を整える(装飾する)方法をご紹介いたします。従来からCSS(スタイルシート)を使えば自由に表を装飾できましたが、SS3で追加された機能を使えば、もっと便利に装飾できます。

 

ここでは、以下のサンプルページにあるような表を作ることを例にして、HTMLとCSSの記述方法をご紹介いたします。

 

サンプルページはコチラ

 

 

●表を作るHTMLの基本

 

表を作るHTMLソースの基本は、以下の1~4の通りです。


(1) table要素 <table>~</table> で全体を囲み、

(2) tr要素 <tr>~</tr> で「1行」を作り、

(3) 必要に応じて、th要素 <th>~</th> でヘッダ(見出し)セルを作り、

(4) td要素 <td>~</td> で1つ1つのセル(枠)を作る


 

しかし、「装飾のしやすさ」と「表の分かりやすさ」を考えると、

 


(5) 表のヘッダを示す行は、thead要素で囲んでおき、

(6) それ以外の行(表の内容)は、tbody要素で囲んでおく


 

という記述も加えておく方が良いでしょう。

例えば、以下のような感じで記述します。

 


<table>

   <thead>

      <tr>

         <th>No.</th>

         <th>商品名</th>

         <th>商品型番</th>

      </tr>

   </thead>

   <tbody>

      <tr>

         <th>1</th>

         <td>真空断熱フードコンテナ</td>

         <td>SDFC1245-L</td>

      </tr>

      <tr>

         <th>2</th>

         <td>ポット型浄水器</td>

         <td>WPPD5567-K</td>

      </tr>

   </tbody>

</table>


 

上記のソースでは、

・ヘッダ(見出し)行が1行

・内容が2行

の合計3行の表を作っています。

 

●インデント(字下げ)を使って階層構造を分かりやすくする

 

表を作る際には、「行を作るtr要素」や「各セルを作るtd要素」など、複数の要素を同時に使います。そのため、ソースが見づらくなりがちです。少しでもソースを見やすくして、後から修正しやすくなるように、「インデント」(字下げ)を使って記述することをお勧めいたします。

以下のように、HTMLタグが現れるごとに行を変え、先頭に空白文字を入れることで、HTMLの階層構造を分かりやすくします。

 


<tag1>

   <tag2>

      <tag3>

         階層構造が分かりやすいように先頭に空白を入れて記述。

      </tag3>

   </tag2>

</tag1>


 

このように記述しておくと、「タグの閉じ忘れ」も簡単に防げます。

 

●コメントも加えると、より分かりやすくなる

 

HTMLソース中で「どの部分に何を書いているのか」を示すために、コメント機能を活用すると、もっと分かりやすくなります。HTMLでは「 <!– 」と「 –> 」で挟んだ部分は、ブラウザ上には表示されませんから、何でも自由にメモを記述しておけます。

 

先のソースにコメントを書き加えると、例えば以下のように記述できます。

 


<table>

 

   <!– ======================== –>

   <!– ▼ここから表のヘッダ部分 –>

   <!– ======================== –>

   <thead>

      <tr>

         <th>No.</th>

         <th>商品名</th>

         <th>商品型番</th>

      </tr>

   </thead>

   <!– ======================== –>

   <!– ▲ここまで表のヘッダ部分 –>

   <!– ======================== –>

 

   <!– ======================== –>

   <!– ▼ここから表の中身(内容) –>

   <!– ======================== –>

   <tbody>

      <tr>

 

         <!– ………………… –>

         <!– ▼第1位の商品 –>

         <!– ………………… –>

         <th>1</th>

         <td>真空断熱フードコンテナ</td>

         <td>SDFC1245-L</td>

 

      </tr>

      <tr>

 

         <!– ………………… –>

         <!– ▼第2位の商品 –>

         <!– ………………… –>

         <th>2</th>

         <td>ポット型浄水器</td>

         <td>WPPD5567-K</td>

 

      </tr>

   </tbody>

   <!– ======================== –>

   <!– ▲ここまで表の中身(内容) –>

   <!– ======================== –>

 

</table>


 

このように、どこが何を示しているのかが、分かりやすくなります。

冒頭にご紹介したサンプルページのHTMLソースにも、詳しくコメントを加えてあります。あわせてご参照ください。

 

さて、今回はHTMLソースの書き方だけをご紹介いたしました。

このHTMLに、スタイルシート(CSS)を加えて、表を自由自在に装飾していきましょう。

 

それらの方法については、次回にご紹介いたします。

 

 

【ご注意ください】

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

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

 

 

 

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

▲ページトップへ戻る

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

▲ページトップへ戻る