罫線とセルの背景色をデザイン

このサイトについて サイトマップ


アフィリエイトで稼ぐのは厳しい ⇒ 速習HTML ⇒ 罫線とセル背景色をデザイン


罫線を繋げて表示し、罫線とセルに色をつけます

  この文字をクリックするとサンプルダウンロード出来ます。


テーブルをデザインする ← | → サンプルダウンロード


罫線をセル色をデザインして仕上げます。

デザインする内容は次の通りです。

・罫線を繋げる。
・罫線に色を付ける。
・セルに色を付ける。

● スタイルシートに赤部分を追加します。

スタイルシートに以下を追加します。

table  { font-size: 0.75em;    文字サイズを0.75倍
       margin-bottom: 20px;    テーブルの下余白
       width: 550px;    テーブルの横サイズ
       border: none;    テーブル周りの罫線を非表示
       border-collapse: collapse;    テーブル内の罫線を繋げて表示
}      
   
th,td  { padding: 8px }    th、td境界と中身との余白
   
th    { width: 150px;    見出し部分の横サイズ
      text-align: left;    文字を左寄せ
      vertical-align: top;    文字を上寄せ
      background-color: #fff0f0;    背景色を指定
      border: solid 1px #aa8844;    罫線を実線 幅1 茶色にする
}      
   
td    { background-color: #e6ffe6;    背景色を指定
      border: solid 1px #aa8844;}    罫線を実線 幅1 茶色にする





・罫線を繋げる。
 方法は色々ありますが、border-collapseで指定しました。

 border-collapse: collapse; 繋げて表示
 border-collapse: separate; 分離して表示

 他にも、セル境界を含めてセル全体に色をつけ、境界内を白色にして境界だけ色を残す
 方法などがあります。




サンプルを表示した結果です。完成です。

トップページや紹介ページは既に出来あがっていますので全てが完成しました。

ページ内容やページ間遷移など確認して見て下さい。

  個別ページ




関連記事


もしも「今からアフィリエイトをやろう、稼ぐ。」 と考えているのでしたら、悪い事言いません。
本格アフィリエイトを断念して趣味+αにするか、本格的に勉強をするかのどちらかにした方が良いです。
アフィリエイトに必要なもの、事。それほど多くは有りません。
インターネットに接続されたパソコン、ASPに登録申請、ドメイン取得、レンタルサーバ、ブログ登録&投稿、サイト作成&サーバアップ、検索エンジンインデックス、地道なSEO。
ASPにアフィリエイト登録して初めてアフィリエイトが可能になります。
各ASPともアフィリエイト登録申請時にサイトかブログを提示して審査を受ける必要があります。
アフィリエイトサイトの同一ページに異なるASPの広告を並列同時掲載することもできます。
何とかサイトを作成してレンタルサーバにアップしても、そのままだと大海の孤島で誰も存在を知りません。
すぐ検索エンジンに登録して下さい。キャッシュとかインデックスとか言ってます。
携帯やスマートフォンなど、その時の最先端向きアフィリ教材もありますが、スタリも早くなります。
時代やツールが変っても、商材選定〜サイト構築などの取組み方や思考は変りません。
その辺りを詳しく解説しているものを選定しました。