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




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


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

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

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


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

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

この記事へのコメント
ハイサイ利爺さん
お元気で良かったです。
ブログもこの所さぼりぎみでした。
書きたい事があるときに
いそがしくて書きそびれてしまってます。
またちょくちょく勉強にきます。
応援はもちろんしときました。
Posted by octagon at 2010年06月10日 12:49
本当に、お久しぶりです。
利 爺さん、お元気でしたか???

今夜は、お友達の、居酒屋ちゅらさんに、約1年ぶりに遊びに行ってきます。

姑たちが一緒なので、夜の外出あまりしないので・・・。

また、遊びに来てくださいね。

マミー。

Posted by マミー at 2010年06月11日 11:50
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

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


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

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

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