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




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


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

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

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


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

2010年08月02日

箇条書きの基本(3)

■ 5-28 マーカーの表示位置を指定

個条書き項目の表示位置は、
自動的にデフォルト値で表示されますね。

文章を読みやすく・見やすい位置に項目(リスト)を揃え
余白とのバランスを取る方法が
以前、確認した<marginとpadding>の余白を取るタグの活用です。



【表示1】
箇条書きのデフォルト値

<ol>
 <li>沖縄県の人口
  <ul>
   <li>那覇市
  </ul>
</ol>

@ABCDEF
  1. 沖縄県の人口
    • 那覇市

デフォルト値での表示位置です。

●破線(ドット線)で囲まれている領域を、ブログ記事の仮の領域に見たてています。

●マーカーとの箇条書きの位置が分かりやすいように

 「親項目」(沖縄県の人口)の領域には薄いピンク色
 「入り子の項目:子項目」(那覇市)には薄いブルーを

バックに使います。

●@ABCDEFのの数字は
左からの位置を確認するため、メジャー・目印として表示しています。

    注
   ●このブログの文字の大きさは「12px」を使用していますので、
    @やAの文字の横サイズは「12px」です。

●<margin-left="0">の位置は
記事を表示する領域を囲んだ破線の左端と、数字の@が触れる位置になります。

デフォルト値の箇条書き項目のマーカーの表示位置は

親項目「沖縄県の人口」では、左端から1文字分(12px)の位置、
子項目「那覇市」では3文字(36px)を取った位置です。

この例のように
項目の領域部分にはバック色が表示されていますが
マーカーにはバック色が塗られていません。

このことは

「箇条書き項目」と頭の「マーカー」は別個に表示される

ことを意味しています。

別々に表示されるから
●マーカーの種類の変更、●連番の形式を変える
ことが可能なのです。

「入り子」の要素も同じ性質です。

実際のブログの記事領域での箇条書き、デフォルト値の表示を確認します。

@ABCDEF
  1. 沖縄県の人口
    • 那覇市

ブログの記事の表示領域に、デフォルト値で表示した形がこの表示です。

【箇条書きの特徴】
(1)余白の大きさは、使用文字の大きさに準拠します。
(2)マーカーと項目は別々の表示になります。
(3)マーカーの位置と項目の間には、1字分の余白が作られます。
(4)余白部分は
   ●表示領域の左端から「項目の頭」までのサイズ。
   ●マーカーは項目が左側に取った余白の中
    表示される。

     ⇒ 【表示1】を参照。



    注
   ●マーカーのサイズ
   <ol>の順序あり箇条書きでは「1.」のように数字の後ろに
   「.」半角のコンマが付きますので、実際には1.5倍くらいの
   (18pxくらい)の余白です。 
   ●半角ほどの誤差はあまり気にする必要はないでしょう。

   ●<ul>順序なし箇条書きでは「●」(全角1字分)の大きさです。


以上の要約が <margin>や<padding> を使用して、
箇条書きの表示位置を調整する時の考え方の基本になります。


■ <margin>での余白設定。

<margin>は外側から内に対する余白。

ブログ表示領域の各々の端から、
項目や段落を表示する領域の位置を指定するタグになります。

「margin」の基本形

margin:0px 0px 0px 0px
margin-top:0px
margin-bottom:0px
margin-left:0px
margin-right:0px
margin:0px

⇒上下左右の余白
⇒上の余白
⇒下の余白
⇒左の余白
⇒右の余白
⇒四縁が同じサイズ

<padding>も同じ形式です。

<margin>で箇条書き項目の表示位置を設定してみます。

【表示2】
●margin-left:0px;padding-left:0px; の例

<ol style="margin-left:0px;padding-left:0px;">
 <li>沖縄県の人口
  <ul>
   <li>那覇市
  </ul>
</ol>

@ABCD
  1. 沖縄県の人口
    • 那覇市

<nargin>と<padding>の各ヘリからの余白(属性値)を「0」にしました。

項目の表示は、指定された「0」の位置からになります。

前述の要約(4)で分かるように
項目の前に余白がないためマーカーが領域外に表示されています。

このような領域外への表示は
サイドのカラムが下段に追われる「カラム落ち」の原因となり、表示エラーになりますので注意が必要です。

●表示結果からみても<margin>で指定する余白は、
マーカーに対してではなく、項目を表示する位置であると分かりますね。

表示領域の左端ギリギリにマーカーを表示するには

表示領域の左端から

 ●マーカーのサイズ(使用文字の大きさ)
  +(プラス)
 ●項目までの空き

の余白が必要ですね。

言い方を変えれば

●項目の前にマーカーを表示するだけの余白が必要。
と言うことです。

最小限の余白サイズは

 @ マーカーの大きさ(このブログでは12px) = 12px
 A マーカーと項目の間の余白        = 12px
 の計「24px」が必要と言うことですね。

<margin:0px 0px 0px 24px;>で
左端に「24px」の余白を取り項目を表示すれば、領域の左端ギリギリの位置にマーカーが表示されます。

下記の「表示3」がその例です。

【表示3】
●margin-left:24px;padding-left:0px; の例

<ol style="margin-left:24px;padding-left:0px;">
 <li>沖縄県の人口
  <ul>
   <li>那覇市
  </ul>
</ol>

@ABCD
  1. 沖縄県の人口
    • 那覇市

マーカーが表示領域の左端に表示されましたね。

表示例のような
左端ギリギリに箇条書きをすることは無いでしょうが
<margin>タグを使用するときの考え方として確認をしておきます。

この形式は「入り子」にも適用されます。

「親項目」の表示位置が変わると、それに準じて「子項目」も移動します。

入り子でも、余白の指定がなければデフォルト値が反映されます。


■ 入り子の例

【表示4-a】
●入り子=margin-left:0px;padding-left:0px; の例

<ol style="margin-left:24px;padding-left:0px;">
 <li>沖縄県の人口
   <ul style="margin-left:0px;padding-left:0px;">
    <li>那覇市
   </ul>
</ol>

@ABCD
  1. 沖縄県の人口
    • 那覇市

親項目では<margin="0">の位置は、ブログの表示域の左端でしたが、
入り子の「子」項目での<margin="0">の位置は

●親項目の項目の頭の位置になります。

同じように、子項目に対する入り子「孫」項目は、子項目の頭になりますね。

【表示4-b】
●入り子=margin-left:24px;padding-left:0px; の例

<ol style="margin-left:24px;padding-left:0px;">
 <li>沖縄県の人口
  <ul style="margin-left:24px;padding-left:0px;">
   <li>那覇市
  </ul>
</ol>

@ABCD
  1. 沖縄県の人口
    • 那覇市

上記の【表示】例が、箇条書きの表示位置のデフォルト値を書き換えて、自分なりの位置に表示する方法です。

余白の取り方には、<padding>での形式もあります。
確認してみましょう。

■paddingでの余白。

【表示5】
margin-left:0px;padding-left:24px; の例

<ol style="margin-left:0px;padding-left:24px;">
<li>沖縄県の人口
<ol>

@ABCD
  1. 沖縄県の人口

「表示3」は<margin>で
「表示5」は<padding>での

箇条書きにおける余白の取り方です。

表示の結果は同じに見えますね。

実際にはプラウザのIEとFirefox(Netscape)では
余白の取り方が違うと言われています。

IEは<margin>で、
Firefoxは<padding>で

余白(表示位置)を設定するというのが原則になっているようです。

両プラウザで検証してみましたが、表示に微妙な違いがあるだけで気にすることもないくらいです。

その両プラウザに対応するように
CSSでの設定の方法を次回、確認してみましょう。


以上
IEをメインにした(marginを中心に)
箇条書きの実例をみてきました。

IEでは箇条書きの位置指定は、<margin>タグを使用することから
<padding-left:0px;>
は省略して書かなくてもいいのではと思いますが、<margin>だけでは、思うように表示ができません。

<margin>で位置を指定して、<padding>の値が"0"でも記入しておきましょう。

CSSを利用するときに確認できます。


※HTMLやCSS、
wwwプラウザの種類を問わずに
同じタグで同じ表示が出来るように統一されることが望ましいですね。

「marginとpadding」



●マーカーの代わりに画像を表示。
●CSSを使った箇条書き。

を次回、確認します。




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

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



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

メールアドレス:

ホームページアドレス:

コメント:

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


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/158091301
※ブログオーナーが承認したトラックバックのみ表示されます。

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

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