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




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


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

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

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


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

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
……人気ブログランキング……



2010年06月18日

文章の段組み(1):float

■ 5-24 floatによる段組み

ブログの1カラムや2カラムのように、記事表示領域が大きいフレームで、ページ幅一杯を使って、文章を表示することは、一行に入る文字数が多すぎて、読み難くなることがありますね。

記事が「読み難い」と言うことは、訪問した方に読んでもらえないということも考えられます。

ブログは、内容は勿論のことレイアウトや文章の組み方も重要です。

「記事を読みやすく」する

考え方には

●内容を区切り「グループ化」する。
●「段落」や「箇条書き」を活用して視覚的に表現する。

などが有りますね。

また
●表示域の横幅を区分けして文章を短く改行する「段組み」もよく使われています。

段組みには
上下の段落、左右の段落がありますが、
ブログのような横書き(表示)では、左右の段組みのことを指します。

左右の段組みには、
読者の視線の移動を少なくして、長い文章を読みやすくすることと、読みやすいイメージを与える効果があります。

【段組みの方法】

この利爺のブログは、3カラムの列(フレーム)構成になっています。
中央の記事表示域が、左右400pxの幅です。

幅が400pxくらいの領域でしたら、記事をベタで表示しても、一行がそれほど長いとは思われませんので、本来は段を組む必要はないです。

HTMLの<float>を段組に使う方法を確認していきますので
1カラムまたは2カラム構成のブログを作成している方は参考にしてください。

【例1】
■ 文章のベタ入力・表示


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


記事表示域一杯の領域に、文章をベタ入力した例です。
ブログ表示領域一杯使って、文章を表示しているブログをよく見ますね。

左右のギリギリまで文章を表示していると、読み難い感じがしますので、「例1」を文章を読みやすくする方法のひとつの「段組」で組み直して見ましょう。


段組みの方法には

●CSSプロパティの<float>を使う方法と
●<table>タグを使う方法があります。




………

■ <float>での段組み

  float(フロート:浮動)=(浮く、漂う)は、浮動を行うプロパティ。

文章や画像、ボックスなどの要素を、左または右に配置(浮動)して、次の要素は値の指定した位置から配置します。いわゆる「回り込み」です。

<float>
<div style="float:left;width:●%;">

@left
Aright
Bnone
=要素の左揃え、続く内容は右に回り込み。
=要素の右揃え、続く内容は左に回り込み。
=回り込みしない(初期値)。

の「値」を取ります。

さらに<width:20%;>width属性と属性値で<float>の範囲を決めます。(下記)


【例2】
■ 段組みでの表示


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



段組みでの表示は、文章に「まとまり」を作ります。

行の文字数が少なく読者の目線の移動を小さくして
文章を読みやすくする効果とそのイメージを与える特徴があります。

表示域のサイズが大きくなるに従って、段組みにする方が読みやすくなります。


【例2】の段組みのHTMLは

<div style="float:left;width:●%;">=左揃えですので
● 左への浮動(文章@)
</div>
● 右への回り込み(文章A)
<br clear="all">

のHTML要素の形式を使います。

1) 左に浮動する(HTML)
  <float:left;width:●%;>
   <float:left;>  = 左側に浮動(float)する。
   <width:●%;>  = 浮動域の幅の指定。

   ※ 左ヘリから●%の位置(幅)までが浮動域です。
   ※ 記事表示領域の左右サイズの内、何%を<float>の領域にする
     かを決めます。

  ● 浮動域のサイズは <px・pt> などの絶対サイズ
    <em・%> などの相対サイズでの指定でもかまいません。
    
  ● サンプル例では「%」を使用しています。

2) <float>が作用はする文章は </div> で閉めた位置までですので
   左に入れる「文章@」の終わりを</div>で閉めます。
   (<float>を閉める意味です)
 
3) 右の段組みに回り込む「文章A」は通常の文章の流れですので
   そのまま記入します。

4) 最後に「文章A」の文末に「回り込みの解除」タグ
   <br clear="all">
  を挿入します。

5) 回り込みを解除しないと、段組みに関係ない別の文章も、回り込むことがあります。
   ※回り込みを解除するタグは

   ●<br clear="left">     ●<br clear="right">
   ●<br clear="both">   ●<br clear="all">

   の形式があります。


【例3】
■ <float>での文章段組を確認。


HTMLに文章を書き込み、<float>で段組みにする。


【HTMLの形式】
<div style="float:left;width:48%;">中国の「三国志」が好きな日本人は多い。
三国志は歴史を背景とした「歴史小説」ではあるが今でも圧倒
</div>的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ドラマである。<br clear="all"></div>

「文章@」= 中国の 〜 圧倒 
「文章A」= 的な人  〜 ドラマである。の段組みの形式です。

 ↓
【例3の表示】

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



HTMLに文章を書き込み、<float>で段組みにしたのが
【例3の表示】です。

<float>の機能で文章は左と右に段組みしましたが、
左の「文章@」の行末と、右の「文章A」の行頭が接触して空き(段間)の無いまま表示されています。

<float>は対象とする要素を浮動しますが、回り込んだ要素に対してスペースを作りませんので、例のように回り込んだ文章の行頭がくっつく現象になります。


【例3の修正】
■ 浮動した段落と回り込み段落の間に余白を設定。

●余白を取るタグ<margin>で両段落の間に余白を取ります。

●<margin>の基点は、浮動した「float:left;width:46%;」の位置、
 つまり文章@の行末からです。

●<margin-right:●px;>
 基点から右の段落の行頭までの余白のサイズの指定です。
 (段間と言いますね)

  ※ 段間は使用文字の大きさの1〜2倍の大きさが理想的です。
  ※ このブログの文字サイズは「12px」での使用ですので、
    等倍の12pxの余白を設定します。<margin-right:12px;"

  ↓

【例3の修正後表示】
<margin属性を追加>


【修正HTML】
<div style="float:left;width:46%;margin-right:12px;"> 文章@ </div> 文章A <br clear="all"></div>

<width:46% ; ">の後ろの「 ; 」と「 " 」の間に
右側に1文字分の余白を空ける、<margin-right:12px ; >タグを追加記入します。
「 ; 」の記入忘れがないようにしましょう。

  ↓ 
【表示】

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



文章@とAの間に余白が取られていますね。

雑誌や新聞の「段間」と同じ表示になっていて、文章の段落が明確に分かります。
出版業界では、文章と文章(画像と文章)がくっ付いて表示されることはタブーになっています。

使い方に慣れて、読者に読みやすい表示に勤めましょう。

………

<float>での画像と文章の段組み

過去記事で<margin>と<padding>を使って
「画像と文章の組み合わせ」を確認しましたね。

参照 
画像と文章の組み合わせ
●5-12 画像と文章を組み合わせる =「例6」
http://tosiji-dreamafi.seesaa.net/article/136498096.html



【例4】
■ 画像の右に文章の回り込み(padding)の使用



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


【HTMLの形式】
<div style="float:left;width:88px;padding:0px 12px 60px 12px;"><img src=" 画像url " alt="" width="88" height="31" border="0" /></div>中国の「三国志」が好きな日本人は多い。
三国志は歴史を背景とした「歴史小説」ではあるが今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された、根強い人気の歴史ドラマである。<br clear="all">


この例は過去記事の
「画像と文章を組み合わせる」(例6)の確認のとき、タグの使用方法が異なるので、確認をしていなかった事例です。

【例4】のように
画像の使用範囲を過ぎても、回り込んだ文章を画像の下段に戻さずに、指定された位置に行頭を揃えて(頭揃い)表示する方法です。

<float>を使用して、左の画像を浮動させ、右に文章を回り込み表示しています。


【HTMLの要点】

<float>は
<div style="float:left;width:88px; padding: 0px 12px 60px 12px;">
の形式で使用しています。

● <float:left;>で左に浮動して画像を表示する段落の横サイズは
  使用する画像の横と同じ「88px;」サイズにしています。
 
● 画像サイズは「width="88px" height="31px"」の大きさです。
  余白を作る<padding>属性で、画像から左右に1文字分(12px)の
  余白を設定してす。

● 文書の段組で使用した<margin>は使用していません。

● 画像の下段に<float>領域サイズを外れた文章が戻って表示されない
  ように
  ※ <padding>の下方向のサイズを
    行の高さから計算して「60px」の余白部分を設定しています。


  ※ 画像の上下サイズと下に取った余白部分も浮動領域に入りますので
    文章は領域内には表示されません。

【注意すべき点】

● 記事表示領域の横サイズに注意する。
  ※ 画像の横サイズ
  ※ <padding(margin)>で取った左右の余白サイズ
  ※ 文章ブロックのサイズ
  ▲ 横サイズの合計が、ブログの記事の表示領域の大きさを
    超えないようする。

● 横サイズの合計が表示領域のサイズより大きいと
 ブログのサイドが記事の下方に追い出されます。(カラム落ち)

● ブログの表示サイズは、CSSに定義されています。
  確認しておきましょう。

CSSで記事表示域のサイズを、仮に左右「800px」として定義していても、そのサイズ内に飾り罫を引いたり、余白を設けていますので、実質100%の領域は使えません。

この点にも注意しましょう。

このブログの例でみると
3カラム設定で、記事領域は「400px」になっていますが、使用できる左右サイズは「362px」くらいです。

絶対サイズを使うときには
以上の件にも気を付けて「float(浮動)プロパティ」を使いましょう。

<float>は回り込みの特性を生かし「文章と文章」「画像と文章」
「画像同士」の段組の作成にも応用ができます。

使い方をいろいろ試してみましょう。

<float>はCSSプロパティですので、CSSに定義して使う方が簡便で使い方の多様性に富みます。

CSSのシリーズの段階で形式を確認します。




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

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



2010年06月11日

marginとpadding・応用(3)

■ 5-23 文字や文章の表示位置


一般的には文字の表示(開始)位置は

<left>利爺です</left>
<div align="right">利爺です</div>
<div style="text-align:center;">利爺です</div>

などのタグの属性・属性値の形式を取りますね。

参照 


表示位置の指定が
■「left」
■「right」
■「center」
とシンプルになっていますが、大雑把なタグだと思うことが多いですね。

T <margin><padding>を使った文章の表示位置の指定

<margin>や<padding>は本来は、CSS定義のプロパティです。
そのプロパティを使用して、直接に記事入力をして見ましょう。

ブログ内の自由な位置
思い通りの箇所から、文字・文章や画像の表示させる使い方を確認します。

【タグの使用例】

@「絶対サイズ」での指定
<div style="margin-left:36px;">文章</div> ←(pxを使用)

A「相対サイズ」での指定
<div style="padding-left:3em;">文章</div> ←(倍数を使用)

表示の開始位置は「絶対サイズ」「相対サイズ」のどの指定方法でも構いません。
「相対サイズ」の倍率は、CSS定義の「フォント」のサイズを基準としています。

【<margin>での表示位置指定の例】

文章(記事)の表示領域の左端から2字(24px)余白を取ります。
<div style="margin-left:24px;">文章</div>
  ↓
【表示例】

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


【<padding>での表示位置指定の例】

同じように、左端から2字(24px)余白を取ります。
<div style="padding-left:24px;">文章</div>
   ↓
【表示例】

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


上記の2例は全く同じ表示に見えます。

<margin><padding>も
同じように余白を取るタグですが、その取り方が異なりますね。

余白の取り方は
前回の記事でも取り上げていますので、まだうまく掴んでない方は、もう一度確認しましょう。

余白の取り方は必ず覚えて下さい。

両タグの余白の取り方の組み合わせで、

■文章を罫で囲む。
■囲み罫の中で段組を組む。
■箇条書きのように表示する。(箇条書きタグは別に有ります)
■文章、見出しや中見出しを強調する。
■記事の全体、一部のバックに色をのせる。

など、多様な応用ができます。


【上下左右を指定してみる】

<div style="margin:12px 24px 12px 24px;">文章</div>
または
<div style="padding:12px 24px 12px 24px;">文章</div>
   ↓
【表示例】

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

上下左右の余白
文頭は2字分空き、文末も2字、上下には各々1字分の空きを設定しました。

文章が左右の表示領域から中央寄りに纏まりましたね。


<margin><padding>の利点は

●思うどおりの位置、自由な位置から文字や文章の表示が可能。
●細かい単位での位置指定ができる。
●余白の大きさが明確なので、半角や全角を入り乱れて使っていても
 文や行の頭を揃える。
●行が変わっても、各行頭は指定された位置から表示する。
●文中に改行<br>タグを使用することで、囲み罫のような文の纏まり
 (段落)にすることも可能。

などと結構いろいろな表示に応用できることで、ブログのレイアウトや文字入力での自由度が高いです。

読みやすくするため、文章には改行が必要ですね。
改行の無い文章はいくら素晴らしい内容であっても、読みにくく疲れを感じます。

同じように、余白も必要です。
どの部分、どの範囲が重要な箇所なのかを余白でもって示している書き方は、分かり易い文章と言えます。

■余白が多いものはスッキリとした上品なイメージ。
■余白の少ないものは、情報量の多いビジネスライク。
とよく言われていますが

■ページのメリハリにも役立ち、訪問した方の目を引きとめる役割。
■テキストや段落の間に、余白があると読みやすい。
■グループ化していることも伝えることができる。
などの効果を発揮します。

余白の使い方はブログの視認性にとっても重要ですね。
その重要な余白を設定していくHTMLが<margin><padding>の要素です。

いくら余白が重要だとしても
ページ全体のレイアウトを崩すような取り方は、逆にイメージを下げることになりますので、バランスを常に考えているべきです。


【indentでの頭下げ】

<margin><padding>と似た性質のタグに<indent>が有ります。
<indent> = (indentation)は主にCSS対応で、1行目の字下げを設定するタグになります。

【使用例】

<div style="text-indent:24px;">●</indent>
 (文頭を2字下げにしています)
  ↓  
【表示例】

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


文頭は2字下げましたが、
2行目以降は元の位置からの表示になっていますね。

この形式が<indent>です。

このインデントを設定しておけば、記事の入力で一つの段落が終わり改行すると、
次の段落の最初の行の字下げを気にすることなくベタ入力しても、字下げで表示されます。

●日本語入力ソフトでのインデントと同じ役目ですね。
●キーボードの「tab」とは性質が異なります。
 (「tab」はむしろmarginやpaddingと同じ性質です)

※文章には段落の字下げの原則がありますが、
ブログのように箇条書きに近い表記方法でしたら、無理に下げることも無いでしょう。


<margin><padding>は、使い方さえ分かればわりと融通のきくタグです。

ブログを更新しているうちに使う機会も増えてきますので、活用すべきです。


………

U CSSに簡単なテーブル表を作成

CSSに簡単なテーブルのセレクタを定義して
<margin><padding>で余白を決め、随時使用する表を作成して見ましょう。

このブログでもよく使っていますが

ポイントとなる文章の一部を
囲み罫の中や表の中に表示して強調したり
バックに色のせをしてビジュアル化する方法をとっています。

その囲み罫や表を作成するため
タグを毎回入力して仕上げることは時間もかかりますし、重要なタグを書き忘れてエラーになったりすることもあります。

比較的に多く使用する囲み罫や表は

そのフォーム、
書体の形状・大きさ、罫の太さや色、余白のサイズなどを

まとめてCSSに定義しておけば
新しく囲み罫や表を作るたびに、タグを書き込まなくて済むようになりますね。

必要に応じて呼び出して使う
のが便利で効率的なCSSの使い方の特徴でもあります。

決められたフォームを使うことで
ブログのページに統一性をもたすことにもなり、デザイン的にも安定したブログを作り上げることが出来ます。


■ 表(専用テーブル)を作るクラスをCSSに定義する。

table全体のセレクタ(クラス名)を「.texttable」
データ表示のボックスを「.texttable td」します。


CSS

.texttable {
font-size:12px;
line-height:1.5em;
font-weight:normal;
margin:0px 12px 0px 12px;
}

.texttable td {
text-align:left;
padding:12px;
border:1px solid;
background-color:#f0f8ff;
}




⇒クラス名
⇒文字のサイズ
⇒行の高さ
⇒文字の太さ
⇒表示領域からの余白
⇒クラス閉め

⇒tdのクラス名
⇒記事の表示位置
⇒記事からの箱の余白
⇒罫線の種類
⇒バックの色
⇒tdクラス閉め


CSS「class」対応のセレクタを定義しました。
このCSSには囲み罫用の表の作成用として、

「table」
「td」

二つのセレクタしか記入してないですね。

簡単な表を作るための設定ですから
「th」(見出し)のような必要のないセレクタは省略しています。

上記のCSSには

●使用する書体の形状・大きさ・行送り
●表示領域内へのテーブルの表示位置 (marginの余白)
●テーブル内の文章と箱の各ヘリの余白 (paddingの空き)
●使用する罫線、罫線の太さ、色
●テーブル内のバックの色

を定義していますので、使用するときは
<td>と</td>
の間に、文章を挟みこむだけ

【記入例】

【HTML】

<div class="texttable">
 <table>
  <tr>
   <td>文章</td>
  </tr>
 </table>
</div>

…………

【実際のHTMLの表記】

<div class="texttable"><table><tr><td>文章</td></tr></table></div>

   注)テーブルを作るときに必要な<tr>は忘れないように。


のシンプルなタグの記入です。

ここで注意すべきことは、
例の下段(実際のHTMLの表記)ようにタグを改行無しで記入することです。

改行無しにする理由は下記を参照しましょう。



tableと<margin><padding>で作成した囲み罫に、サンプルの文章を挿入して表示してみます。

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


この罫囲みの表は
挿入する文章が長くなれば、自動的に上下幅を広げて表示します。

CSSに定義しているセレクタは
いつでも、どこににでも使えますので、統一した形の表示には非常に便利です。

タグ類は何度使っても忘れるものですが、
HTMLでCSSに適用してクラスを呼び出せば、新たにタグを書く手間が省けますね。

見栄えを管理しているCSSには得意とする分野です。

次回は「段組」について確認します。



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

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



2010年06月08日

marginとpadding・応用(2)

■ 5-22 余白の考え方


■ <padding>を理解しよう。

<margin>は外側から余白を取るのに対して
<padding>は内側に余白を取るプロパティですね。

余白の基点は<margin>とは逆に文字・文章・画像などの領域からになります。

<margin>と<padding>の余白の取り方の例を再度、確認して見ましょう。

前回の記事で確認した
<div style="margin(padding) :●px ●px ●px ●px;">
のタグの記入順を覚えていますね。

左の●pxから上・右・下・左の時計回り順の属性値ですね。


【例1】<margin>の余白の取り方。

<margin>の余白の取り方の確認のため、文字の領域部分を青色の破線で囲みます。

<div style="margin: 0px 0px 0px 24px;border:1px dotted;border-color:blue;">記事の位置</div>
  ↓

記事の位置


青破線で囲んだ部分が、記事の表示領域になります。
その左側には、領域に含まない余白が有りますが、<margin>によって左のヘリから取られた余白部分(24px)ですので、記事が表示されることの無いエリアです。


【例2】:<padding>の余白の取り方。

<padding>の余白の取り方の確認のため、文字の領域部分を赤色の破線で囲みます。

<div style="padding: 0px 0px 0px 24px;border:1px dotted;border-color:blue;">記事の位置<div>
  ↓

記事の位置


赤破線で囲んだ部分が、記事の表示領域になります。
ブログの表示域の左のヘリから、赤破線で囲んだ領域の間には余白は無いですね。
赤破線内の文頭(記事の位置)に有る余白は<padding>によって、左のヘリに向かって取られた余白部分(24px)です。

例【1】【2】から分かるように、余白の取り方では

●<margin> は要素(文字:記事の位置)の外側。
●<paddinng> では要素(文字:記事の位置)と同じ領域内。

青や赤の破線を表示しなければ
文(記事の位置)は同じ位置に表示されますので、同じ余白のように見えますが
その取り方は異なります。

<margin>と<paddinng>の余白の取り方は確認できましたね。


【例3】:<margin>と<padding>の組み合わせ

【タグの例】
<div style="margin: 36px 0px 36px 0px;border:1px dotted;border-color:blue;"><div style="padding: 0px 0px 0px 12px;border:1px dotted;border-color:red;">

タグでは
<margin> の上と下の余白は、使用書体の2行分、破線の色は「青」
<padding> は左(文頭)に1文字分の余白(12px)を、線は「赤」に指定しています。

下記の表示を確認しましょう。
  ↓

<margin >の余白のとり方を確認するため、基点を「罫線囲み」で仮に表示します。

   注)ブログの記事中での上下の<margin>の基点は、直前の行からのサイズになります。
     このブログでは行の高さ(送り)は「18px」での定義ですので、2行は36pxです。


罫の中の文頭を24px(2文字分)空ける


<margin>での上下に2行(36px)分の余白と<padding>での左(文頭)の2文字(24px)分の空きが表示されましたね。

色の異なる罫は、重なって表示されています。
<margin>も<padding>も、対象が同じ要素(ここでは文章)であれば、同じ位置に罫をとります。

文字の表示位置は、<padding>が要素から外に向かって余白を取る性質のため、対象として向かうヘリは
<margin>が取った余白の部分の右のヘリになりますので、文字位置は

●<margin>の余白 + <padding>の余白の位置になります。
  
「領域の確認」
<div style="margin: ・・・・;"><div style="padding: ・・・・;">

と行に連続で記入する形と

<div style="margin: ・・・・;">
<div style="padding: ・・・・;">

のように別行で記入にすると、罫の囲みの範囲が変わります。

<div style="・">の
<div>要素はブロック要素として「見出し、段落など」を、ひとつのまとまった塊(単位)として見る要素で、 前後に改行が自動的に入って表示されます。

自動的に改行された、その行も範囲に含まれますので、罫線を引く位置が異なってきます。
<span>要素のようなインライン要素(改行を持たない)とは性質が異なります。

確認してみて下さい。

上記タグの表記では
<div style="〜;"><div style="〜;">と
<div style=>の<style>定義を2度使いましたが、同じ<style>指定なので、

<div style="margin: 〜;padding: 〜;border:1px solid;color:blue;">●</div>

のように、ひとつに纏める形式を覚えておきましょう。


以上の例を踏まえて「テンプレート風」の見出しを作ってみましょう。

【テンプレート風の見出し】

下の図は<margin>と<padding>で指定して
画像を使ったテンプレートの形をした、見出しを作ってみました。

【図】

最近の更新記事一覧

  ↓

タグの配置は

div style="margin:0px 24px 0px 24px; padding: 6px 0px 6px 0px;background-color:#e6e6fa; "><center>最近の更新記事一覧</center></div>


<margin>の位置

top(上から)
right(右から)
bottom(下から)
left(左から)

⇒ 0px
⇒ 24px
⇒ 0px
⇒ 24px

赤文字の
div style="margin:0px 24px 0px 24px; 
は<margin>の指定ですね。

例では「0px」の余白となっていますので、
このHTMLタグを入力した位置からの余白ですね。

つまり、
余白を空けないで、行送りとおりの位置からの表示です。

右と左の余白は仮想領域は設定されていませんので、
ブログの表示領域(本領域)からの余白で、各々「24px」の空きを指定しています。

青文字で表記したのが<padding>
padding: 6px 0px 6px 0px;

文字領域を上へ「6px」、下にも「6px」広げています。

<padding>の位置は

top(上へ)
right(右へ)
bottom(下に)
left(に)

⇒ 6px
⇒ 0px
⇒ 6px
⇒ 0px


タイトルの「最近の更新記事一覧」を中央の位置に表示します。

<center>最近の更新記事一覧</center>

とタグ<center>●</center>でくくります。

<padding>で右と左の余白を「0px」にしているのは

タイトルの「最近の更新記事一覧」の表示を真ん中にするために、中央を指定するタグ<center>を使っているので、

<padding>で指定してしまうと、二重に指定することになります。

エラーにはならないのですが<padding>の指定は余白無しにしています。


タイトルを左から表示したいときは、<center>タグは使わず

<div style="margin : 0px 24px 0px 24px ;padding : 0px 0px 0px ●px ; background-color:#cccccc ; ">最近の更新記事一覧</div>

<padding>の左余白の箇所(青●印)に空けたい値(単位)を設定します。

値で指定された余白を空け、左側からの表示になります。

このように<padding>で余白を設定し、表示サイズを変えることによって、ボックス型にもなります。
バックに色を使うことも可能ですし、囲み罫で強調したりすることができます。
利便性のあるタグですので、大いに活用しましょう。




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

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

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
……人気ブログランキング……



×

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