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




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


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

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

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


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

2010年07月21日

箇条書きの基本(2)

■ 5-27 箇条書きのマーカーや記号を変更

箇条書きは情報を

●簡潔にまとめ
●要点が分かりやすく
●ビジュアル的に見やすくして
●読みやすくする

効果がありますね。

●行頭に「●」のマーカーや「1」などの数字を入れて
ポイントを強調することで、伝いたいことを明確に伝え、記事を印象付ける役割も果たします。

●流れの手順の説明やリンクを張ることで項目にすぐに進めるように、
メニューとしての役割を持たせる使い方もあります。

新しい情報を提供する。
ブログにとって欠かせない命題の一つで
ブログに訪問する方は、それらの情報を期待していることが多いですね。

情報が、キチットと分かり易いように整理されていることが
ブログの良し悪しを決めると言っていいでしょう。

文章の構成においてはインデント、段落や段組みなどは

●いかに情報を整理するか
●いかに文章を読みやすくするか

の視点から使用されています。

箇条書きを利用するのも同じの考え方からです。


■箇条書きで表示するマーカーや数字の設定。

<ul>タグ(順序なし)
を使ってのマーカーの表示は、自動的に「●」「○」「■」が表示されましたね。

<ol>タグ(順序あり)
では、算用数字が振られましたが
もっと細かく該当する項目が
掴みやすいように「英文字」や「ローマン数字」などを使って階層を明確に表示したいときがありますね。

マーカーや数字を置き換えるときは
<list-style-type >プロパティの<type>プロパティを使用することになります。

それらプロパティやタグを使用するには
HTMLタグの直接書き込みとCSSへの定義があります。


【マーカーの置き換え】

■ <list-style-type>形式

<list-style-type>は

<@タグ名 Astyle="list-style-type: Bマーカーの種類">の形式をとります。

属性のデフォルト(初期値は)<disc>(黒丸)になっています。

この形式は、<ul>、<ol>の両要素で使用できますが

●表示順序には関係がない、箇条書きの項目には<ul>要素を。
●「1、2」や「a、b」などのように、 表示される順序が重要な箇条書きは<ol>要素で。

と使用する要素を使い分けましょう。

とくに<ul>要素で、<list-style-type>形式を使用するのは、
リストマーカーの黒丸や四角の種類を変更する時くらいです。

    注
   ●list-style-type
    のタグやプロパティ形式はチェックしておきましょう。

   ●箇条書きのCSSで使用します。

【資料1】
マーカーの種類

none
disc
circle
square
decimal
lower-alpha
upper-alpha
lower-roman
upper-roman

↓ IEでは未対応です。
hiragana
katakana
hiragana-iroha
katakana-iroha
cjk-ideographic




⇒ なし 
⇒ 黒丸 (●)
⇒ 白丸 (○)
⇒ 黒四角(■)
⇒ 算用数字(1 2)
⇒ 英小文字(a b)
⇒ 英大文字(A B)
⇒ ローマン数字小(@A)
⇒ ローマン数字大(TU)


⇒ ひらがな(あい)
⇒ カタカナ(アイ)
⇒ ひらがな・いろは(いろは)
⇒ カタカナ・イロハ(イロハ)
⇒ 漢数字(一二三)


【<list-style-type>形式:タグの使用例】

<ol>
<li style="list-style-type:decimal">那覇市
<li style="list-style-type:lower-alpha">沖縄市
<li style="list-style-type:"upper-alpha">浦添市
<li style="list-style-type:lower-roman">宜野湾市
<li style="list-style-type:upper-roman">豊見城市
</ol>

【表示】
  1. 那覇市
  2. 沖縄市
  3. 浦添市
  4. 宜野湾市
  5. 豊見城市


上記の例は
<ol>要素の中に、複数の<li>要素を使った箇条書きの例です。

<list-style-type>プロパティを
<li>要素の中に記入する方法を取っていますね。

decimal(算用数字)、lower-alpha(英小文字)と異なる属性を指定しています。
その属性に対応した記号が表示されています。

本来は、このような入り乱れた記号、統一されない使い方はしませんね。

記号類を変更するプロパティ<list-style-type>は
箇条書き全体を括る<ol>要素の属性
として記入するのが、統一性をもった表示になります。

<ul>要素でも同じ使い方になります。

「list-style-type形式」

【タグ形式】
<ol style="list-style-type:decimal">
 <li>那覇市
 <li>沖縄市
 <li>浦添市
  <ol style="list-style-type:lower-alpha">
  <li>宜野湾市
  <li>豊見城市
  </ol>
</ol>


【表示】
  1. 那覇市
  2. 沖縄市
  3. 浦添市
    1. 宜野湾市
    2. 豊見城市

<ol>要素の中に
「入り子」として再度<ol>要素を組み込んだパターンです。

最上位の<ol>の値<decimal>は、入り子の<ol>を含めますが
入り子の<ol>が新たに値を<lower-alpha>としていますので
各々の<ol>で括られた各<li>は各<ol>の値で表示されます。

最上位の<pl>の値と入り子の<ol>の値を継承する<li>の範囲を掴んでおきましょう。


CSSでは、<ol>(親)の方での指定になりますので、
形式を覚えておきましょう。

以前に確認した「テーブル」のHTMLタグと同じような性質です。



<list-style-type">に準じる(仲間)プロパティには
●<list-style-image>   = 記号の替わりに画像を用いる
●<list-style-position> = 記号や画像の表示位置を指定する
が有ります。(後述します。)


■<type>形式

<type>形式の特徴として
<li style="list-style-type:decimal">の値<disc><decimal><lower-alpha>
のようなマーカーの種類の指定ではなく、

<ol type="1">のように
1、2、3(算用数字)a、b、c(英小文字)を直接書き込んでマーカー(段落番号)を振る形式です。

    注
   ●日本語入力ソフト=ワードでは
   「● ○ ■ 」のマーカーを振る形式は「箇条書き」
   「1、a、T」などの数字を振る形式を「段落番号」と称しています。

   このページでは値の呼び名を「段落番号」とします。

タグは
 <ol type="段落番号">
  <li>項目
 </ol>
の形式です。

【資料2】
段落番号

1
a
A
i(アルファベットのi)
I(アルファベットのI)

⇒ 算用数字
⇒ 英小文字
⇒ 英大文字
⇒ ローマン数字(小)
⇒ ローマン数字(大)

   ※注 ⇒ ローマン数字は漢字変換数字の「@、T」ではなく、
         アルファベットの「@、T」 を使用します。

  
【タグの使用例】
<ol>
 <li type="1">那覇市
 <li type="a">沖縄市
 <li type="A">浦添市
 <li type="i">宜野湾市
 <li type="I">豊見城市
</ol>

【表示例】
  1. 那覇市
  2. 沖縄市
  3. 浦添市
  4. 宜野湾市
  5. 豊見城市

この形式でも
基本的には記号類を変更する
プロパティ< type="段落番号">の記入箇所は

箇条書き全体を括る<ol>要素の方に属性

として指定します。

「type形式」

【タグ形式】
<ol type="a">
 <li>那覇市
 <li>沖縄市
 <li>浦添市
   <ol type="i">
     <li>宜野湾市
     <li>豊見城市
   </ol>
</ol>

【表示】
  1. 那覇市
  2. 沖縄市
  3. 浦添市
    1. 宜野湾市
    2. 豊見城市

「type形式」の方が、
段落番号の形状が分かりやすく、使いやすいですね。

「ひらがな」「カタカナ」や「いろは」などには対応していませんが、
簡単な箇条書きには、用意されている「段落番号」で十分に組み合わせが出来ますので使い慣れましょう。


■文章段落(p)で分けられた箇条書きの番号を連続数字に。

ひとつの文章(段落:p)の途中に箇条書きを表示して、次の文章(段落)を表示したあと、その下に2個目の新しい箇条書きを作ると、段落番号はスタートの同じ数字(1)からになりますね。

文章が一つの流れで、箇条書きも文章とともに続く形で、
文章の分け目に入れる箇条書きの数字は、前の箇条書きから続く連続した数字にしたい時があります。

 <p>段落1   ← 段落1、2は一つの文章の流れ
   箇条書き@ 
 </p>
 <p>段落2
   箇条書きA ← 箇条書き@から続く連続番号 
 </p>

段落をまたがった箇条書きの番号を連続の番号にする

段落1
 <ol type="1"><li>項目1<li>項目2</ol>
段落2
 <ol start="3"><li>項目3<li>項目4</ol>

の形式にします。

タグの種類には

 <ol start="●">
 <li value="●">

が有りますが、使う要素が異なります。

文章段落をまたがった箇条書きの連番:例

中国の「三国志」が好きな日本人は多い。
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ドラマである。
  1. 「三国志」とは紀元後3世紀、後漢の滅亡後の歴史物語。
  2. 三国は、魏・呉・蜀を言う。
漢(後漢)帝国の末裔、劉備玄徳と、血を分けた兄弟にも類する諸葛亮孔明・関羽雲長・張飛翼徳らを中心としたストーリーの展開には、この利爺の年代でも心沸き立つものがある。
  1. 赤壁の戦い=呉、蜀の連合軍と曹操の率いる魏との戦い。
  2. 蜀の武将「趙雲」の活躍も見逃してはならない。

箇条書きの番号が文章の段落をまたがって、連続した表記になっていますね。

そのほかに
  1. 那覇市
  2. 沖縄市
  3. 浦添市
  4. 宜野湾市
のように、途中から連番を変更するときには

<ol type="1">
 <li>那覇市
 <li>沖縄市
 <li value="5">浦添市
 <li>宜野湾市
</ol>

<li>タグに value属性 を指定します。
value属性で番号を変更すると、以降の<li>要素は変更した番号から連番で表示されます。


次回の「箇条書き」は

●マーカーや番号の表示位置
●HTMLでの(マーカーの代わりの)画像表示

を確認します。




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

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



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

メールアドレス:

ホームページアドレス:

コメント:

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


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

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

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