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




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


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

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

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


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

2010年10月29日

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

■ 5-30 CSSを定義、箇条書きを装飾する。

HTMLはマークアップ言語と言われ、タグを用いて
「これは見出し」「この部分は記事本文」「画像はここ」というように
要素を指定して、レイアウトやウェブページを制御しますね。

見出しや本文をどのように表示するか
HTMLをどのように使用するかはプラウザ(www)に準拠しています。

HTMLだけで、ウェブページを表示しようとすると
使用するタグがより複雑になり、プラウザによって見栄えが変わったり、表示位置が異なっていたりと、バランスが崩れてしまうことがあります。

そのような背景で
HTMLのタグの簡素化や共通化をもとに、HTMLとは別にデザインや装飾する仕組みが考え出されています。

それがCSSですね。

    ※ Cascading Style Sheet(スタイルシート)

CSSはHTMLのタグの機能を補ったり、拡張する役目があり

●HTMLでウェブページの内容を作成(マークアップ)して、
●そのHTMLをCSSで装飾する。

という考えで
CSSにさまざまな拡張機能が取り入れられ、複雑な構造もスムーズに構築でき、柔軟にウエブページのレイアウトが行えるようになっています。

HTMLは、そのCSSを呼び出してWEBページに適用する形になっています。

CSSは
wwwの世界、IEやFirefoxをはじめ大方のプラウザに対応していて
ウェブページを作るのに欠かせないものです。

将来はCSSとHTMLの関係は

機能が拡充してより簡便に使用でき、役割分担が明瞭になり、
ウェブページをもっとスムーズに作りあげる仕組みに改善されるでしょう。


■ 箇条書きのHTMLと定義するCSSの役割
その使い方を確認してみましょう。


HTMLの箇条書きの要素は次の3種類でしたね。

@順序なし箇条書き(箇条書きリスト)
A順序あり箇条書き(連番リスト)  
B定義型箇条書き   
⇒ ul要素
⇒ ol要素
⇒ dl要素





順序なし箇条書き(箇条書きリスト)を基にして、HTMLとCSSの構造を確認します。

Aの連番リスト、B定義型箇条書き の仕組みやCSSの適用は
@の箇条書きリストと同じ方法です。

【箇条書きのHTML】

沖縄県の市町村
<ul>
<li>那覇市
<li>沖縄市
<li>……
</ul>

【表示例】

沖縄県の市町村
  • 那覇市
  • 沖縄市
  • ……

「デフォルト値」で表示した例です。

   注)
   デフォルト値での表示は、テンプレートの
   CSSで定義している文字の種類、サイズや色が適用されます。
  
HTMLにも
文字やウェブデザインのために装飾する方法は数多くあります。


文字の装飾などをHTMLタグだけで指定すると

●使用するタグの種類が多くなり、煩雑になります。
●さらに構文としてのHTMLが重くなります。

ウェブページでは画像の取り扱いや文字の装飾、表の作成、箇条書きのマーカーなど
いわゆる「デザイン」はCSSで行い、HTMLの構文(マークアップ)は簡便に軽くすることが基本になります。

【CSSに箇条書きを定義】

CSSの基本形は

セレクタ{
  .text {
プロパティ:値;
  font-size:12px;



⇒セレクタ名(開く)

⇒プロパティ名:その値;

⇒セレクタ(閉め)


の形式ですね。  
セレクタ名の  {    プロパティの  : ;    閉めの  }  の記入を忘れないように。

箇条書きにCSSを適用するには
 ● 過去記事を含めて全べての記事に適用する。
 ● 必要なページにだけCSSを適用する。

の二つの考え方があります。

■ 過去記事を含めた全べての記事にCSSを適用する。

全てのページ(記事)で使用している箇条書きに、
文字の種類、太さ、大きさや文字の色など、統一したスタイルを適用させるには、

箇条書きのタグ
<ul> <ol> <dl> を
CSSのセレクタとして直接に定義します

【CSSへ定義した例】

<!-- 順序なし箇条書き(箇条書きリスト)-->
ul{
font-size:13px;
color:#0000ff;
list-style-type:square;
}
ul ul{
font-size:12px;
color:#990000;
list-style-type:circle;
}
 
<!-- 順序あり箇条書き(連番つきリスト)-->
ol{
font-size:13px;
color:#0000ff;
list-style-type:upper-alpha;
}
ol ol{ … }

<!-- 定義型箇条書き-->
dl{ … }
dl dl{ … }

●セレクタとして定義した後は、箇条書きのHTMLタグを

<ul> …
<ol> …
<dl> …

と記入しただけで、
プロパティとその値を読み込んでデフォルトでの定義どおりに表示をします。

●ここで注意することは、箇条書きにしている
「過去記事を含めた全べての記事」
に定義したCSSが適用されることです。


●リストの階層ごとに異なったスタイルを適用するには
第二層 ⇒ ul ul { … }  
第三層 ⇒ ul ul ul { … }

と定義しておけばプロパティ値が反映されます。
 ※ ul と ul の間に半角のスペースを空けます。

参照 
●階層とは(この記事の下段)
●箇条書きリストの階層ごとにスタイルを定義


一般的なブログのテンプレートのCSSには
箇条書きをセレクタとして設定していませんね。

ブログサービスでは、
同じテンプレートを使用しているブロガーが複数にわたります。

共通のテンプレートを使用している方でも、個人用にCSSを書き換えて
使用する書体やデザインを変更していることが多いですね。

テンプレートのCSSに箇条書き<ul><ol><dl>をセレクタとして
最初から定義してしまうと

文字やその修飾などの<body>要素を書き換えた場合でも、
箇条書きはすでに定義していますので、その定義のとおりでの表示になります。

箇条書きの文字の大きさなどが、本文とは異なった形で表示される。

などと全体的なバランスが崩れる時もあります。

見栄えがいいように本文との対比を考えて、
箇条書きのCSSを書き直すことが必要なときもでてきます。

デフォルト値は
CSSに初期値として定義している文字が基本になっています。

箇条書き、テーブルなどは、
必要なときに定義することが望ましいCSSの使い方になっています。


■ 必要なページの箇条書きにだけCSSを適用する。

class ・ id の定義と適用。

一部の箇条書きにCSSを適用する方法をみていきましょう。

CSSを適用したい箇条書きのセレクタを
「class」名または「id」名
で定義します。

【class ・ id属性】

  ●class属性
  定義した箇所の箇条書きにだけCSSが適用されます。
  セレクタを同じウェブページで何度でも使えます。
  セレクタの前に「.」(カンマ)を付けます。

  ●id属性
  定義したセレクタを一度だけ使う。
  セレクタの前に「#」(シャープ)を付けます。

  ※classやidは、
  箇条書きだけではなくtebleや段落(p)などに対しても
  追加セレクタとして使う時の基本です。

class属性とid属性は同じ使い方をします。

【 class をCSSに定義する】

class をCSSに定義するには
class名の前に「.」(カンマ)を付け「.aaaaa 」というセレクタにします。
  ※「.」を忘れないようにしましょう。

文字の大きさや文字色など装飾に必要なプロパティとその値を記入して
CSSを変更して保存します。

「.aaaaa 」はセレクタ名ですので、自由に付けてかまいませんが、
箇条書き用のセレクタだと分かりやすい名前にしましょう。

 ※ここでは、
 仮のセレクタのclass名を「.samp ul」として定義しておきます。
 
「箇条書きCSS:class定義@」

.samp ul{
font-size:13px;
color:#0000ff;
list-style-type:square;
}

⇒ class名
⇒ 文字(13px)
⇒ 文字色(青)
⇒ マーカー「square=四角」
⇒ セレクタの閉め

このCSS(class)を適用するためのHTMLは

【HTML】
<div class="samp ul">
 <ul><li>〜</ul>
</div>
または
<ul class="samp ul"> <li>〜</ul>の形式です。

両方ともclass定義した <.samp ul> を適用せよの意になります。

   注)
    CSSに定義したclass名には
   「.samp ul」と「.」が付いています。

 
   「.」はCSSに対してセレクタは「class」であるという意味ですので、
    HTMLを記入して適用する時には
    <div class="samp ul">のように「.」は記入しません。


    idの「#」も同じ使い方です。    

【HTML記入例】
<div class="samp ul">
<ul>
<li>那覇市
</ul>
</div>

「表示」
  • 那覇市

表示は「箇条書きCSS:class定義@」が適用され

本文より1px大きい文字、
文字の色は青、
項目のマーカーの種類は「square=四角」ですね。


このように、ある要素に対してCSSを定義して適用すると、
同じ要素にはすべて同じスタイルが指定されます。

これがCSSの特徴です。

CSSへの定義の方法やHTMLタグの記入形式は
<ol要素><dl要素> でも同じ仕組みです。


■箇条書きリストの階層ごとにスタイルを定義。

箇条書きの階層とは

【階層の表示例】
  • 那覇市
    • 人口約312,000人、約122,000世帯

項目「那覇市」は
「人口は約312,000人」の親の項目であり、第一層になります。

人口の項目は親の層の下、第二層に表示されますね。

このような形式を「階層」といいます。

第一層、第二階層、そして第三階層 … 
と階層化している箇条書きでも、各階層ごとに文字を修飾したり
マーカーを画像に変更して使用することができます。

先のCSSのclass定義@と同じように、
装飾をしたい階層に使用する新しい「class」をCSSに定義しておきます。

 ※サンプルでは「.samp2 ul」の名前でclss定義をして
 適用してみましょう。


「箇条書きCSS:class定義A」

.samp2 ul{
font-size:11px;
font-color:#990000;
list-style-type:circle;
}

⇒ class名
⇒ 文字のサイズ(11px)
⇒ 文字の色(薄茶)
⇒ マーカー「circle=白丸」
⇒ セレクタの閉め

先に定義した「.samp ul」を親項目に、
この「.samp2 ul」を第二層の子項目の文字を修飾するセレクタとして適応します。

第三層や四層にも
異なる装飾をしたいときは同じような定義が必要ですね。

【HTML】
<div class="samp ul">    ← 定義@を適用
<ul>        ← 第一層
<li>那覇市
<div class="samp2 ul">   ← 定義Aを適用
<ul>        ← 第二層
<li>人口約312,000人、約122,000世帯
</ul>
</div>

</ul>
</div>

【表示】
  • 那覇市
    • 人口約312,000人、約122,000世帯

第一層の那覇市の文字サイズは13px、色は青、マーカーは黒四角。

第二層の人口の項目の文字の大きさは11px、色は薄茶色、マーカーは白丸と定義通りの表示になりましたね。

この注意点は
●CSSに定義した「.samp ul」は親項目に、
●「.samp2 ul」は必ず子項目に適用させなければいけない。


と言う決まりはありません。

逆に定義のA「.samp2 ul」を親に、
定義@「.samp ul」を子に適用してもかまいません。

定義は必要に応じて、どの層に適用しても構いません。

また、第一層だけに定義して、
第二層以下には定義(適用)をしなければ、
以下の階層には、第一層に適用した「class」が反映されます。

そのことを「継承」と言います。

また逆に第一層には定義無し
下部の層だけ個々に定義することも自由にできます。

classやidは
必要な時に自由に呼び出して使用できる便利なセレクタです。



以上のようにHTMLの「要素(タグ)」に class属性を指定して
そのclassをセレクタにすることで、思うとおりの細かなスタイルが設定ができますね。

箇条書きだけではなく、テーブル、段落、段組みなどにclassやidを対応させれば
記事の中で必要な「要素」にだけ適用するスタイルを定義することができます。

CSSの定義、HTMLでの適用の方法は
CSSを使う上での基本になりますので、仕組みに慣れるようにしましょう。

次回は、
マーカーに画像(アイコン)を用いるなど
少し進んだCSSの適用を確認します。




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

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



2010年08月23日

箇条書きの基本(4)マーカーに画像を使用

■ 5-29 マーカーを画像・アイコンに変更

ブログは、訪問者の視線の動きを考えたレイアウトが重要になってきます。

とくに視線の流れに気を配ったレイアウトは、
見た目にも美しく、発信している人の優しさと気配りを感じます。

使い勝手のいいブログは
●ブログの目的がハッキリしている。
●内容が整理されている。
●道筋がたどりやすい。

など、訪問者に対する気遣いがありますね。

「伝えたいことを要約して分かりやすくまとめる」
そのことは、記事(文章)を書くことの基本ですね。

箇条書きも、その要約する手法のひとつですね。

その箇条書きの項目を
●記事の流れを、目で追いやすいようにマーカーの種類を変えたり
●重要な項目には画像(写真・イラスト)やアイコンをマーカーに使用することで
●強調するポイントを作り、訪問者を案内するスムーズな流れ

が作れます。


■ マーカーを画像やアイコンに差し替える。

箇条書きのデフォルトで表示されるマーカーは「●」「○」「■」「1」… の種類でした。
そのデフォルトで表示されるマーカーを写真やイラストなどの画像、独自で作成したアイコンに変更するHTMLタグの記入を確認します。

    注)
   ●アイコンとは
    イラストや写真画像などを「32×32px、16×16px」 のサイズ
    または、それより小さいサイズで作り上げたものの総称。

   ●厳密にはアイコンは拡張子が「….ico」のタイプを言うが、
    最近ではそれほど厳密な区分けをしていないようだ。

   ●この記事で使用している画像やアイコンは「….gif」形式を
    使用しています。

箇条書きのHTMLタグの形式は

【ul】要素
<ul>
  <li>那覇市
  <li>沖縄市
  <li>浦添市
</ul>


の形式でしたね。

項目のマーカーを画像やアイコンに変更する為のプロパティは
list-style-image
を使用します。

   image = 写真やイラスト類を指す

箇条書きのデフォルトでは
「●」や連番の「1、2」アルファベットの「a b」のようなマーカーしかないですね。


■ アイコンを用意する。

ネット上には数多くの無料で使用できるアイコンがあります。
気に入ったアイコンを取得するか、
独自のアイコンを作って、自分なりのブログデザインにするのもいいでしょう。



上記リンクの参照で、独自のアイコンの作り方を確認しておきましょう。

作成した三角形のアイコンが下図です。

【16px サンプル画像】

   

アイコンの基本にそって「16×16px」で作成しました。
拡張子は「ico」形式ではなく「gif形式」です。

このブログの使用書体の大きさは「12px」ですので、書体とマーカーのバランスを取るため
「12px」または少し小さめのサイズに修正した画像を各項目の頭に表示します。

最初から文字の大きさ程度のアイコンを作成して、使用することも出来ますが、
画像の表示段階でジャギングの現象が起こることがあります。

    注
   ● ジャギング = 画像の周辺がギザギザに表示される現象。

画像を使用するときの基本どおり、
大きめのサイズ(2倍以上)で作成してアップロードのあと
使用するときに書体の大きさを基準にした縮小サイズで表示することが望ましいです。

12pxや10pxの画像は、表示上はアイコンと言うよりむしろ「ファビコン」に近いですね。




■ 項目に同じ画像を表示する。

【HTML】

<ul style="list-style-image: url('画像のurl');">
 <li>那覇市
 <li>沖縄市
 <li>浦添市
</ul>

【表示】
  • 那覇市
  • 沖縄市
  • 浦添市

<list-style-image>での指定です。
上手くマーカーの位置に画像が表示されていますね。

●箇条書きの各項目に「同じ画像」を表示するときには
<ul>要素
の中に画像の<URL>を記入。

●項目ごとに「異なる画像」を表示するときは
<li>要素
に、対象となる画像の<URL>を組み込みます。( ↓ 下段「表示2」)


画像を読み込むHTMLソースは、
ブログの画像保存の場所にアップロードしていますので、

<ul style="list-style-image: url('http://tosiji-dreamafi.up.seesaa.net/image/・・.gif');">

のように「絶対パス(絶対番地)」での記入です。
 
【HTML】

●<ul style="  list-style-image ~  " の
    「" ~ "」が「list-style-image」の範囲。

●url(' ~ ') が、画像の<url> ('  ')は入り子の形式です。

●HTML内の
  ” (ダブルコーテーション)と  ' (シングルコーテーション)の記入
 を忘れないように.


<url>番地の指定は
独自のサーバーを所有して、データ類がそのサーバーにあるときの<url>の記入方法と
ブログサービスを利用したときの<url>の形式が異なりますので、注意が必要です。

ここで取り上げた例は、ブログサービスを中心にしたimgタグを確認しています。

●<list-style-type> と<list-style-image>
のプロパティを同時に指定した場合には<list-style-image>が優先されます。


■ 各項目に異なる画像を表示する。

項目ごとに異なる画像やアイコンを表示するときは
<li>要素に対象となる画像のURLを組み込みます。

【HTML】

<ul >
 <li style="list-style-image: url('画像1url');">那覇市
 <li style="list-style-image: url('画像2url');">沖縄市
 <li style="list-style-image: url('画像3url');">浦添市
</ul>

【表示2】
  • 那覇市
  • 沖縄市
  • 浦添市

各<li>要素に一個いっこの画像urlを記入する煩雑さはありますが、思い通り画像やアイコンが表示できますね。


■ 画像の表示位置を修正する。

画像やアイコンを使用してみると、表示位置が微妙にずれますね。

表示位置を調整する方法として
画像配置の<background>をHTMLのタグとして使う方法があります。

<background>は
背景色や背景画像を指定するCSSプロパティですが、タグとして
<li要素>に設定すると、画像やアイコンをリストマーカーとして表示することができます。


次回は

●CSSへの箇条書きの定義
●HTMLでの適用

を確認します。



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

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



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



×

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