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




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


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

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

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


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

2011年02月22日

箇条書きの基本(CSSの定義4)

■ 5-33 画像・アイコンの表示位置の調整(2)

前回までに

●箇条書きのマーカーの種類と表示。
●独自の画像を項目の前にマーカーの役割として表示。
●画像の表示位置を調整。

の方法を確認してきました。

参照 
 
前頁で
画像を表示するためにclassを定義したのが、下記のCSSでしたね。

【参照CSS:画像をマーカーにするためのclassの定義】

.samp9 ul{
list-style:none;
margin-left:0px;
padding-left:0px;

background-image:url('url');
background-repeat:no-repeat;
background-position:left 15%;
margin:0px 0px 0px 36px;
padding:0px 0px 0px 24px;

}

⇒class名
⇒マーカーを表示しない
⇒デフォルトの位置をクリア
⇒画像と項目の空きクリア

⇒画像の呼び出し
⇒画像の繰り返し表示しない

⇒画像の表示位置

⇒左ヘリからの位置
⇒項目から画像への空き
⇒セレクタ閉め



上記のCSSの中で「赤文字」で記入している
marginとpadding
の役割にについては、まだ確認していませんね。

両プロパティの値を入れ変えながら見て行きましょう。

参照CSSの「class」の定義(青文字)では
list-style:none;
margin-left:0px;
padding-left:0px;
と定義して

●デフォルトで表示されるリストマーカーの非表示
●表示領域の左ヘリ(縁)からの位置
●項目と使用する画像の間の空き

をクリアしています。

このように、
デフォルトでの表示を全てクリアしていますので

リストマーカーの代わりに
使用する画像と箇条書きの項目を表示する位置(場所)を
新たにCSSに定義する必要があります。



画像のプロパティでは

@ background-image:url('url');
A background-repeat:no-repeat;
B background-position:left 15%;

@画像の呼び出し。
A表示の方法。
B位置。

を<background>で定義しています。

項目と仮想のリストマーカーとして使用する画像は
別個の存在ですので、新たに

項目の位置の定義が必要ですね。


項目の位置の定義には
<margin>
<padding>
のプロパティを使います。

【図1:marginとpadding】
bb.png
  ↑ 画像をクリック。元画像が開きます。

margin」は
記事表示領域、または指定された領域の上下左右の各ヘリからの位置の値を定義します。

左ヘリからの位置は

margin-left:●px;
または
margin:0px 0px 0px ●px;

どのプロパティの形式を使っても同じ意味になります。


padding
も位置を取るプロパティですね。

<margin>  = ヘリからの距離であるのに対して
<padding> = テキストの表示領域からヘリに対する距離になります。

このように<marin>と<padding>は
同じ位置を取るプロパティでも、その取り方と意味が異なります。

単位も、「px、pt」などの絶対サイズ、「em、%」のような相対サイズ
のどれを使用しても構いません。

箇条書きで
仮想のマーカーとして画像を使う時の<padding>の距離の対象は「画像」になります。

箇条書きの項目とその頭に表示する画像との距離は
余白・空きのことです。

参照 
● 図1: marginとpadding
● 図2:paddingの余白の取り方@
● 図3:paddingの余白の取り方A


値の「0px」は「余白無し」を意味しますね。

「余白無し」では
左端から余白を取らない位置、同じ位置に項目と画像は別々に表示されますが
同じ位置ですので重なった形になります。
  ↓
【表示例@】
@ABCDEF
  • 那覇市


例@がその見え方です。

画像と箇条書きの項目が重なって表示されますね。

    注1
   箇条書きと同時に表示している数字の@ABCDEFは
   位置を確認しやすいようにメージャーとして表示しています。

   このブログの基本書体は12pxですので、ヘリに触れている
   @の左端が0px、Aの左は12px、B24pxのように見てください。

    注2
   距離と余白の考え方は、行送りや行間の考え方と同じです。
   

■ 記事表示領域のヘリから余白を取る。

【CSS】
margin:0px 0px 0px 12px;
padding:0px 0px 0px 0px;
 ↓
【表示例A】
@ABCDEF
  • 那覇市


「例2」は
12px(1文字分)を開けて項目を表示した例です。

marginの値は
「0px 0px 0px 12px;

記事表示領域のヘリから右の方に「12px」の位置。
1文字分離れたその位置に「項目と画像」は表示されます。

margin は各ヘリからの距離になりますので、項目も画像も指定された距離だけ移動します。

padding の値を
「0px 0px 0px 0px;
としていますので「項目の表示位置」と「画像の表示位置」は同じ場所になり
重なった表示になります。


■ 項目と画像の間を空ける。

上記「例A」のpadding の値を調整します。

【CSS】
margin:0px 0px 0px 12px;
padding:0px 0px 0px 12px;
 ↓
【表示例B】
@ABCDEF
  • 那覇市



【図2:paddingの余白の取り方@】
zu01.png
  ↑ 画像をクリック。元画像が開きます。

paddingは項目(テキスト)の方から
上下左右のヘリに向かってスペースを取るプロパティでしたね。

この場合は、padding が取る左への余白は
項目の前に画像を用いますので、距離を取る対象は画像になります。

つまり
「項目と画像の間を空ける」と同じ意味です。

padding:0px 0px 0px 12px;
は項目の左の12pxの位置に画像を表示する領域が空きます。
1文字分のスペースが有りますので、重なることなく表示されます。

表示例Bの形では画像と項目の間に隙間がないので
マーカーの位置としては見た目も窮屈ですね。



■ 項目と画像の間に1文字分の余白を作る。

【CSS】
margin:0px 0px 0px 12px;
padding:0px 0px 0px 24px;
 ↓
【表示例C】
@ABCDEF
  • 那覇市



【図3:paddingの余白の取り方A】
zu02.png
  ↑ 画像をクリック。元画像が開きます。

画像の大きさ(12px) + 使用文字1字分(12px)= 24px
の余白を取り、その後に項目を表示する形です。

「図3」の例のように、項目から24pxの余白と言うことは

● 24px の全てを余白が占めるのではなく

24pxの余白の内

●頭の 12px の部分には画像。
●画像の後ろに1字分(12px)の余白を作り。

その後に項目を表示するので、実質「 24px 」になります。

@ margin:0px 0px 0px 12px; =
記事表示領域の左のへりから12pxの位置を指定。

A padding:0px 0px 0px 24px; =
項目の前に12pxの画像表示部分をつくり
さらに12px(1文字分)を空け、その後ろに箇条書き項目を表示します。

marginとpaddingの組み合わせを、十分に理解しましょう。


項目と画像の間に1文字分の余白を空けましたが
ブログでの文字や余白の大きさには、個人的な好みがあります。

余白は、半角(6px)くらいの小さい方が締りがあってスッキリする。
あるいは、もっと余白を空けたいという方は
paddingの左サイズの指定数値を変更しましょう。

余白サイズを半角小さく
画像(+)半角字分の余白(6px)= 18px のサイズ
padding:0px 0px 0px 18px;

大きく広げるときは、同じように数値を大きく調整します。

    注)
   余白サイズは「1px」単位で調整出来ます。

   行並びや文字の間隔を考え、使用文字の全角・半角を基準とした
   サイズで使用した方が見た目がスッキリします。


【表示例D】
@ABCDEF
  • 那覇市


「表示例C」に比べて、画像と項目の間の余白が半分になりましたね。


■ ヘリからデフォルトに近い位置を決め、項目と画像を表示。

<margin><padding>
の表示の形式が分かりやすいように、箇条書きの階層構造形で確認します。

【CSS】
親項目「那覇市」
margin:0px 0px 0px 36px;
padding:0px 0px 0px 18px;

子項目「人口」
margin:0px 0px 0px 12px;
padding:0px 0px 0px 18px;

  ※階層構造の箇条書きの各classの適用、画像位置の修正は
   前頁で確認しています。

【表示例E】
@ABCDEF
  • 那覇市
    • 人口約318,000人、約135,500世帯



親項目
margin:0px 0px 0px 36px;
padding:0px 0px 0px 18px;

親項目の「那覇市」は
●記事表示領域の左ヘリからmarginで36px(3文字)寄った位置に画像を表示しています。
●その画像と項目の間の空きは padding で「全角+半角=1.5(18px)」を取っています。
●その後ろに項目を表示しています。

子項目
@ margin:0px 0px 0px 12px;
A padding:0px 0px 0px 18px;

親項目に内包(入り子)されている子項目が
@のmargin: ・ ・ ・ 12px で取る対象としているヘリは

「親」が取った「記事表示領域の左端のヘリ」からではなく
「親」の箇条書き項目の領域(この例の薄紅色バックカラーの範囲)の左側を対象とするヘリになります。

そのヘリから「margin:12px」で指定した1文字分の箇所が画像の表示位置。
子項目(人口)は padding:18px(画像表示分12px + 余白6px)のスペースを取って項目の表示にしています。

この表示形式の方がデフォルトでの表示位置に近いいちです。

また
子項目にCSSの「class」定義を適用しなければ
子項目の位置は親項目で定義した値が継承され適用されます。

●画像表示位置についての注意点と
●階層構造の箇条書きについては


前頁の記事で確認していますので、チェックしておきましょう。

参照 

marginとpaddingはブログで画像や文章
あるいは段落、テーブルの作成などで頻繁に使うプロパティで
結構、重宝します。

上手く使うことによって
箇条書きでも思い通りの位置に画像や項目を配置出来るプロパティです。

ブログのレイアウトをきっちりと纏めたり
アフィリエイト用の説明箇条書きを目立たせたい
など、使い方は数多くあります。

使い方をしっかり把握しましょう。

………

記事上段の参照CSS
【画像をポイントにするためのclassの定義】には

画像の表示位置を決めるプロパティとして

background-position:
margin:
padding:

の3種類を使っています。

marginn padding
で位置決めをしているのだから
background-position:
は定義する必要はないのでは

と思えますね。

marginは
画像だけに作用するのではなく「画像と項目を含めた範囲」
つまり「行」の位置決めになります。

例えば
margin:10px 0px 0px 0px;
のようにtopから10pxとして適用した時には「画像と項目を含む行」が
前の行の行送りに10pxを足した位置に移動します。

このブログの例は、行送りは18pxですので
margin:10px 0px 0px 0px; は

18+10=28px
で、直前の行(上の行)から 28px の 
位置が、画像と項目を表示する行の位置になります。

marginを上、あるいは下に適用する時には、それらのことを考えて
注意して使いましょう。


margin padding backgroundのプロパティを
重複して適用しているように見えますが

各々の役割があり、画像だけの「上下左右」の表示位置を決めるためには
background-position:プロパティが必要になります。

………

箇条書きの「項目」や「画像」の表示位置の調整は、
marginやpaddingの使い方を把握しておけば、比較的に簡単に出来ますので
レイアウトをしっかりと纏めたいときに応用して使い切りましょう。

シリーズでは
「箇条書きの基本(CSSの定義1)から(定義4)」の確認で
classへの定義とHTMLでの適用の例をいくつか挙げています。

使用例に伴う「class」を各確認の毎に作成して適用しました。

「class」を数多く作りましたので、CSSの記述が乱れています。

整理と纏めが必要です。

整理と纏めは「CSS」のシリーズで確認します。




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

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



この記事へのコメント
管理人様 はじめまして、『 アフィリエイトで儲けようよ!! 』管理人のクニと申します。

突然の申し込み、申し訳ございませんが、今回相互リンクのお願いに参りました。

勝手ではございますが、既にこちらではリンクの登録をサイドバーにて完了しています。

相互リンクの件、是非、よろしくお願いいたします。(同条件で設定しなおさせていただきます)
Posted by 水穂 at 2011年05月28日 09:55
天明と申します。
ブログを拝見して勉強になりました。
良ければ私のブログも見て頂けると嬉しいです。
Posted by 天命 at 2011年07月04日 16:16
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

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


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

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

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