TOP ブログの基本 アフィリエイト アクセスアップ カスタマイズ ブログ・HTML ブログ・CSS




ハイサイ(ようこそ)利爺のブログへ


●ブログの基本、アフィリエイト、HTML・CSSまで
初めての方にも分かり易いように下記のシリーズで纏めています。

・・・・・・・・・・・・・・・・ 各章の項目(目次) ・・・・・・・・・・・・・・・
= 現在、シリーズ記事を書いているブロックです。

エントリー順に確認できるように【目次】を作ってありますので
上段のコンテンツバー(menu)または上記の項目から各ブロックに入れます。


●本文中に表示しているアイコンは
= 参照記事  = 頁中の章  = 注釈  = 記事ブロック
を表します。

2010年02月25日

テーブル作成とその応用(3)

■ 5-20 テーブルに画像を使ってホームページ仕様にする


ネットを巡回していると、アフィリエイトを展開しているブログをよく見かけます。

とくに物販をしているブログでは
テーブル機能を活用して、画像と商品説明を上手く組み合わすことで、興味を引くレイアウトをしています。

そのようなアフィリエイトブログに共通するのは、
画像やテキストにリンクを張っていることを「明確に伝えている」と言うことです。

行き先(リンク先)をはっきりと示し、数多くの商品を紹介しているページに誘導しています。

不安を感じさせないように、リンクを上手く使い、安心して商品が確認出来るブログを作り上げることは、アフィリエイトの基本でありかつ理想形といえます。

アフィリエイトには、これが100%という断定的な仕組みは無いと思っていますが、
相手(お客)のことを考えたページを作ることが基本中の基本です。


■テーブルに画像を使いリンクを張る

イラストや写真などの画像をうまく使うと、訪問した方にもブログの特性やイメージを伝えやすくなることは、過去記事の中でも確認してきました。

webでは、PDFやワープロソフトのように、画像をページに直接、貼り込むことは出来ませんね。

画像をテーブル内に貼るには
<img>タグで呼び出し、場所を指定して貼りこみます。記事の中に貼りこむのと同じ方法ですね。

テーブルに画像を貼り込む方法を確認しますが、
物販アフィリエイトでのテーブルの仕組みや、画像の利用方法を例として見て行きましょう。

テーブルに画像を使用するときの注意点。

@画像を配置する前にテーブルの左右サイズを決める。

 ●記事表示領域の左右サイズから、割り出してテーブルサイズを決め
 ます。

A画像の大きさをテーブルの左右サイズに合うように調整する。

 ●テーブルのサイズを指定しても、画像のサイズの方が大きいと、
  自動的に画像の大きさにテーブルのサイズが広がります。
 
 ●テーブルのサイズが重要ですので、画像もそれに準じます。

 ●使用する元の画像は大きくアップロード、表示画像は小さくする。
  (画像を使用するときの基本ですね)

B<table>の該当要素内に画像読み込みのURLを記入する。



@からBの注意点を必ずチェックしましょう。

サンプルテーブルの作成

サンプルテーブルを作るために、商品名・画像・説明記事を用意します。

サンプルテーブル用データ

●商品名
●商品画像
●商品説明




⇒ 沖縄特産油味噌
⇒ テスト用画像(miso-01.jpg)
⇒ ■細かく切った豚肉と味噌を砂糖で味を調整
   した甘辛風の豚味噌です。
⇒ ■内容量 100g
⇒ ■商品価格 500円

テーブル作成のタグ類はしっかり把握していますね。



作成するテーブルは、
@商品名は<th>要素の「行」
A商品画像は<td>要素の「行」
B商品説明も<td>要素の「行」
の「3行」のテーブルですね。

使用するサンプル画像はSeesaaブログに
「miso-01.jpg」
のファイル名でアップロードしています。

テーブル作成のHTMLは
<div class=".samp table">   
<table>
<col width="120">      
<tr>
<th>沖縄特産油味噌</th>
</tr>
<tr>
<td>
(画像:url)
(画像にリンク)
        
</td>
<tr>
<td>       
■細かく切った豚肉と味噌を砂糖で味を調整した甘辛風の豚味噌です。
■商品価格 500円
■内容量  100g
⇒ 商品の詳細を見る(リンクurl)</td>
</tr>
</table>
</div>

⇒ CSSの適用

⇒ テーブル横サイズ

⇒ 項目名(商品名)


⇒ データ要素@
⇒ 商品画像
⇒ 詳細ページリンク
 

⇒ データ要素A
  ●商品の特徴
  ●値段などの概説 


⇒ 商品詳細ページへ


⇒ テーブル閉め
⇒ CSS閉め

以上のようなtableタグ組み合わせですね。

画像の表示は、テーブルのデータ要素@の中で
<img>タグを使用して

<td>
<img src=" 画像のurl " width="●" height="●" />
</td>

で呼び出しますね。

この時、同時に画像に詳細ページにジャンプするリンクを貼ります。
リンクは<target="_blank>タグで別ページで開くようにします。

この形式は、記事に画像を使用する時のタグの記入と変わりませんね。

データ要素Aでは商品の特徴を記入します。
訪問した方が興味を持ち、詳細ページに行くかどうかは
ここの表品説明の良し悪しにかかります。

下記のサンプルが出来上がったテーブルです。

【画像1】
特産油味噌
■細かく切った豚肉と味噌を砂糖で味を調整した甘辛風の豚味噌です。
■商品価格 500円
■内容量  100g
⇒ 商品詳細を見る
← <th>要素(商品名)


← <td>要素@

    商品画像
    詳細記事(ページ)へリンク






← <td>要素A
    商品説明
    
    商品価格
 
    詳細記事(ページ)へリンク


画像は、横幅をテーブル(例 width="120")と同じサイズに縮小して表示しています。

文字の表示位置(align)、テーブル罫線と画像の間の空き(padding)
罫線の太さ(border)テーブルのバック色(bgcolor)などを調整して、納得のいく形にしましょう。

この例では、商品名を表示するために、項目用<th>要素(セル)を使っていますが、<th>要素を使用しなくても、テーブルの表示ではエラーにはなりません。

<table>と<td>要素だけでの作成になりますので、案外スッキリした形になります。

試してみて下さい。


■ 画像にリンクを貼り込む

画像にジャンプ先を指定するリンクを張り込みます。
 
画像をクリックすると、他のページにジャンプするHTML形式は
<a href=" 詳細ページurl "></a>ですね。

<td>
<a href=" 詳細ページurl " target="_blank"><img src=" 画像url " width="●" height="●" /></a>
</td>


画像表示の<img …>タグを
<a href …>詳細ページへのリンクタグ(赤文字)で括ります。

この例では、
リンクの行き先を、元画像の表示にしていますが、

リンク先は、
「商品の詳細」を記述したページ、あるいは「商品販売元」のホームページにします。

商品販売元のホームページでは、
より詳しい商品の説明と商品購入用のフォームが設置されていますので、訪問した方をどの様に、そのページまで導くのかが、アフィリエイトの基本になります。

さらに
画像にリンクを張っただけでは訪問した方は迷いますので、
「画像をクリック・商品の詳しい説明ページが開きます」
のような案内文を記入しておきましょう。

商品説明の箇所にも
  「⇒ 商品詳細ページへ」
のように、テキストを用いたリンクも追加しておきます。

⇒ 購入のページへ
の表示はなるべく避けましょう。


案内に使った矢印記号は、その矢印の説明が無くても、
その向きによって利用者は無意識に使い分けると言われていますね。

 →(進む)  ←(戻る)  ↑(トップへ)

の感覚ですね。

矢印の代わりに、
目を引きつけるアイコンを貼り込むのもいい方法です。

テキストだけの商品紹介では、商品イメージを上手く伝え切れません。

ましてやネットでの商品販売ですので、商品のイメージを明確に伝え、クリック率を上げるためにも画像を上手く使う必要があります。

商品販売会社の広告バナーを張り込んだだけのブログをよく見かけますが、

バナー広告では訪問した方は、その商品の詳細が分かりません。
そのバナーをクリックをしたら

●購入させられるのではないか。
●騙されるのでは…。


などの警戒心や不安感があるのもいがめません。

「商品を購入する」「いつでもキャンセル出来ます」
などの表示もよく見かけますが、インターネットを利用しての購入者側の不安感は取り去れませんね。

購入する以前の問題として、ある程度の
「商品のことを知りたい」「他の商品と比較したい」

と訪問した方が思うのは、当たり前のことですので、最低限の
「商品説明」と「商品価格」の表示は無くてはならないものです。

ブログ記事の「続きを読む」と同じです。
導入の部分に興味が無ければ、記事を読まないですね。

アフィリエイトでも導入で失敗すると、
2度と訪問して来ないと思っていいでしょう。


明瞭に簡潔に表示して、
詳しい商品の説明ページに誘導する工夫が必要です。


■ナビゲーション風のメニューを作る。

ブログでよく見られる
ナビゲーションメニュー形式の商品紹介のページを
作ってみます。

紹介する商品は3点、
メインとする商品はテーブルサイズを大きくして、アピール度を高めています。

【画像2】
特産油味噌幸福の星砂琉球もろみ酢

■沖縄で生まれた健康飲料.
常備・健康飲料として大人気商品です。
■容量 900ml
■価格 1500円〜
(キャンペーン価格)
⇒商品の詳細を見る
■細かく切った豚肉と味噌を砂糖で味を調整した甘辛風の豚味噌です。ご飯の友として最適です。

■容量 500g
■価格 500円

 ⇒詳細を見る
■青や赤のカラーサンドと星砂を入れ、お守りやキーホルダーなどの製品にしています。お子様に喜んでもらえます。
■容量 ●g
■価格 150円

 ⇒詳細を見る

サンプルですので、商品の種類がバラバラです。
物販では、1ブログに1品目の商品をまとめ、
1記事に1商品を案内する形式が多いです。

雑多に種類の異なる商品を紹介することは、
訪問した方が、購入したい商品を絞れないことになります。

出来るだけ、種類を絞って
コンビニやスーパーでの商品陳列と同じように、1ブログ(コーナー)に1品目(棚)の形式を作り上げ各ブログがリンクされている形式を目指しましょう。

その形式が内部リンクと外部リンクの充実と言えます。


■商品の詳細サンプルページ。

リンクで開く商品の詳細ページです。
サンプルですので、イメージとして捉えて下さい。

【資料】
商品詳細のサンプルページ





琉球もろみ酢
ダイエット効果にもよく、健康飲料としても大変人気の有る一品です。
■希望価格 ●円(税込み)
■販売価格 ●円(税込み)
(キャンペーン特別価格・25日まで)
■容量 900ml
■発送 受付後4日以内
 ※発送費は当社が負担します
■在庫 50本

(一本から注文できます)
■商品代金のお支払いは、
⇒ 支払い方法のページを確認下さい。

【もろみ酢のほかの商品を見る】←クリック

■もろみ酢は
沖縄の代表的なお酒である「泡盛」の製造過程でみられる「もろみ」から作られます。

もろみには、豊富なアミノ酸とクエン酸が含まれており、疲労回復、抗酸化作用などさまざまな効果が報告されています。
酸味のほとんどがクエン酸由来であるため、一般的なお酢とは異なり、爽やかで、味はまろやかです。

ダイエット効果によく、健康飲料としても大変人気の有る一品です。


この商品詳細のサンプルページは

「テーブル機能」での作成、
あるいは文章の「段落機能」でも作成できます。

テーブル機能での作成は、
列を2個作成して<th>要素は省略、データ要素のみでの作成になり、罫線は表示しません。
左のセル(列)には画像を、右のセルには文章を配置しています。

テーブルの右スペースには、商品の詳細説明を入力して、
1商品を1頁として組み立てています。

段落機能での作成は、
段落を使って、ページの左半分に「画像」を右には文章を表示するように指示します。

段落を使うとブログの構成にも幅が広がり、多彩なレイアウトも可能になります。
使い方は段落のHTMLの時に確認します。

テーブルの使い方のシリーズを何度も確認して、しっかりと取得して下さい。



▲HTMLの関連記事
   holder01.gif ブログで使うHTML-目次ー
    http://tosiji-dreamafi.seesaa.net/article/133635358.html

★ご協力お願いいたします★   
      kame.jpg
    banner_01.gif
……人気ブログランキング……



2010年02月12日

テーブル作成とその応用(2)

■ 5-19 テーブルの細部設定


ブログは、ホームページと異なって、ページ表現するにも制約があります。

その制約の元で、レイアウト的にホームページのような仕様に近づけるためには、テーブル機能を十分に使いこなすことが必要ですし、欠かせないものになっています。

とくに、物販のアフィリエイトでは、訪問した方に商品の画像を見せたり、商品の詳細を説明するのにテーブル機能が頻繁に使われています。

前回は
テーブル内の改行スペースが外に追い出される現象での、空白行を取り去る方法の

(1)ページの全改行を直接入力。
(2)テーブルタグのみを改行無しでの入力。


解決方法(1)を確認しました。

参照 
テーブル作成とその応用(1)
●統計データなどに使うテーブルを作成する
http://tosiji-dreamafi.seesaa.net/article/140029583.html


テーブル機能を確認して、タグの使い方を確認します。

(2)テーブルタグのみを改行無しでの入力。

テーブル内に自動で入力される改行(空白行)が存在するため、
テーブルの外に改行(空白)が追い出されて、意図もしない場所に空白が表示される結果になる。

と言う現象でしたら、

「テーブルを作るHTMLを、自動改行しなければいい」

と言うことになりますね。

テーブル内の改行を取り払って確認して見ましょう。

確認の前に
「この記事の詳細設定」の項目 ⇒ 「改行を<br/>タグに変換しない」
に設定変更した項目を、初期設定の
  ⇒ 「改行を<br/>タグに変換する
に戻しておきます。

【例1】
<
自動改行有りの入力

<div class="samp table">
<table>
<tr>
<th bgcolor="#e0ffff">
ホテルA
</th>
</tr>
<tr>
<td width="110">
宿泊:20,000円 
予約可能
送迎出来ます。
</td>
</table>
</div>

の<br>改行ありの形式で入力していた各タグを
  ↓

【例2】
改行無しの入力

<div class="samp table"><table><tr><th bgcolor="#e0ffff">ホテルA</th></tr><tr><td idth="110">宿泊:20,000円<br>予約可能<br>送迎出来ます。</td></table></div>

の<br>改行なしの形式に変更します。
  ※<br>のタグの表示は見えませんが、自動的に<br>タグが
   入力されています。
  ※記事やタグの入力に邪魔になるので隠されています。

改行を取り払うと言うことは
タグ入力で空白を作らずに「例2」のように連続で入力することです。

テーブルのHTMLをその形式で入力してしまえば、
影響を受けていた記事部分でも「自動改行」を生かしたままでいいと言うことになりますね。

文頭から、改行を直接入力していく流れより、
テーブルの箇所だけの「改行無しの入力」の方が簡単ですね。

「例2」の赤文字で示した<br>
テーブル内での箇条書きのように、改行が必要なところにだけ、直接入力して強制改行をする方法です。

改行が無ければ一行で、また、長いテキストはセル内で「折り返えし」で表示されます。

テーブル作成の時は、
最初は「例1」のように記入したタグが分かりやすい入力の方法で記入して、
HTMLタグが間違いないことを確認してから「例2」のように「改行無し」の形式に変更することが望ましいです。

初めから「改行無し」の形で入力したら、
項目やデータ数の多いテーブルではタグの流れが掴みにくく、余計に煩らわしくなりミスも出やすくなります。

(2)の方法は割と簡単に出来ましたね。

その形式を使って、難しいと思っていたテーブル作成が上手くいきます。


■テーブル作成で比較的によく使うタグ。

テーブルの表示を細かく設定するタグは、数多く有りますが、比較的に使われているタグをまとめてみました。

【資料】
比較的使用されるタグ

【テーブル】
align 
align left
align right
caption
caption align 
【罫線】
border
border-color
border-style
border-collapse

【セル】
width
height
col
cellpadding
cellspacing

colspan 
rowspan  
【背景・背景画像】
bgcolor 
background
【文字】
text-align
font-size
font weight

font-color
font-face
line-height


= テーブルの表示位置(記事内)
= テーブルの回りこみ(右)
= テーブルの回りこみ(左)
= テーブルに名前を付ける
= テーブルの名前の表示位置

= 罫線を表示・罫の太さ
= 罫線の色
= 罫線の種類
= 罫線を重ねる(単線)

= セルの横幅
= セルの縦幅
= セルの横幅(table属性)
= テキスト位置からの余白
= セルとセルの間の空き
= セルの結合(横)
= セルの結合(縦)

= 背景色(各セル毎指定可)
= 背景画像(各セル毎指定可)

= 文字の表示位置
= 文字サイズ
= の字の太さ
= 文字色
= 書体
= 行間(行送り)


各プロパティ(属性)には、属性値が付きます。
属性値はテーブルのデザインを考えて設定するのが望ましいです。

一覧の赤文字で表示してあるプロパティ

基本的にはCSSに組み込み、その他はテーブル作成の時にHTMLとして入力した方が、融通の利く多様なテーブルが作れます。

参照 
テーブル作成とその応用(1)
●CSSのセレクタに、基本的に組み込んだ方がいいプロパティ類
http://tosiji-dreamafi.seesaa.net/article/140029583.html


例えばCSSに「width:100px;」のように、固定したセルの横幅を定義してしまうと、新しくテーブルを作る時にも、そのサイズが反映されたセルが作られてしまいます。

テーブル作成時にHTMLで「<width="●">」(下記:注参照)と入力した方が、応用の利いた、形の異なるテーブルの作成が楽になります。

ただし、項目のセル<th>やデータセル<td>に<width="●">と個々に横幅を設定するよりも、table属性の<col>を使用して
  
   ※ col = column(カラム、欄)

  <table border="1">  ← テーブル全体の罫線
    <col width="100">  ← 1列目の横幅
    <col width="150">  ← 2列目の横幅
     <tr>
     <th>
      ・ 
  </table>    

table要素での指定の方法が一般的です。

同じく
table bgcolor="#ffffff">
の指定では、テーブル全体のバックカラー(background-color・bgcolor)が指定され、

td bgcolor="#ffffff">
だと、該当するセルのみのバックカラーになります。

このことは
<table>要素は、テーブル全体を設定する親要素の役割を持ち、
その中に<tr>や<th><td>の子要素を包括(入り子)していることになります。

また<th>や<td>は<table>の管理の下にあるが
おのおの独立している機能が働くと捉えることが出来ます。


table用のCSSのセレクタは、いろいろな形のテーブルを作成する目的で、
各テーブルが共通、共有出来ることを考えて定義します。

記事を書くごとに新しいtableセレクタをCSSに定義する状態は避けましょう。


■項目数を増やす。
テーブル内の項目数を横に増やすには

【画像1】
komoku01.png
 ↑ 画像をクリック・元画像が開きます。

の形式です。
<tr>〜</tr>で括られた
<th></th>を連続で必要項目数分を追加します。

■データ表示用の行を増やす。
データ入力用の行を下の方に増やすには、

【画像2】
data01.png
 ↑ 画像をクリック・元画像が開きます。

の形式で、
<tr></td>〜</tr></tr>で締められる形の
括り部分を1単位として追加していきます。

■<tr>要素に収めるセルの数は合わす。
項目数が3列のテーブルに、データ列を2個しか設定していないと、列数が合わないことになります。

そのような時のテーブルの表示は、
罫線の無いセルが表示されるか、またはテーブルが崩れることになります。

列数を合わすには
<td></td>で中身(テキスト)の無いセルを作り、その空セルで数を合わします。

空セルで数を合わしても罫線が表示されなければ、
テキストの代わりに「&hbsp;」(小文字入力:非改行スペースの意)を入力します

テーブルにはシンプルなものから、統計表のような複雑なものまでありますので、項目の増やし方、データ部分の増やし方は理解しておきましょう。


■セルの結合
テーブルを作っていると、
セルを2個、3個分横に結合して使いたいとか、あるいは
縦に繋げたいと言うことも出てきます。

セルの結合の仕方は
横結合 = colspan="n"  ←nは任意の数字
縦結合 = rowspan="n"
  
のタグで、繋ぎたいセルの数(n)を入力します。
ただし、セルの数を合わすことに注意して下さい。

【例3】
セルの結合・セルのバックカラー

<div class="samp table">
<table border=1 cellspacing="16" bgcolor="#cccccc"
col width="80"
col width="150"
<tr>
<th>@列</th>
<th>A列</th>
</tr>
<tr align="center">
<td rowspan="2" bgcolor="#cbffff">縦セルの結合とバック色</td>
<td width="100">A</td></tr>
<tr align="center">
<td>B</td></tr>

<tr align="center">
<td colspan="2" bgcolor="#ffff00">横セルの結合とバック色</td>
</tr>
</table>
</div>

【下記のHTMLタグは確認しておきましょう】

「テーブル要素の属性・属性値」
●cellspacing="16"

 
●bgcolor="#cbffff"  
●col width="●"  
⇒ セルとセルの間隔を「16px」空ける。
  ※普通はcellspacing="0"を設定。
   サンプルの為、設定を変えています。
⇒ テーブル全体のバック色。
⇒ セルの横幅。
 
「データ要素の属性・属性値」
●rowspan="2" 
●colspan="2" 
⇒ 縦にセルを2個繋ぐ(数字は繋ぐセルの数)
⇒ 横にセルを2個繋ぐ(数字は繋ぐセルの数)

■「例3」の表示例
   ↓

@列A列
縦セルの結合とバック色
横セルの結合とバック色

■cellspacing="0"の時の表示例
   ↓

@列A列
縦セルの結合とバック色
横セルの結合とバック色

■CSS使用の表示例
   ↓

@列A列
縦セルの結合とバック色
横セルの結合とバック色


<table>の属性・属性値を変更することで、
見た目の異なるテーブルが作成できましたね。

とくにCSSを利用したテーブルは、テキストの表示位置から、罫線までの間にスペース(padding)を取っていますので、スッキリした感じの表になります。

今回、確認したことは、
ブログにテーブルを上手く利用して、ページのレイアウトをしていく基本になります。

次回は、ブログで使うことの出来る
物販のアフィリエイトで使用されている
テーブルと画像の組み合わせやリンクの設定を確認します。



▲HTMLの関連記事
   holder01.gif ブログで使うHTML-目次ー
    http://tosiji-dreamafi.seesaa.net/article/133635358.html

★ご協力お願いいたします★   
      kame.jpg
    banner_01.gif
……人気ブログランキング……



タグ:HTML TABLE TR Th TD 罫線

2010年02月07日

テーブル作成とその応用(1)

■ 5-18 統計データなどに使うテーブルを作成する


■ テーブルを構成する要素(基本)
table(テーブル)とは
表計算ソフトのような「表」のことで、多くのマス目で成り立っています。

項目やデータで使っているマス目をセル(Cell=細胞、蜂の巣の穴)と呼び、用途に合った統計データ表の表記、あるいはそのテーブル機能を応用して、文章の段落やアフィリエイト用の商品紹介ページの作成など、ブログにも多用されています。

セルをまとめてテーブルを作る要素は、下記の四つのタグで構成されています。

【語意】
<table>
<tr>
<th>
<td>


= 表、目録、食卓
= table row ( row:並び、列 )
= table header ( head:頭 )
= table data ( データ )


<table>

<tr>

<th>

<td>



「テーブル(表)全体を定義」。<table></table>の中にテーブルを収めます。
●テーブルの中の「行を定義」。。<tr></tr>の中に<th>や<td>要素を収めます。
「項目を定義」。
<th></th>の中に一件の項目を指定します。
「データを定義」。<td></td>の中にデータを収めます。

の条件のもとで
各タグを組み合わすことでテーブル(表)が作成されます。

■テーブルの基本形


【画像1】
table05.png
 ↑ 画像をクリック・元画像が開きます。

各要素(属性、属性値)の使用方法は
「画像1」の形式になります。

実際に「画像1- 例2」の形式でテーブルを作ってみましょう。
【テーブルタグの形式】

<table border="1">
<tr>
<th>項目名@</th>
<th>項目名A</th>
</tr>

<tr>
<td>データ@</td>
<td>データA</td>
</tr>
</table>


【表示】

項目名@項目名A
データ@データA

シンプルなテーブルが表示されましたね。

HTMLタグの使用方法は

<table>
<tr><th>…</th></tr>
<tr><td>…</td></tr>
</table>

の形式がテーブル作成の基本です。

項目数の増やし方、データの行数の追加の方法は
次回の応用編で確認します。


■テーブルの罫線を調整する

罫線を表示するには<table>要素にborder属性を追加します。
  ※border=へり、ふち(縁)

<table border="1"
  ※border="1"の数字は線の太さを指定します。
   単位はpxですので、この例では「1px」の太さになります。

属性値「border」の指定がないと、文字だけが表示され
罫は表示されません。

表示されているサンプルのテーブルは
セルとセルの間隔が空いて、二重線になって表示されています。

このことは<table><th><td>の各要素

●table要素
●th要素
●td要素

= テーブルの外側
= セルの周囲
= セルの周囲

各要素ごとに別々に罫線を引いた結果です。

罫線の間隔を調整するHTMLタグはありますが
各要素に個別に記入するのは面倒ですので

CSSに新しいセレクタを定義して
HTMLの「table要素」では線の種類や太さなどの
細かい指定をする必要がないようにしましょう。

CSSに定義して適応すれば、テーブルを作るたびに
何度も同じタグを記入しなくてもいいようになります。

また、入力の間違いやソースが分かり難いなど
煩雑で非効率な作業が軽減されます。


■ 新しいtableセレクタをCSSに追加

CSSにはテーブル作成の上で基本的な

●項目やデータを表記する書体
●文字サイズ
●セル内の行送り
●文字の表示位置
●線(罫)の太さ
●線(罫)の色
●線(罫)の表示調整
●セルの内側の余白

を定義して

●セルのサイズ
●セルのバック(下地)色
●文字の色

などは
テーブル作成時に
直接にHTMLで書き込む形式にした方が簡便です。

CSSを適用することは
定義したプロパティを利用することで
形(種類)の異なるテーブルも作りやすい利点があります。

いくつかの形の異なるテーブルを作って表示した時にも
「見出し」や「罫線の太さ・色」「データ」の表示など、統一された見やすいレイアウトになります。

一般的に「table」要素には、細かい設定がされていませんので
CSSに定義して、自由度を広げておきましょう。


●テーブル用のCSSセレクタの記入例
セレクタ名を仮に「samp table」とします。

【CSS】
独自のテーブルセレクタを定義


.samp table {
font-size:12px;
line-height:1.3em;
padding:10px;
border:1px;
border-style:solid;
border-color:#b0c4de;
border-collapse:collapse;
}

.samp th {
font-size:14px;
font-weight:bolder;
text-align:center;
padding:10px;
}

.samp td {
font-size:12px;
font-weight: normal;
text-align:left;
padding:10px;
}


CSSに「class適用」のテーブル対応のセレクタを設定しました。



      参照の「 class・id 属性」は確認しておきましょう。
      CSSの定義で頻繁に使用します。

上記のテーブル用の「独自のテーブルセレクタを定義」のセレクタの記入例では
同じ内容の「プロパティ」「値」を各 class 毎(.samp table/.samp th/ .samp td) に定義していますが

table構造の親セレクタ「.samp table」に
使用書体・大きさ・罫線の太さや色・行送りなど、共通(共用)する定義は、まとめても構いません。


「.samp th」「.samp td」の各セレクタは入り子になりますので、親セレクタと異なる「プロパティ」だけの定義でもいいのです。

上位の「.samp table」の定義がそのまま適用(継承)されます。

CSSを適用して横3列・縦2行の
サンプルのテーブルを作成して見ましょう。

サンプルで作るテーブルのHTMLタグの形式は以下の通りです。

【HTML】

<div class="samp table">
<table>
<tr>
<th bgcolor="#e0ffff">ホテルA</th>
<th bgcolor="#ffe4e1">ホテルB</th>
<th bgcolor="#e0ffff">ホテルC</th>
</tr>
<tr>
<td width="110"
宿泊:20,000円
予約可能
送迎出来ます
</td>
<td width="110"
<font color="cd5c5c">
宿泊:6,300円
12日15日満室
送迎可能です
</font>
</td>
<td width="110"
宿泊:15,000円
週末予約可
送迎車あり
</td>
</tr>
</table>
</div>



「表示例」
  ↓

ホテルAホテルBホテルC
宿泊:20,000円
予約可能
送迎出来ます。
宿泊:6,300円
12日15日満室
送迎可能です。
宿泊:15,000円
週末予約可
送迎車あり。


    注
   ●プラウザの「Firefox」では、各要素の罫線が離れて表示
    されます。
    CSSに定義した罫線を重ねて表示するプロパティとその値
    「border-collapse:collapse;」がうまく作用していませんので、
   ●tableのHTMLに直接
    <table style="border-collapse:collapse;">
    を書き込めば、重なって一本の線になります。

「表示例」
  ↓

ホテルAホテルBホテルC
宿泊:20,000円
予約可能
送迎出来ます。
宿泊:6,300円
12日15日満室
送迎可能です。
宿泊:15,000円
週末予約可
送迎車あり。
   

テーブルは上手く作成されていますか。

作成したテーブルの上に数行にわたる空白があり、記事(文章)部分と離れた位置にテーブルが表示されますね。

このことは
teble作成時に自動的に入力された空白(<br>)が追い出された結果です。

見えない空白(<br>)がtableと記事の間に有ることが原因になります。


【空白行を取り去る方法】

空白行を取り去る(表示させない)には

(1)ページの全改行を直接入力。
(2)テーブルタグのみを改行無しでの入力。

の二つの解決方法がありますので、個々に確認します。

(1)ページ内の全改行を直接書き込む

空白行が表示される解決方法の一つで
文書に自動入力される改行<br>を直接入力に変更する方法。

  ⇒ ■ seesaaブログ・ヘルプ
    テーブル作成に関する注意事項


@ブログの「記事入力欄」の下方(※「画像2」参照)「この記事の詳細設定」の項目の
「改行HTMLのタグ変換」

「改行を<br/>タグに変換しない」
のラジオボタンをクリックして、改行タグを直接(手動)で入力する方式に切り替えます。

【画像2】
kizi01.png
 ↑ 画像をクリック・元画像が開きます。

Aブログの入力設定では
キーボードの「エンターキー(Enter)」を押すと自動な改行になっています。

テーブルを作成するときに
自動改行になっているとテーブル内に存在する改行(空白)がテーブルの外側に追い出され
予想もしない位置で改行が働く結果になり、テーブルの表示位置(場所)が大きくずれます。

B「改行を<br/>タグに変換しない」にすると、自動的に実行していた「改行」が無くなります。

「改行」が自動で入力されないことは

●ページの頭から入力した「記事(文章)」も、改行無しのベタ表示になりますので、文章の最初から<br>改行タグを必要な箇所に、直接に入力する必要が出てきます。
●さらに空白行は必要な空白行数分の<br>改行タグを連続で入力します。
●table要素内のテキスト文にも<br>改行タグを直接書き込むまなければなりません。

上記の方法を纏めて見ると

【まとめ】
記事入力設定を「改行を<br/>タグに変換しない」にする。
●文章の改行位置に<br>改行タグを直接に書き込む。
●空白行はその空白行の数だけ<br>改行タグを書き込む。
●テーブル内のテキストにも<br>改行タグを書き込む。

<br>改行タグを直接に書き込む煩雑な入力作業を伴いますが
テーブルを使う利点が大きいので、解決方法の一つとして覚えましょう。

次回は、比較的に簡単な
(2)テーブルタグのみを改行無しでの入力 
  ※アフィリエイト用のテーブルタグが殆どこの形式になっています。
の方法を確認します。



▲HTMLの関連記事
   holder01.gif ブログで使うHTML-目次ー
    http://tosiji-dreamafi.seesaa.net/article/133635358.html

★ご協力お願いいたします★   
      kame.jpg
    banner_01.gif
……人気ブログランキング……



×

この広告は1年以上新しい記事の投稿がないブログに表示されております。