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




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


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

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

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


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

2010年07月21日

箇条書きの基本(2)

■ 5-27 箇条書きのマーカーや記号を変更

箇条書きは情報を

●簡潔にまとめ
●要点が分かりやすく
●ビジュアル的に見やすくして
●読みやすくする

効果がありますね。

●行頭に「●」のマーカーや「1」などの数字を入れて
ポイントを強調することで、伝いたいことを明確に伝え、記事を印象付ける役割も果たします。

●流れの手順の説明やリンクを張ることで項目にすぐに進めるように、
メニューとしての役割を持たせる使い方もあります。

新しい情報を提供する。
ブログにとって欠かせない命題の一つで
ブログに訪問する方は、それらの情報を期待していることが多いですね。

情報が、キチットと分かり易いように整理されていることが
ブログの良し悪しを決めると言っていいでしょう。

文章の構成においてはインデント、段落や段組みなどは

●いかに情報を整理するか
●いかに文章を読みやすくするか

の視点から使用されています。

箇条書きを利用するのも同じの考え方からです。


■箇条書きで表示するマーカーや数字の設定。

<ul>タグ(順序なし)
を使ってのマーカーの表示は、自動的に「●」「○」「■」が表示されましたね。

<ol>タグ(順序あり)
では、算用数字が振られましたが
もっと細かく該当する項目が
掴みやすいように「英文字」や「ローマン数字」などを使って階層を明確に表示したいときがありますね。

マーカーや数字を置き換えるときは
<list-style-type >プロパティの<type>プロパティを使用することになります。

それらプロパティやタグを使用するには
HTMLタグの直接書き込みとCSSへの定義があります。


【マーカーの置き換え】

■ <list-style-type>形式

<list-style-type>は

<@タグ名 Astyle="list-style-type: Bマーカーの種類">の形式をとります。

属性のデフォルト(初期値は)<disc>(黒丸)になっています。

この形式は、<ul>、<ol>の両要素で使用できますが

●表示順序には関係がない、箇条書きの項目には<ul>要素を。
●「1、2」や「a、b」などのように、 表示される順序が重要な箇条書きは<ol>要素で。

と使用する要素を使い分けましょう。

とくに<ul>要素で、<list-style-type>形式を使用するのは、
リストマーカーの黒丸や四角の種類を変更する時くらいです。

    注
   ●list-style-type
    のタグやプロパティ形式はチェックしておきましょう。

   ●箇条書きのCSSで使用します。

【資料1】
マーカーの種類

none
disc
circle
square
decimal
lower-alpha
upper-alpha
lower-roman
upper-roman

↓ IEでは未対応です。
hiragana
katakana
hiragana-iroha
katakana-iroha
cjk-ideographic




⇒ なし 
⇒ 黒丸 (●)
⇒ 白丸 (○)
⇒ 黒四角(■)
⇒ 算用数字(1 2)
⇒ 英小文字(a b)
⇒ 英大文字(A B)
⇒ ローマン数字小(@A)
⇒ ローマン数字大(TU)


⇒ ひらがな(あい)
⇒ カタカナ(アイ)
⇒ ひらがな・いろは(いろは)
⇒ カタカナ・イロハ(イロハ)
⇒ 漢数字(一二三)


【<list-style-type>形式:タグの使用例】

<ol>
<li style="list-style-type:decimal">那覇市
<li style="list-style-type:lower-alpha">沖縄市
<li style="list-style-type:"upper-alpha">浦添市
<li style="list-style-type:lower-roman">宜野湾市
<li style="list-style-type:upper-roman">豊見城市
</ol>

【表示】
  1. 那覇市
  2. 沖縄市
  3. 浦添市
  4. 宜野湾市
  5. 豊見城市


上記の例は
<ol>要素の中に、複数の<li>要素を使った箇条書きの例です。

<list-style-type>プロパティを
<li>要素の中に記入する方法を取っていますね。

decimal(算用数字)、lower-alpha(英小文字)と異なる属性を指定しています。
その属性に対応した記号が表示されています。

本来は、このような入り乱れた記号、統一されない使い方はしませんね。

記号類を変更するプロパティ<list-style-type>は
箇条書き全体を括る<ol>要素の属性
として記入するのが、統一性をもった表示になります。

<ul>要素でも同じ使い方になります。

「list-style-type形式」

【タグ形式】
<ol style="list-style-type:decimal">
 <li>那覇市
 <li>沖縄市
 <li>浦添市
  <ol style="list-style-type:lower-alpha">
  <li>宜野湾市
  <li>豊見城市
  </ol>
</ol>


【表示】
  1. 那覇市
  2. 沖縄市
  3. 浦添市
    1. 宜野湾市
    2. 豊見城市

<ol>要素の中に
「入り子」として再度<ol>要素を組み込んだパターンです。

最上位の<ol>の値<decimal>は、入り子の<ol>を含めますが
入り子の<ol>が新たに値を<lower-alpha>としていますので
各々の<ol>で括られた各<li>は各<ol>の値で表示されます。

最上位の<pl>の値と入り子の<ol>の値を継承する<li>の範囲を掴んでおきましょう。


CSSでは、<ol>(親)の方での指定になりますので、
形式を覚えておきましょう。

以前に確認した「テーブル」のHTMLタグと同じような性質です。



<list-style-type">に準じる(仲間)プロパティには
●<list-style-image>   = 記号の替わりに画像を用いる
●<list-style-position> = 記号や画像の表示位置を指定する
が有ります。(後述します。)


■<type>形式

<type>形式の特徴として
<li style="list-style-type:decimal">の値<disc><decimal><lower-alpha>
のようなマーカーの種類の指定ではなく、

<ol type="1">のように
1、2、3(算用数字)a、b、c(英小文字)を直接書き込んでマーカー(段落番号)を振る形式です。

    注
   ●日本語入力ソフト=ワードでは
   「● ○ ■ 」のマーカーを振る形式は「箇条書き」
   「1、a、T」などの数字を振る形式を「段落番号」と称しています。

   このページでは値の呼び名を「段落番号」とします。

タグは
 <ol type="段落番号">
  <li>項目
 </ol>
の形式です。

【資料2】
段落番号

1
a
A
i(アルファベットのi)
I(アルファベットのI)

⇒ 算用数字
⇒ 英小文字
⇒ 英大文字
⇒ ローマン数字(小)
⇒ ローマン数字(大)

   ※注 ⇒ ローマン数字は漢字変換数字の「@、T」ではなく、
         アルファベットの「@、T」 を使用します。

  
【タグの使用例】
<ol>
 <li type="1">那覇市
 <li type="a">沖縄市
 <li type="A">浦添市
 <li type="i">宜野湾市
 <li type="I">豊見城市
</ol>

【表示例】
  1. 那覇市
  2. 沖縄市
  3. 浦添市
  4. 宜野湾市
  5. 豊見城市

この形式でも
基本的には記号類を変更する
プロパティ< type="段落番号">の記入箇所は

箇条書き全体を括る<ol>要素の方に属性

として指定します。

「type形式」

【タグ形式】
<ol type="a">
 <li>那覇市
 <li>沖縄市
 <li>浦添市
   <ol type="i">
     <li>宜野湾市
     <li>豊見城市
   </ol>
</ol>

【表示】
  1. 那覇市
  2. 沖縄市
  3. 浦添市
    1. 宜野湾市
    2. 豊見城市

「type形式」の方が、
段落番号の形状が分かりやすく、使いやすいですね。

「ひらがな」「カタカナ」や「いろは」などには対応していませんが、
簡単な箇条書きには、用意されている「段落番号」で十分に組み合わせが出来ますので使い慣れましょう。


■文章段落(p)で分けられた箇条書きの番号を連続数字に。

ひとつの文章(段落:p)の途中に箇条書きを表示して、次の文章(段落)を表示したあと、その下に2個目の新しい箇条書きを作ると、段落番号はスタートの同じ数字(1)からになりますね。

文章が一つの流れで、箇条書きも文章とともに続く形で、
文章の分け目に入れる箇条書きの数字は、前の箇条書きから続く連続した数字にしたい時があります。

 <p>段落1   ← 段落1、2は一つの文章の流れ
   箇条書き@ 
 </p>
 <p>段落2
   箇条書きA ← 箇条書き@から続く連続番号 
 </p>

段落をまたがった箇条書きの番号を連続の番号にする

段落1
 <ol type="1"><li>項目1<li>項目2</ol>
段落2
 <ol start="3"><li>項目3<li>項目4</ol>

の形式にします。

タグの種類には

 <ol start="●">
 <li value="●">

が有りますが、使う要素が異なります。

文章段落をまたがった箇条書きの連番:例

中国の「三国志」が好きな日本人は多い。
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ドラマである。
  1. 「三国志」とは紀元後3世紀、後漢の滅亡後の歴史物語。
  2. 三国は、魏・呉・蜀を言う。
漢(後漢)帝国の末裔、劉備玄徳と、血を分けた兄弟にも類する諸葛亮孔明・関羽雲長・張飛翼徳らを中心としたストーリーの展開には、この利爺の年代でも心沸き立つものがある。
  1. 赤壁の戦い=呉、蜀の連合軍と曹操の率いる魏との戦い。
  2. 蜀の武将「趙雲」の活躍も見逃してはならない。

箇条書きの番号が文章の段落をまたがって、連続した表記になっていますね。

そのほかに
  1. 那覇市
  2. 沖縄市
  3. 浦添市
  4. 宜野湾市
のように、途中から連番を変更するときには

<ol type="1">
 <li>那覇市
 <li>沖縄市
 <li value="5">浦添市
 <li>宜野湾市
</ol>

<li>タグに value属性 を指定します。
value属性で番号を変更すると、以降の<li>要素は変更した番号から連番で表示されます。


次回の「箇条書き」は

●マーカーや番号の表示位置
●HTMLでの(マーカーの代わりの)画像表示

を確認します。




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

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



2010年07月12日

箇条書きの基本(1)

■ 5-26 文章の整理とビジュアル化

ブログの内容を文章だけで表現するには限界がありますね。

訪問したユーザーは、「読む」と同時に「見る」こともしています。

内容の「区切り(段落)」や文章の「グループ化」を行い、視覚的に表現することは
「読む理解」と「見る理解」の双方のメリットが生かされ、分かりやい文章としてとらえられます。

前回の「段組み」を使う方法も、分かりやすい文章の構成として確認しましたが、
ほかの要約の方法には「箇条書き」もあります。

「箇条書き」は
●情報を簡潔にまとめ、読みやすくするとともに
●要点をまとめることで見やすくする、ビジュアル的な側面。
●箇条書きに、記事内の項目をリンクするメニューの役割も果たせます。

読み手側に要点を示し、記事を印象づけることは、ブログの「欠かせない命題」のひとつです。


■ 箇条書きの種類

HTMLで作成する箇条書きには次の3種類があります。

@ 順序なし箇条書き(●箇条書きリスト)
A 順序あり箇条書き(●連番つきリスト)  
B 定義型箇条書き   
⇒ <ul要素>
⇒ <ol要素>
⇒ <dl要素>

    注
   ●箇条書きタグは「ブロック」要素です。

………

@ 順序なし箇条書き

単に「箇条書き」と言う時は、順序なしのことです。

【順序なし(箇条書き)の表示形式】
沖縄県の市町村・人口・世帯数   (2009年統計)
  • 那覇市
    • 人口=312、000人
      • 世帯数=122,000世帯
  • 沖縄市


【<ul>要素と<li>要素】

順序無し箇条書きリストを作るタグは
<ul>と<li>を組み合わせて使います。

  ul = Unordered lists(order = 順番・順序  un = 否定)
  li = list item(list = 表・名簿  item = 項目・品目) 

    注
   ●ul は「Unnumbered lists」という説明もあります。

●<ul>要素は箇条書きにするリストの範囲を、範囲の中に<li>要素が入る形になります。
●<li>要素は各項目です。

<ul>
<li> 項目 </li>
<li> 項目 </li>
</ul>

の形式をとります。

●各項目(リスト)の先頭に黒丸のマーカー(●)が自動的に表示されます。

●順序無しの箇条書きは
項目の順番を気にしなくてもいいような情報の場合に適しています。

箇条書きはいくつかの項目の並びですね。

    注
    ●閉めタグの</li>は省略することが出来ます。     
    ●</ul>の閉めタグは省略できません。


【<ul>タグの使用例と表示】
【タグ使用例】

沖縄県の市町村
<ul>
<li>那覇市</li>
<li>沖縄市</li>
<li>浦添市</li>
<li>宜野湾市</li>
</ul>

【タグの記入】
※タグの記入は、各タグ、各項目を改行無しの形で記入します。

沖縄県の市町村<ul><li>那覇市</li><li>沖縄市</li><li>浦添市</li><li>宜野湾</li></ul>
【表示】

沖縄県の市町村
  • 那覇市

  • 沖縄市

  • 浦添市

  • 宜野湾市


    注
   ●箇条書きの<ul><ol><dl>タグはブロック要素のため、
    箇条書き項目の前後に一行の空白行が自動的に表示されます。

   ●タグの記入は、改行無しの記入になります。

   
【<li>要素に入り子の形式】

●<li>要素の中に、<ul>で括った「箇条書き」を入れることもできます。
 その形を「入り子」と言います。

●入り子にした新しい箇条書きのマーカーは、親の黒丸(●)に対して白丸(○)を表示します。

●その白丸の<li>要素の中にも、また入り子の形式で新しい箇条書きを挟むことができます。マーカーは黒四角(■)です。

箇条書き:入り子形式
【タグ使用例】

沖縄県の市町村名
<ul>
<li>那覇市
<ul>
<li>
人口約31万2千人</li>
</ul>

</li>

<li>沖縄市
<ul>
<li>
人口約13万人</li>
</ul>

</li>
</ul>


【表示例】
沖縄県の市町村
  • 那覇市
    • 人口約31万2千人
  • 沖縄市
    • 人口約13万人

標準マーカーの種類(デフォルト値)は、上位の階層から
黒丸(●)、白丸(○)、黒四角(■)の順で表示されます。

このデフォルトで表示されるマーカーを、CSSの「list-style-type」プロパティ
で変更したり、画像に差し替えたりすることができます。

シリーズの後半で確認します。


………

A 順序あり箇条書き
  (連番つき箇条書きとも言います)

【順序ありの表示形式】
沖縄県の市町村名・人口・世帯数   (2009年統計)
  1. 那覇市
    1. 人口=312、000人
      1. 世帯数=122,000世帯
  2. 沖縄市


「順序あり箇条書き」は項目の頭に順番を表す1,2の数字がデフォルト値です。
下位の階層にも同じ数字が振られます。


【<ol要素>と<li>要素】

●<ol>タグは、項目の頭に1,2の数字を表示します。

振られた番号に項目の重要度の順番を含みます。

<ol>
<li> 項目 </li>
<li> 項目 </li>
</ol>
の形式をとります。<ul>要素と同じですね。

    注
   ●<ol> = Ordered lists 「order=順番・順序・秩序」
   ●<ol>要素もブロック要素です。

順序あり箇条書き
【タグ使用例】

沖縄県の市町村
<ol>
<li>那覇市</li>
<li>沖縄市</li>
<li>浦添市</li>
<li>宜野湾市</li>
</ol>

【タグの記入】
※タグは<ul>と同じように改行無しの形で記入します。
【表示例】
沖縄県の市町村
  1. 那覇市
  2. 沖縄市
  3. 浦添市
  4. 宜野湾市

●<li>要素の中に
順序あり箇条書き<ol>や
順序なし箇条書き<ul>で括った「箇条書き」を入れることもできます。

●入り子の箇条書き<ol>の数字番号は親と同じ数字表記になります。
●入り子の「順序なし箇条書き<ul>」ではリストにマーカーが表示されます。
●入り子の数には制限は有りませんが、読みやすさを考え使用しましょう。

順序あり箇条書き:入り子形式
【タグ使用例】

沖縄県の市町村
<ol>
<li>那覇市
<ol>
<li>
県庁所在地</li>
<li>人口=約31万2千人</li>
</ol>

</li>

<li>沖縄市
<ul>
<li>
那覇市に次ぐ第二の市</li>
<li>
人口=約13万人</li>
</ul>

</li>

<li>浦添市</li>
<li>宜野湾市</li>
</ol>


【表示例】
沖縄県の市町村
  1. 那覇市
    1. 沖縄県の県庁所在地
    2. 人口=約32万人
  2. 沖縄市
    • 那覇市に次ぐ市
    • 人口=約13万人
  3. 浦添市
  4. 宜野湾市

リストで表記される「1、2」などの算用数字は
CSSの設定でアルファベット「A、B」「a、b」やローマ数字「T、U」「@、A」などに変更ができます。

箇条書きでリストの数字開始番号(途中の数字から始まるリストなど)
の指定も可能です。


………
B 定義型箇条書き

辞書のように「見出し語」と
それに対応する「説明文」を対にして一覧表示する形式を言い、定義リスト、用語リストとも言います。

<dl>、<dt>、<dd>の三つのタグを使います。

 dl = definition lists     「definition = 定義・語義・限定」
 dt = definition term     「term = 期間・任期・関係・間がら」
 dd = definition description  「description = 記述・描写」

【定義型箇条書きの表示形式】
沖縄県の市町村
那覇市
沖縄県の県庁所在地、人口約32万2千人。
………
沖縄市
………。


【<dl要素>】

<dt>で「定義名」
<dd>で「定義の説明」を示し、
それを定義型リストとして<dl>で括る形式のことです。

<dl>の中に直接入れるものは
「見出し(定義名)」を表す<dt>と、それに対応する
「説明文(定義の説明)」の<dd>の要素の2種類です。

基本的な使い方では

<dl>
<dt> 見出し(定義名) </dt>
<dd> 説明文(定義の説明) </dd>
</dl>

<dl>で括る形式です。

<dd>には、さらに入り子として、他の段落や箇条書きを入れることができます。

定義型箇条書き
【タグ使用例】

沖縄県の市町村
<dl>
<dt>那覇市</dt>
<dd>沖縄県の県庁所在地、人口約31万2千人。<br>戦後に隣接する首里市、真和志市、小禄村が合併。</dd>
<dt>沖縄市</dt>
<dd>米空軍、嘉手納飛行場の東から南側に隣接する市。<br>カタカナ表記の「コザ市」から1974年に美里村との合併を機に「沖縄市」と改名。</dd>
</dl>


【表示例】
沖縄県の市町村
那覇市
沖縄県の県庁所在地、人口約32万人。
戦後に隣接する首里市、真和志市、小禄村が合併。

沖縄市
米空軍、嘉手納飛行場の東から南側に隣接する市。
カタカナ表記の「コザ市」から1974年に美里村との合併を機に「沖縄市」と改称。

定義型箇条書きは
見出しがあり、本文が続く辞書のような書き方になっていますね。

形式的には、縦型のテーブルを配置したようになっています。

この定義型箇条書きの
 ●<dt> 要素は項目の「見出し」を表示する意味から
  <ul><ol><dl>の要素は入り子にはなれませんが、
 ●<li>要素や<dd> 要素の中には
  <ul><ol><dl>の各要素を入れることができます。


@ 順序なし箇条書き  
A 順序あり箇条書き  
B 定義型箇条書き

の箇条書きには、各々の特徴がありますね。

それらの特性を上手く使用して
階層構造的な情報を整理して見やすく読みやすくすることに努めましょう。

次回は具体的に
HTMLタグ、CSSと絡んだプロパティを使用して、マーカーや数字の変更などを確認します。




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

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




2010年06月24日

文章の段組み(2):table

■ 5-25 <teble>タグで段組みを作る

前回は<float>による記事の段組みを確認しましたので、
同じ段組みの形式を<table>タグを使って作成する方法を確認します。

<table>要素は
情報を整理して、統計表やグラフなどを作成する機能に優れ、表だけではなく記事や画像などの配置に自由度の高いHTMLタグになっています。

テーブル作成機能を使うことで、罫囲みや段組みなどに応用して、結構使われています。

<table>は、細かい設定ができ、表を作り慣れている人にとって、ある程度の出来上がりのイメージが掴みやすい重宝するプロパティです。

便利な反面
表(テーブル)を作るためにはタグを数多く使用するので
HTML構文が複雑になり、表示や処理速度が遅くなるのではという懸念もあります。

<table>はCSSプロパティとして推奨されています。

基本的には、HTMLだけの使用を考えるより
CSSに定義して装飾することが望ましい流れになっています。

CSSに定義するには
HTMLの構造や理屈が理解できないと、HTMLの範囲、CSSの領域の判断がつきかねます。

<table>で段組みを作成するにも
<table>の機能がよく理解できていないと段を組むことも難しいです。

段組みを作成しながら
<table>の特性と、そのCSSの定義を確認します。

<table>の機能は下記の参照を。




【<table>段組使用】

【<table>の構造形】

<table>
 <tr>
    <th>●</th>
 </tr>
 <tr>
    <td>●</td>
 </tr>
</table>

⇒tableの親要素(表・目録)
⇒table row(tableの並び・列)
⇒table header(頭・タイトル)


⇒table data(データ)


の形式ですね。

文章の段を左と右に組むので、
<td>のデータセル(ボックス)は、左セル用と右セル用の2個作ります。

<td>の横へのセルの並びは
  <tr>
    <td> 文章@ </td><td> 文章A </td>
  </tr> 
<tr>タグの中に
<td>タグを2個、横に並べて記入する形ですね。

<th>〜</th>の
項目タグは「段組み」には必要のないタグですので削除します。


段組みを作成してみましょう。

■ 段組み作成

テーブルタグ記入

<table border="1px" cellspacing="12" cellpadding="0">
<col width="48%>
<col width="48%>
<tr>
<td> 文章@ </td>
<td valign="top"> 文章A </td>
</tr>
</table>

……………………

タグの説明

<table
border="1px" cellspacing="12" cellpadding="0">

<col width="48%">
<col width="48%">
<tr>
<td valign="top">
文章@
</td>
<td valign="top">
文章A
</td>
</tr>
</table>

⇒テーブルの設定(開始)
⇒罫線の太さ
⇒セルとセルの間隔
⇒セルと文章との間隔
⇒左のセル(ボックス)のサイズ
⇒右のセル(ボックス)のサイズ
⇒テーブル行の設定
⇒左データセル開始・topから表示
⇒文章表示
⇒左データセル閉じる
⇒右データセル開始・topから表示
⇒文章表示
⇒右データセル閉じる
⇒テーブル行の閉め
⇒テーブルの閉め

<table>で作成する、段組みの順序が分かりやすいように
最初は罫線を入れたテーブルを作り表示します。

<table>タグの種類は、下段にまとめていますので、タグを確認しながら
HTMLタグを記入をします。

●<table>の開始タグに

 <border>     ← 罫線の有無(px単位)
 <cellspacing>  ← セルとセルの間(スペース)
 <cellpadding>  ← セル内の文章の表示(セルの罫線からの空き)

必要な属性と属性値を指定します。

●<col width="48%>
は文章を表示するデータセル<td>の左右サイズです。
親要素の<table>で指定することによって、入り子になっている<td>に適応されます。

また、該当する<td>タグの中にセルの幅を直接書いてもかまいません。

  例 = <td width="48%>

<td>にセルの幅を記入したときには、親要素の<table>の
<col width="">の属性は必要の無いタグになりますので、削除します。

●<tr>は「table row」の意味ですね。テーブルの横の「行」の定義です。

「row」は「列」という英語ですが
ここでは「行の定義」ですので意味を取り違わないように。
(縦に<td>を配置するときは<tr>との組み合わせ方があります)

<tr>タグ
記入を忘れると、テーブルは完成しません。

<td>は「table data」の省略形。
データセルです。
文字や画像など、テーブル内に表示する要素を入れ込みます。

<td>属性に値を書き込むことによって、変化が付けられます。
属性と属性値には

 <background-color="・"> ← セル内のバックの色(下地) 
 <align="center"> ← データ(文章)の表示位置  
 <valign="top">  ← データ(文章)の表示を開始する位置

などがありますね。


<table>で実際に文章データを入力して段組みにします。
「文章」には利爺の書いた記事の一部を使用します。


テーブル作成の基本は、下記の
●【HTMLの形式】のような改行無しでの各タグの記入ですね。

「改行無し」の詳細については、上記リンクのページ参照。
  ■ テーブル作成とその応用(1)

【HTMLの形式】
<table border="1px" cellspacing="12" cellpadding="0"><col width="48%><col width="48%><tr><td>中国の「三国志」が好きな日本人は多い。
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ド</td><td valign="top">ラマである。
漢(後漢)帝国の末裔、劉備玄徳と、血を分けた兄弟にも類する諸葛亮孔明・関羽雲長・張飛翼徳らを中心としたストーリーの展開には、この利爺の年代でも心沸き立つものがある。</td></tr>></table>

   ↓
【表示1】
中国の「三国志」が好きな日本人は多い。
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ド
ラマである。
漢(後漢)帝国の末裔、劉備玄徳と、血を分けた兄弟にも類する諸葛亮孔明・関羽雲長・張飛翼徳らを中心としたストーリーの展開には、この利爺の年代でも心沸き立つものがある。


【表示1】はテーブルの作成ですので、罫線が表示されています。

@記事表示領域内におけるテーブルの位置と上下左右の各余白
Aテーブル内の各セルの余白の取り具合を確認して

問題が無ければ
<table border="1px" cellspacing="12" cellpadding="0">
  ↓
<table border="0px" cellspacing="12" cellpadding="0">

赤字の罫線の値を「border="0px"」にするか、削除して罫線を表示しないようにします。

【表示2】

「段組みの表示」
…………
中国の「三国志」が好きな日本人は多い。
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ド
ラマである。
漢(後漢)帝国の末裔、劉備玄徳と、血を分けた兄弟にも類する諸葛亮孔明・関羽雲長・張飛翼徳らを中心としたストーリーの展開には、この利爺の年代でも心沸き立つものがある。
…………

罫線を表示しない段階で
<table>で作る「文章の段組み」の完成です。



【注意すべき点】

【表示1、2】では、文章の送りに微妙な違いがありますね。

【表示1】では<table border="1px">の罫線(1px)が表示されているため、
個々のデータセル内の文章領域から、左右の罫線の太さの「計:2px」のスペースを使っているためです。

わずか「2px」でも、表示に影響がでますので
罫線無しの表示を確認して、文章の切れ目を調整することが望ましいです。

下記の【表示3】【表示4】も同じ理屈です。

<float>で作る段組みより、<table>で作る方が割と簡単に出来ますね。


■ 文章の段組を罫線で囲ってみる。

参考記事や引用記事、あるいは記事を文章を罫で囲んで強調するときがありますね。
罫囲みのタグの組み合わせは
今回の段組を作った<table>要素全体を<div style="margin:>〜</div>で括ることで楽に作成出来ます。

<margin>で指定する外罫(破線)は、<table>の表の外側の罫と同じ位置に引きます。

<table>の表の外側の罫と同じ位置の<margin>指定は
<div style="margin:0px 12px 0px 0px; border:1px dotted;border-color:blue;">
または
<div style="margin-right:12px; border:border:1px dotted;border-color:blue;">

として、破線の色は「青」にしています。

【HTML】
<div style="margin:0px 12px 0px 0px; border:1px dotted;border-color:blue;"> 【 table 要素 】
</div>

<table>要素を外罫の表示のための<margin>で括ります。
   ↓
【表示3】
中国の「三国志」が好きな日本人は多い。
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ド
ラマである。
漢(後漢)帝国の末裔、劉備玄徳と、血を分けた兄弟にも類する諸葛亮孔明・関羽雲長・張飛翼徳らを中心としたストーリーの展開には、この利爺の年代でも心沸き立つものがある。


<table>の外罫と<margin>の罫が重なって表示されていますが
破線の色が青のため確認しにくいです。

テーブル内の余白も全て、思い通りの空きになっています。

<table border="1px" cellspacing="12" cellpadding="0>
の「 border="1px"
を削除して、罫線無しにします。
   ↓
【表示4】
中国の「三国志」が好きな日本人は多い。
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ド
ラマである。
漢(後漢)帝国の末裔、劉備玄徳と、血を分けた兄弟にも類する諸葛亮孔明・関羽雲長・張飛翼徳らを中心としたストーリーの展開には、この利爺の年代でも心沸き立つものがある。


囲み罫の中に、段組みの文章が表示されました。

この例では、ブログの記事表示域内に表示されるように
<col width="48%>
「%」を使い、相対サイズで設定しています。

CSSで定義しているブログの記事域はほとんど「px」の単位で設定しています。

「px」のような絶対サイズで指定する時には、表示域のサイズを超えないように気を付けましょう。

<table>では、各セルのサイズが決まっているため
表示領域内にスムーズに表示できるので「カラム落ち」の心配があまり有りませんね。

    注
   ●カラムとは(column) 縦の列を言い
   ホームページやブログレイアウトのフレームで構成する列数のこと。
   1カラムは1列、2カラムは2列、3カラムは3列の構成となる。

………

以上の形が<table>を使った「段組み」の方法です。
罫線を表示しないことによって、前回確認した<float>の段組みと同じような形になりましたね。

段組みの方法を応用することで
文章と画像、画像の組み合わせなど、適切なレイアウトができます。

ブログの「アフィリエイト」の商品紹介でも、<table>機能を使って、
商品と画像をうまく組み合わせて、訪問した方の目をひいています。

<table>は、いろいろな形に応用ができ、便利な機能を持っていますが
あくまでも表作成が目的だと言う流れです。

段組みに<table>を使うことは、流れに背くようですが

個人的には
代替できるHTMLタグは、タグの使い方を間違えなければ、大いに使っていいと思っています。

……

■ 段組み用のテーブルをCSSに定義する

段組み用のクラス(セレクタ)を
「.dangumi table」  と名前を仮に付けます。
クラス名の最初の「 . 」は必ず付けます。

段組み用テーブル:CSS

.dangumi table{
text-align:left;
vertical-align: top;
cellspacing:12px;
cellpadding:0px;
}

.dangumi td {
text-align:left;
vertical-align: top;
}

⇒classの呼び出し
⇒文章の開始位置(左揃え)
⇒文章の表記位置(上から)
⇒セルとセルの間隔
⇒罫線と文章の余白
⇒セレクタ閉め

⇒データセルの呼び出し
⇒文章の開始位置(左揃え)
⇒文章の表記位置(上から)
⇒セレクタ閉め

CSSには
セレクタ(クラス)名に属性(プロパティ)と属性値(値)を記入します。

文字の
●文字の大きさ    
●文字の種類   
●行の高さ(行送り)

⇒ font-size:12px;
⇒ font-weight:bolder;(normal)
⇒ line-height:1.5em;

などは定義しなくてもいいですね。
CSSのセレクタ「body」や「text」で定義しているので、
定義が無ければ形式が継承され適用されます。

段組み内の
表示書体の形状を変えたい時は、上記の要領でCSSに定義しておきます。

今回は
文章を段組みで表示するためのテーブル機能を使用しますので

段組みの表示には、テーブルの罫やセルの罫などの細かい定義は必要ないですが

このクラスを使って統計表などのテーブルを作るだろう
ことを考えてCSSには定義しておきます。


●罫の太さ  
●罫の種類  
●罫の色

⇒ border:1px;
⇒ border-style: solid;
⇒ border-color:#000000;

は統計表などを作る時は必要な要素ですので定義しておきまます。

セルの
●バックの色
 
⇒ bgcolor:#000000;

も必要ないですが、
段組みの強調のために使うことも有りますね。

段組み用HTMLタグの記入

<div class="dangumi table">
<table>
<col width="48%>
<col width="48%>

<tr>
<td>文章@</td>
<td>文章A</td>
</tr>
</table>
</div>

HTMLタグに記入している
●<col width="48%>のセルのサイズは
CSSに定義せずに、

HTMLタグの直接記入で使いましょう。

CSSにサイズを指定しておくと
他のテーブル作成に使う時にも
定義されたセルのサイズで表示されてしまい、応用が難しくなります。

【表示A】
中国の「三国志」が好きな日本人は多い。
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ドラマである。
漢(後漢)帝国の末裔、劉備玄徳と、血を分けた兄弟にも類する諸葛亮孔明・関羽雲長・張飛翼徳らを中心としたストーリーの展開には、この利爺の年代でも心沸き立つものがある。


文章を罫で囲む時は
<div style="margin:0px 12px 0px 0px; padding:12px;border:1px dotted;border-color:blue;">【入れ子】</div>

のタグに
<div class="dangumi table">〜</div>を入れ子にします。
   ↓

【表示B】
中国の「三国志」が好きな日本人は多い。
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公
開された根強い人気の歴史ドラ
マである。
漢(後漢)帝国の末裔、劉備玄徳と、血を分けた兄弟にも類する諸葛亮孔明・関羽雲長・張飛翼徳らを中心としたストーリーの展開には、この利爺の年代でも心沸き立つものがある。


以上がCSSを使った「段組み」になります。

テーブルを使った、文章の段組みでは
各セルに文章を行数などを考え、バランスよく入れる
と言う作業があります。

各セルが独立していますので、AセルはAセルに流し込まれた文章を、
BセルはBセル用の文章を表記するようになっています。

ブログでは「組版」をそれほど重要視していませんので、

例えば、
新聞や印刷・出版で人気のある「組版ソフト」の「クォーク・エクスプレス」(QuarkXPress)のように、セルとセルを連結(リンク)しておけば、一連の長い文章を流し込むと、Aセルで溢れる文章は、自動的にBセルに流れていく仕組みがありません。

その仕組みであれば、文章を気にすることなく、左右にセルを配置して、文章を流し込むという簡便な作業で済みますが、HTMLのテーブルでは無理なようです。

    注
   ●IE7やFirefox、Opera、Safariなどでサポートされる
    CSS3の「Multi Column」の機能では可能と言う情報が
    ありますが、未確認です。  

いづれ、ウエブで使うHTMLも、組版の考え方を取り入れる時代が
来るでしょうが、
 
今は
あるがままの機能を応用して十分に使い切りましょう。



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

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



×

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