箇条書き 【<ul>タグ】：HTML入門
HTML入門（8）
今回は、箇条書きをするHTMLタグ「<ul>タグ」です。
「ウリィーー（JoJoっぽい）」って感じで、お話は、次の順番で進みます。
箇条書きタグ（<ul>タグ）とは？
1：<ul>タグの基本形
<ul>タグは、箇条書きを作成するためのタグです。
全体を<ul>〜</ul>で囲み、ひとつひとつの項目は、<li>〜</li>で囲みます。
<ul>
<li>〜</li>
<li>〜</li>
</ul>
2：箇条書きタグ（<ul>タグ）の属性
<ul>タグには、各項目のマークを変更する属性がありますが、基本的に、装飾はCSSで行います。
今後、<ul>タグの属性を使うことは考え難いので、出来るだけ覚えないようにしましょう。
3：箇条書きタグ（<ol>タグ）
また、<ul>タグに似たタグとして、<ol>タグというものもあります。
この<ol>タグは、マークのところを、数字にしてくれるタグです。
しかし、CSSにて、数字にすることが出来ますから、<ol>タグも覚える必要がありません。
つまり今回は、<ul>タグと、<li>タグだけを覚えておけば、大丈夫です。
本にたとえてイメージする
それでは、あなたが持っている本の中から、箇条書きで書かれている箇所を、探し出してみてください。
そして、その箇条書きの文章が、もし箇条書きになっていなかったら、どんな印象を受けるかイメージしてみましょう。
例えば、写真に使わせていただいた、この本（『ユーザ中心ウェブサイト戦略』）のP64にウェブビジネス成功のポイントとして、次のように書かれています。（以下、引用させていただきます）
- ユーザの接点と振る舞いを総合的に把握
- ユーザ視点でサイトの価値を定義
- 誠実な対応と徹底した情報開示
- 主導権をユーザに付与
- 組織、業務プロセス、システムの最適化
- スピーディな対応の実現
- ユーザ視点での画面設計
これが、もし次のように、ひとつの文章であったなら、読みにくさはなかなかのものです。
ウェブビジネス成功のポイントは、ユーザの接点と振る舞いを総合的に把握し、ユーザ視点でサイトの価値を定義し、誠実な対応と徹底した情報開示し、主導権をユーザに付与し、組織、業務プロセス、システムの最適化をし、スピーディな対応の実現し、ユーザ視点での画面設計をすることです。
さらに、本や雑誌で文章を読む場合よりも、ネットで文章を読む方が、はるかに疲れるそうです。（経験上、私もそう思います）
箇条書きにすると、話のポイントが整理しやすく、また、読み手も読みやすくなります。
うまく、箇条書きを使えば、みんな幸せです。<ul>タグを覚えましょう！
実習 <ul>タグ
1：箇条書きしてみる
（01）
例えば、次のような文章があるとします。
わたしは、ジャニヲタです。最近おしているのは、山P（山下智久くん）でしょ、斗真くん（生田斗真くん）でしょ、それから、まつじゅん（松本潤くん）も好きかなぁ。
これを箇条書きにすると、HTMLコードは、次のようになります。
（02）
ブラウザで表示してみましょう。
好きなのが3人であること、そして、3人の中でも順位付けがあることが、自然と相手に伝わります。
つまり、相手に自分が何を伝えたいのかが、分かりやすくなります。
「最後のまとめ」として、記事の要点などを書くのも良いかもしれません。<ul>タグと、<li>タグを覚えて、効果的に使いましょう。
次回予告
次回は、タグをグループにまとめる<div>タグについて書きます。
その後、「HTML入門まとめ」と、その他タグについて書く予定です。そろそろ、CSS入門がはじまります。
関連記事
HTMLに関連する記事を、ご紹介します。
1：カスタマイズ前
2：HTML入門
- HTML入門 はじめました
- HTMLを表示させてみよう
- 見出しを付ける 【<h>タグ】
- 文章を書く 【<p>タグ】
- 画像を使う 【<img>タグ】
- リンクさせる 【<a>タグ】
- 表を作る 【<table>タグ】
- 箇条書き 【<ul>タグ】（この記事です）
- グループ化 【<div>タグ】
- HTML入門まとめ
3：もう少しHTML
作成日：2008/03/26 更新日：2008/03/26
« 「表を作る 【<table>タグ】」｜「グループ化 【<div>タグ】」 »
コメントありがとうございます。
コメントの投稿
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/247-c6c4b58d
