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




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


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

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

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


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

2010年06月05日

marginとpadding・応用(1)

■ 5-21 枠内に余白を空ける


ネットで巡回していると
罫線囲みの文章(記事)をそのままベタで入力して表示しているブログが結構目につきます。

罫線と文字が密着して、書いてある記事が読みにくくブログレイアウトに全体的な息苦しさを感じます。

文章を書くことは、
いかに相手に読んでもらえるかに気を使うことが大切です。

読みやすい文意で表現することは勿論のこと、
分かりやすい、親しみやすいデザイン(組み合わせ・組版)にも気を使うべきであり、

アクセスが増えるということは、ブログを発信する側、つまり書き手側が常に相手のことを意識しているかどうかの問題でもあります。

読みやすく、見やすくするために余白を空けることは、ブログの重要な課題であり、
デザイン的には、余白(ホワイトスペース)を生かす感性や技術も必要です。

書籍や新聞でも、文章や画像の配置する「天・地・小口・ノド」などの余白の取り方、画像の段組や断ち切りの、いわゆる一定の考え方を反映した組版の基準があります。

それらの基準は、一言で言うと「いかに読みやすくするか」の考え方です。


■ margin(マージン)とpadding(パディング)

両方とも「余白を取る」タグですね。

●<margin>は、ヘリ、フチの意味で、余白を空ける起点がヘリからになっています。
●<padding>は、英文の(pad)= 当て物、詰め物などの意味で要素の「内側の余白」を指定します。

同じ余白でも
余白を取る基点が「ヘリから」と「内側から」に異なります。




【 margin = はヘリ(縁)からの余白です】

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

ブログなどのウェブサイトでは、記事の表示領域を、仮に400pxの横幅を取っていたとき、その中に文章を表示する場合は、領域の400px一杯を使いませんね。

横幅の左右から、使用文字の半分(半角)から一文字分(全角)の余白を取った範囲内に文章を表示しています。

横幅一杯の表示を避けるため、左右の各ヘリにスペース(空き)を設けていますね。
そのヘリから余白を取るタグが<margin>です。

【margin要素の属性】

margin-top
margin-right
margin-bottom  
margin-left  
margin

⇒ 上の余白
⇒ 右の余白
⇒ 下の余白
⇒ 左の余白
⇒ 四辺の余白

の種類と、上下左右をまとめて記入する <margin:上px 右px 下px 左px;>     
の形式があります。

余白を取る属性値の単位は「px」が多く使われていますが
<px><in(インチ)><pt(ポイント)>などの「絶対サイズ」での指定、または< %><em> などの「相対サイズ」でも指定はできます。




【 padding = 要素の「内側の余白」です】

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

<padding>は文字や文章、あるいは画像・図表などの領域を基点として余白を取るタグです。

内側の基点からの余白のため、その基点を基準に割りと自由に上下左右へ余白が取れます。


padding-top
padding-right
padding-bottom
padding-left
padding

⇒ 上内側の余白
⇒ 右内側の余白
⇒ 下内側の余白
⇒ 左内側の余白
⇒ 四辺の内側余白

の種類と、上下左右をまとめて記入する <padding:上px 右px 下px 左px;>     
の形式があります。

図1<margin>と図2<padding>における
余白の取り方を確認します。

例@
文章段落のベタ入力(margin/padding設定無し)


    注
   ●比較のために枠(破線・点線)を設定して、仮の表示領域とします。

中国の「三国志」が好きな日本人は多い。

三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ドラマである。

表示領域(青破線内)へのベタ入力の例です。

文章の上下左右に余白(スペース)が無いために、文字と破線が接触して、文章やレイアウトに窮屈さを感じます。
ネット上のブログでは、画像と文章の組み合わせ、テーブルを使った表示などでその傾向が多く見られます。


例@のパターンに< margin>属性を使用して余白を設定してその形を確認します。

例A-1
<margin>タグを使って文章(段落)の左右に空白を取る。


【HTML】
<div style="margin:0px 24px 0px 24px;">文章</div>
  ↓
中国の「三国志」が好きな日本人は多い。

三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ドラマである。

領域の左右に<24px>づつの余白を取りました。

<margin>属性とその属性値は
 <margin-left="24px";>
 <margin-right="24px";>
のように上・下・左・右と単体で一辺づつ記入してもいいのですが

<margin>属性には
<div style="margin: ●px ●px ●px ●px;">文章</div>
のように複数の属性値をまとめて指定するタグの書き方があります。

属性値は左から「 上・右・下・左 」の時計回りの順の値になっています。

このタグを使用するときには
●余白を取りたい各々の箇所に属性値(単位)を記入します。
●余白を取らない所は「0px」のまま省略しないで残しておきます。

タグが長くなる欠点がありますが
形が覚えやすく、指定が簡単で明確ですので使いやすい特徴があります。
<padding>も同じ形式です。

余白を取った分、内側に文章が追われていますね。
ブログではCSSで定義されている記事表示枠の、各ヘリからの余白サイズになりますが、

この例では
分かりやすいように設定した仮想領域の破線部分(青)がヘリになりますので、その位置からの余白になります。

余白を取るとき
文字揃えの考え方から「使用している文字の大きさの倍数」で指定するのが理想的といえます。

例では
使用文字の大きさは「12px」を使用していますので、12の2倍数(24px)の空きを作っています。


例A-2
<margin>タグを使って文章(段落)の上下に空白を取る。


【HTML】
<div style="margin:12px 24px 12px 24px;">文章</div>

例A-1のHTMLに「上」と「下」の余白の値を追加します。
値の挿入箇所は、赤字の箇所(上・下)ですね。

上から12px、下から12pxの空きを作りました。上・下の位置は直前の行からの距離になります。
(例では表示している破線の上下から)
  ↓
中国の「三国志」が好きな日本人は多い。

三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ドラマである。


<margin>の範囲の「上・下・左・右」の全てに余白が設定できました。
HTMLをまとめると

【HTML】
<div style="margin:12px 24px 12px 24px;">文章</div>
の形式です。

領域の「 上から12px 右は24px 下からは12px 左は24px 」の余白を取りなさいと言う意味になります。


例A-3
<margin>タグの確認のため、余白の範囲を罫線で囲んでみる。


【HTML】
<div style="margin : 12px 24px 12px 24px ; border:1px dotted;border-color:red;">">

中国の「三国志」が好きな日本人は多い。

三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ドラマである。

赤破線で表示した仮想領域のフチから左右に「24px」、上下には「12px」の余白を取り、赤の破線(border:1px dotted) を引いてみました。

罫線を表示してみると、marginの余白がどの位置か分かりますね。

●この囲み罫を生かして、中に文章を表示したいときには罫と文章がくっつきすぎて窮屈ですね。
●読みやすい表示にするため、さらに文章の前後や上下に余白を入れてみます。

文章が枠線内に入っていますので、
余白は囲み罫内に設定する必要がありますね。

ここで「padding」を使います。


<padding >の設定

例B-1
<padding>で、文章の左右に余白を取る。


タグに「padding:●px ●px ●px ●px;」を追加します。

さらに文章の左右(前後)に一文字分の余白を設定します。

<div style="margin:12px 24px 12px 24px;padding: 0px 12px 0px 12px;border:1px dotted;border-color:red;">

中国の「三国志」が好きな日本人は多い。

三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ドラマである。


<padding >は<margin> のようにヘリからの余白サイズではなく
文章(段落)を基点として余白を設定するタグです。


例B-2
同様に文章(段落)の上下に余白を取る。


中国の「三国志」が好きな日本人は多い。

三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ドラマである。

<div style="margin:12px 24px 12px 24px;padding:12px 12px 12px 12px;border:1px solid;">

罫囲みの文章の上下左右に、各12pxづつの余白が取れましたね。
罫で囲んだ中の文章が、ベタで入力した形より余白を取ったため読みやすくなります。

このタグでは
上下左右の余白を全て同じ値(12px)で空けていますので

<div style="padding:12px;">

のように値をひとつだけ書いてかまいません。<padding>の上下左右の全てから同じ値の余白を取ります。
<margin>のときも、同じ形式です。

例C
<padding>の背景に色(バックカラー)をのせる。


中国の「三国志」が好きな日本人は多い。

三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ドラマである。

強調や注意を喚起するため、文章のバック(地)に色を乗せることが有りますね。

タグに
今まで作成したHTMLに
バックカラーの属性とカラーコードの属性値を(background-color:#カラーコード;)を追加します。

挿入位置は記事のバックで<padding>の要素内ですので、下記のHTMLの赤字の箇所です。

赤色の破線表示(border:1px dotted;border-color:red;)は削除します。   

<div style="margin:12px 24px 12px 24px; padding:12px 12px 12px 12px; background-color:#eeeeee;">


色の使い方や配色によって、ブログの与えるイメージが変わりますね。

注意を喚起する意味合いで、バックなどに色を使用するにしても、赤などの強い原色はなるべく避けます。

罫線も太過ぎては見た目が悪いので、デザイン的な面から判断して使用しましょう。


●<margin> や <padding>
を使って左右に余白を取るときに、注意すべき点は

<margin> の余白サイズと< padding> で取った余白サイズの合計が大きすぎると、文章の表示領域が小さくなります。

ブログの記事表示領域の左右サイズを考慮して、余白の数値を調整して設定します。

●記事表示領域の大きさは
CSSで定義されていますので、確認しておきましょう。

このブログは3カラム設定で
記事領域は左右400pxに取られていますので、領域の400pxを越えないように
テーブルや画像・罫囲みなどのサイズを設定しています。

……

<margin > <padding >
を使った罫囲みの文章の表示の一例でした。

この余白を取るタグは、画像の配置、文章の開始位置、表の表示などHTMLでは重要なタグのひとつです。二つのタグを使いきれると、制約のあるブログでもホームページのような表現ができます。

次回は
<padding> の細かい設定の確認と<padding >を使用した文章入力の方法を確認します。




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

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



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 罫線
×

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