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




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


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

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

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


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

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




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

メールアドレス:

ホームページアドレス:

コメント:

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


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

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

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