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




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


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

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

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


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

2011年01月29日

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

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

箇条書きは
デフォルト(初期)値では自動的に「● ○ ■」のマーカーが項目の前に表示されます。

デフォルトでのリストマーカーが表示される位置は決まっています。

CSSに<class>や<id>属性を定義して、
使用するリストマーカーを画像やアイコンに変更した場合でも、表示される位置は変わりません。


具体的に
「デフォルトで表示されるリストマーカーの位置」
「リストマーカーと項目とはどのような関係にあるか」
確認してみます。


@ 項目とリストマーカーをデフォルト値で表示。

互いの位置関係を、視覚的に捉えられるように
項目の背景<background>に色を付けて、領域の範囲を調べて見ます。

【HTML】
<ul>
<li style="background-color:#FFE4E1;">沖縄県那覇市
</ul>

【表示@】
  • 沖縄県那覇市


ページや文章、あるいは文字の背景に画像を使用したり、色を付けるには
background-colorプロパティを使います。
  
CSSとHTMLの関係は過去記事で度々確認しています。

    注)
   ●background-colorはCSSプロパティです。
 
   ●例文のように、HTMLの構文にCSSプロパティとHTMLの
    タグが混在することは構造的には間違った使い方と言えます。

   ●混在して使用しても表示上はエラーにはなりませんが、
    HTMLとCSSの概念からしても、両者の意義は異なりますので
    意識して使い分け、両方の構造体系とその立場を把握していくように
    しましょう。

   ●この章ではHTMLを確認しつつ、CSSの流れを掴むために
    タグとプロパティの使い分けをしていません。

   ●HTMLとCSSの関係を確認する段階で
    互いの住み分けをして行きます。
         

項目の背景に「薄い紅色」が付きましたね。

その色の付いた範囲が「項目」の領域です。

箇条書きのデフォルト値での
リストマーカーの位置は項目の領域の外側になります。


リストマーカーの表示位置を定義するには
<list-style-position:>プロパティを使います。

<list-style-position:>は
outside;
inside;
inherit;

= 項目の外側
= 項目と同じ領域内
= 定義の継承
  (この章ではinherit;の解説は省略します)


の値を取ります。

外側への表示はデフォルト値が<outside>になっていますので、
CSSに新たに定義する必要はありません。

上記の例【表示@】のような表示からみても
「リストマーカー」と「項目」は別々に存在することが分かりますね。

別々の存在であることで、リストマーカーの形状を変更したり、
数字や英文字、画像やアイコンに差し替えて表示することが出来ると言えます。


A リストマーカーを「項目と同じ領域内」に表示。

項目と同じ領域内に表示するプロパティの値は「inside」ですね。

【HTML】
<div style="list-style-position:inside";>
<ul>
<li style="background-color:#FFE4E1;">沖縄県那覇市
</ul>
</div>

【表示A】
  • 沖縄県那覇市

表示例@とAの違いはハッキリしていますね。

@ ではマーカーの位置は「項目の外側」
A は「項目と同じ領域内」になっています。

デフォルトの<outside>と<inside>の両方を並べて
表示パターンを確認してみます。

【リストマーカーの表示位置比較】
  • 那覇市(outside) = マーカーは外側
  • 那覇市(inside) = マーカーは内側

<outside>と<inside>では
項目を表示する領域の範囲(色ついたバック)は同じ範囲を取っていますが
リストマーカーの位置は移動しています。

過去記事の「箇条書きの基本」でも確認したように
項目の表示位置を動かすとリストマーカーの位置も動きますね。

参照 


■ 画像リストマーカーの表示位置。

リストマーカーを画像やアイコンに差し替えて表示した時
項目の文字のベースラインより、画像やアイコンのベースラインが
少し中央寄りに表示される現象が見られます。

とくに、プラウザのIE(Internet Explorer)を使用している方は
その微妙なズレを経験していると思います。

【画像@】=プラウザのIEでの見え方
hyo01.jpg
項目の文字のベースラインの位置より、アイコンで表示した
リストマーカーのラインは少し上付きになって揃っていませんね。

  ※Firefoxではラインが揃って表示されます。

使用している「三角形」「ひし形」のアイコンは
ズレを計算して文字より小さいサイズで作りあげています。

それでもアイコンの上部は文字のトップラインより上に出ています。

この様な表示上のほんの僅かなズレは

ウェブデザインを本格的に学んでいる訳でもないので、
それほど気にする問題でもないことですが、なかには

 ●どのプラウザでも決まった位置に表示にしたい。
 ●マーカーと項目のベースラインをしっかりと揃えたい。
 ●ブログのデザインを綺麗に仕上げたい。

と言う考えも有ります。

プロパティの
<list-style-position:>は
リストマーカーを表示する位置を
「外側に」「内側に」の値を指定するだけです。

左右への位置の移動は出来ますが、上下には無理があります。

---

■ 項目のマーカーの代わりに「独自の画像やアイコン」を表示する。

マーカーを自由に動かせないのは「箇条書きの一部」であるための制約です。

箇条書きのマーカーとして、別の画像やアイコンを使用して表示すると言うことは
マーカーが表示される位置に、その画像やアイコンと差し替えて表示するという意味ですね。

画像やアイコンは独立しているので、CSSでの定義やHTMLのタグ指定で、思いどおりの場所に自由に表示すればいいことです。

●マーカーを表示しないようにする。
●独自の画像やアイコンを、指定する箇所(マーカーの位置)に表示する。

の考え方になります。

マーカーの表示をしないで
独自の「画像やアイコン」を、その位置に呼び出して表示したら

表示上の見た目は
箇条書きのリストマーカーを表示したのと同じ形になりますね。

独立した画像の表示ですので
上下左右の位置調整は比較的簡単に出来ます。


CSSに定義するプロパティは
【プロパティと

●list-style:none;
  デフォルトで表示されるマーカーを表示しないようにする。
  (その位置に画像を表示するので二重表示にならないように)

●background-image:url( url );
  項目の頭に表示するための画像を呼び出す。

  項目のリストマーカーの代わりに
  画像をポイントとして使用するので、箇条書きの
  <list-style-image:>プロパティの適用ではなく
  画像を呼び出す
  <background-image:>プロパティ。

●background-repeat:no-repeat;
  背景画像の表示の繰り返しを禁止。
  値は「no-repeat;」または「none;」
  このプロパティと値を適用しないと、同じ画像が繰り返して
  表示される。

  逆に画像を繰り返し表示させるには
  background-repeat:repeat-repeat;
  
●background-position:* *;
  画像の表示位置の指定
  値は
  left right center top bottom %(比率) px(サイズ)
  などがある。

  background-position:@left Atop;
  「領域」の @左 A上の位置がデフォルト値。

●padding
  項目と画像との間の空きの指定(項目側から空ける)
●margin
  画像位置の指定(テキスト領域のへりから)

  参照 ⇒ marginとpadding・その応用(1)〜(3)
        応用(1)  応用(2)  応用(3)


上記のIEでは、リストマーカの位置がズレていましたね。

リストマーカーの代わりにポイントとして用いる画像を
表示するCSSを確認してみましょう。


セレクタの仮のclass名を「samp9 ul」とします。

【画像をポイントにするためのclassの定義】
【class定義@:親項目】

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

font-size:12px;
color:#0000ff;
background-image:url('url');
background-repeat:no-repeat;
background-position:left 15%;
margin:0px 0px 0px 24px;
padding:0px 0px 0px 24px;
}

⇒class名
⇒マーカーを表示しない
⇒デフォルトの位置をクリア
⇒画像と項目の空きクリア
⇒文字の大きさ
⇒文字の色
⇒画像の呼び出し
⇒画像の繰り返し表示しない

⇒画像の表示位置

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


同時に箇条書きにする第二階層の子項目の定義
class名は「samp10 ul」とします。

【class定義A:子項目】

.samp10 ul{
list-style:none;
margin-left:0px;
padding-left:0px;
color:#990000;
background-image:url('url');
background-repeat:no-repeat;
background-position:left center;
margin:0px 0px 0px 24px;
padding:0px 0px 0px 24px;
}


画像例の
IEでの見え方のリストマーカーの表示ズレを修正するため

【class定義@:親項目】【class定義A:子項目】

でclass定義をしてリストマーカーの代わりに
画像を使用したのが、下記の表示例です。

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


親項目の「那覇市」、子項目の「人口」の前に表示されている「三角」「ひし型」のアイコンが、ポイントとして使用したマークで、仮想のリストマーカーになります。

見た目は、リストマーカーそのものですね。

親項目の表示領域に薄紅色、子項目には薄青色を付けてみると
薄紅色の親項目の領域は、子項目の領域にまたがって色が乗っています。

子項目は
親項目の「那覇市」の領域に内包されていることが分かりますね。

箇条書き構造は
その下の層(孫項目)次の層を組み立てても親の領域内ということです。

このことは重要な要素の一つで、プロパティとして定義する
background-position:left center;
の値を「center」と定義した時

その位置は
親と子、あるいは孫も含めた親の領域内の上下の中央(center)
と言う意味になりますので
「▲」画像のベースラインは、子や孫まで含めた広い親の領域の中央に来ます。

「center」指定では、リストマーカーの代わりとしては
歪な位置へ表示されますね。

親、子、孫のような階層構造では
画像を置く位置に気を付ける必要があります。


表示例では画像位置の値を「%」にして
background-position:left 15%;
の形式で親項目のトップラインから、15%下げた位置に指定しています。

 ※「%」は領域の広さに対する相対値です。
  この例では、領域は子項目の範囲まで入ります。

  絶対値の「px」を使って細かい指示をしてもいいでしょう。

親項目、子項目で成り立っている
階層構造における適用例を示しましたが

親だけの項目(ここでは那覇市の項目)
の単独での箇条書きでは、項目領域は親だけの範囲になりますので、

画像位置の値を「無指定」にするか、または値を
background-position:left center;
の形式で領域の中央に指定します。

【表示例】
  • 那覇市


アイコンが上下の中央に位置していますね。

アイコンが文字より大きい、あるいは極端に小さいサイズを使用している時には上下位置を計算して表示します。

このように
単独の項目と多層の時の「値」の使い方には気を付けましょう。

backgroundには
image の他に
color  position  repeat  attachment(スクロール指定)
の値があります。

ある領域内
たとえばブログの記事領域、テーブルのセルの中、ページを分けるフレームなどに画像を表示する時、 paddingやmarginn と共に頻繁に使用されます。

アフィリエイトなどで、商品画像を貼り込む位置を決めるなど
便利なプロパティです。


---
リストマーカーの代わりに
独自の画像をポイントとして使用するために
CSSのclassを定義し、表示方法と位置の指定を確認しました。



次回は
今回の「箇条書きでの画像使用」の補遺で
「marginとpadding」を確認します。



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

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



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

メールアドレス:

ホームページアドレス:

コメント:

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


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

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

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