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



この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

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