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



2010年07月12日

箇条書きの基本(1)

■ 5-26 文章の整理とビジュアル化

ブログの内容を文章だけで表現するには限界がありますね。

訪問したユーザーは、「読む」と同時に「見る」こともしています。

内容の「区切り(段落)」や文章の「グループ化」を行い、視覚的に表現することは
「読む理解」と「見る理解」の双方のメリットが生かされ、分かりやい文章としてとらえられます。

前回の「段組み」を使う方法も、分かりやすい文章の構成として確認しましたが、
ほかの要約の方法には「箇条書き」もあります。

「箇条書き」は
●情報を簡潔にまとめ、読みやすくするとともに
●要点をまとめることで見やすくする、ビジュアル的な側面。
●箇条書きに、記事内の項目をリンクするメニューの役割も果たせます。

読み手側に要点を示し、記事を印象づけることは、ブログの「欠かせない命題」のひとつです。


■ 箇条書きの種類

HTMLで作成する箇条書きには次の3種類があります。

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

    注
   ●箇条書きタグは「ブロック」要素です。

………

@ 順序なし箇条書き

単に「箇条書き」と言う時は、順序なしのことです。

【順序なし(箇条書き)の表示形式】
沖縄県の市町村・人口・世帯数   (2009年統計)
  • 那覇市
    • 人口=312、000人
      • 世帯数=122,000世帯
  • 沖縄市


【<ul>要素と<li>要素】

順序無し箇条書きリストを作るタグは
<ul>と<li>を組み合わせて使います。

  ul = Unordered lists(order = 順番・順序  un = 否定)
  li = list item(list = 表・名簿  item = 項目・品目) 

    注
   ●ul は「Unnumbered lists」という説明もあります。

●<ul>要素は箇条書きにするリストの範囲を、範囲の中に<li>要素が入る形になります。
●<li>要素は各項目です。

<ul>
<li> 項目 </li>
<li> 項目 </li>
</ul>

の形式をとります。

●各項目(リスト)の先頭に黒丸のマーカー(●)が自動的に表示されます。

●順序無しの箇条書きは
項目の順番を気にしなくてもいいような情報の場合に適しています。

箇条書きはいくつかの項目の並びですね。

    注
    ●閉めタグの</li>は省略することが出来ます。     
    ●</ul>の閉めタグは省略できません。


【<ul>タグの使用例と表示】
【タグ使用例】

沖縄県の市町村
<ul>
<li>那覇市</li>
<li>沖縄市</li>
<li>浦添市</li>
<li>宜野湾市</li>
</ul>

【タグの記入】
※タグの記入は、各タグ、各項目を改行無しの形で記入します。

沖縄県の市町村<ul><li>那覇市</li><li>沖縄市</li><li>浦添市</li><li>宜野湾</li></ul>
【表示】

沖縄県の市町村
  • 那覇市

  • 沖縄市

  • 浦添市

  • 宜野湾市


    注
   ●箇条書きの<ul><ol><dl>タグはブロック要素のため、
    箇条書き項目の前後に一行の空白行が自動的に表示されます。

   ●タグの記入は、改行無しの記入になります。

   
【<li>要素に入り子の形式】

●<li>要素の中に、<ul>で括った「箇条書き」を入れることもできます。
 その形を「入り子」と言います。

●入り子にした新しい箇条書きのマーカーは、親の黒丸(●)に対して白丸(○)を表示します。

●その白丸の<li>要素の中にも、また入り子の形式で新しい箇条書きを挟むことができます。マーカーは黒四角(■)です。

箇条書き:入り子形式
【タグ使用例】

沖縄県の市町村名
<ul>
<li>那覇市
<ul>
<li>
人口約31万2千人</li>
</ul>

</li>

<li>沖縄市
<ul>
<li>
人口約13万人</li>
</ul>

</li>
</ul>


【表示例】
沖縄県の市町村
  • 那覇市
    • 人口約31万2千人
  • 沖縄市
    • 人口約13万人

標準マーカーの種類(デフォルト値)は、上位の階層から
黒丸(●)、白丸(○)、黒四角(■)の順で表示されます。

このデフォルトで表示されるマーカーを、CSSの「list-style-type」プロパティ
で変更したり、画像に差し替えたりすることができます。

シリーズの後半で確認します。


………

A 順序あり箇条書き
  (連番つき箇条書きとも言います)

【順序ありの表示形式】
沖縄県の市町村名・人口・世帯数   (2009年統計)
  1. 那覇市
    1. 人口=312、000人
      1. 世帯数=122,000世帯
  2. 沖縄市


「順序あり箇条書き」は項目の頭に順番を表す1,2の数字がデフォルト値です。
下位の階層にも同じ数字が振られます。


【<ol要素>と<li>要素】

●<ol>タグは、項目の頭に1,2の数字を表示します。

振られた番号に項目の重要度の順番を含みます。

<ol>
<li> 項目 </li>
<li> 項目 </li>
</ol>
の形式をとります。<ul>要素と同じですね。

    注
   ●<ol> = Ordered lists 「order=順番・順序・秩序」
   ●<ol>要素もブロック要素です。

順序あり箇条書き
【タグ使用例】

沖縄県の市町村
<ol>
<li>那覇市</li>
<li>沖縄市</li>
<li>浦添市</li>
<li>宜野湾市</li>
</ol>

【タグの記入】
※タグは<ul>と同じように改行無しの形で記入します。
【表示例】
沖縄県の市町村
  1. 那覇市
  2. 沖縄市
  3. 浦添市
  4. 宜野湾市

●<li>要素の中に
順序あり箇条書き<ol>や
順序なし箇条書き<ul>で括った「箇条書き」を入れることもできます。

●入り子の箇条書き<ol>の数字番号は親と同じ数字表記になります。
●入り子の「順序なし箇条書き<ul>」ではリストにマーカーが表示されます。
●入り子の数には制限は有りませんが、読みやすさを考え使用しましょう。

順序あり箇条書き:入り子形式
【タグ使用例】

沖縄県の市町村
<ol>
<li>那覇市
<ol>
<li>
県庁所在地</li>
<li>人口=約31万2千人</li>
</ol>

</li>

<li>沖縄市
<ul>
<li>
那覇市に次ぐ第二の市</li>
<li>
人口=約13万人</li>
</ul>

</li>

<li>浦添市</li>
<li>宜野湾市</li>
</ol>


【表示例】
沖縄県の市町村
  1. 那覇市
    1. 沖縄県の県庁所在地
    2. 人口=約32万人
  2. 沖縄市
    • 那覇市に次ぐ市
    • 人口=約13万人
  3. 浦添市
  4. 宜野湾市

リストで表記される「1、2」などの算用数字は
CSSの設定でアルファベット「A、B」「a、b」やローマ数字「T、U」「@、A」などに変更ができます。

箇条書きでリストの数字開始番号(途中の数字から始まるリストなど)
の指定も可能です。


………
B 定義型箇条書き

辞書のように「見出し語」と
それに対応する「説明文」を対にして一覧表示する形式を言い、定義リスト、用語リストとも言います。

<dl>、<dt>、<dd>の三つのタグを使います。

 dl = definition lists     「definition = 定義・語義・限定」
 dt = definition term     「term = 期間・任期・関係・間がら」
 dd = definition description  「description = 記述・描写」

【定義型箇条書きの表示形式】
沖縄県の市町村
那覇市
沖縄県の県庁所在地、人口約32万2千人。
………
沖縄市
………。


【<dl要素>】

<dt>で「定義名」
<dd>で「定義の説明」を示し、
それを定義型リストとして<dl>で括る形式のことです。

<dl>の中に直接入れるものは
「見出し(定義名)」を表す<dt>と、それに対応する
「説明文(定義の説明)」の<dd>の要素の2種類です。

基本的な使い方では

<dl>
<dt> 見出し(定義名) </dt>
<dd> 説明文(定義の説明) </dd>
</dl>

<dl>で括る形式です。

<dd>には、さらに入り子として、他の段落や箇条書きを入れることができます。

定義型箇条書き
【タグ使用例】

沖縄県の市町村
<dl>
<dt>那覇市</dt>
<dd>沖縄県の県庁所在地、人口約31万2千人。<br>戦後に隣接する首里市、真和志市、小禄村が合併。</dd>
<dt>沖縄市</dt>
<dd>米空軍、嘉手納飛行場の東から南側に隣接する市。<br>カタカナ表記の「コザ市」から1974年に美里村との合併を機に「沖縄市」と改名。</dd>
</dl>


【表示例】
沖縄県の市町村
那覇市
沖縄県の県庁所在地、人口約32万人。
戦後に隣接する首里市、真和志市、小禄村が合併。

沖縄市
米空軍、嘉手納飛行場の東から南側に隣接する市。
カタカナ表記の「コザ市」から1974年に美里村との合併を機に「沖縄市」と改称。

定義型箇条書きは
見出しがあり、本文が続く辞書のような書き方になっていますね。

形式的には、縦型のテーブルを配置したようになっています。

この定義型箇条書きの
 ●<dt> 要素は項目の「見出し」を表示する意味から
  <ul><ol><dl>の要素は入り子にはなれませんが、
 ●<li>要素や<dd> 要素の中には
  <ul><ol><dl>の各要素を入れることができます。


@ 順序なし箇条書き  
A 順序あり箇条書き  
B 定義型箇条書き

の箇条書きには、各々の特徴がありますね。

それらの特性を上手く使用して
階層構造的な情報を整理して見やすく読みやすくすることに努めましょう。

次回は具体的に
HTMLタグ、CSSと絡んだプロパティを使用して、マーカーや数字の変更などを確認します。




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

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




×

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