箇条書き 【<ul>タグ】:HTML入門

ブログが作りたい!HTML入門 > 箇条書き 【<ul>タグ】:HTML入門

箇条書き 【<ul>タグ】:HTML入門

箇条書き 【<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>タグだけを覚えておけば、大丈夫です。

▲ページの先頭に戻る

本にたとえてイメージする

それでは、あなたが持っている本の中から、箇条書きで書かれている箇所を、探し出してみてください。

そして、その箇条書きの文章が、もし箇条書きになっていなかったら、どんな印象を受けるかイメージしてみましょう。

箇条書きタグ(<ul>タグ)

例えば、写真に使わせていただいた、この本(『ユーザ中心ウェブサイト戦略』)のP64にウェブビジネス成功のポイントとして、次のように書かれています。(以下、引用させていただきます)

  • ユーザの接点と振る舞いを総合的に把握
  • ユーザ視点でサイトの価値を定義
  • 誠実な対応と徹底した情報開示
  • 主導権をユーザに付与
  • 組織、業務プロセス、システムの最適化
  • スピーディな対応の実現
  • ユーザ視点での画面設計

これが、もし次のように、ひとつの文章であったなら、読みにくさはなかなかのものです。

ウェブビジネス成功のポイントは、ユーザの接点と振る舞いを総合的に把握し、ユーザ視点でサイトの価値を定義し、誠実な対応と徹底した情報開示し、主導権をユーザに付与し、組織、業務プロセス、システムの最適化をし、スピーディな対応の実現し、ユーザ視点での画面設計をすることです。

さらに、本や雑誌で文章を読む場合よりも、ネットで文章を読む方が、はるかに疲れるそうです。(経験上、私もそう思います)

箇条書きにすると、話のポイントが整理しやすく、また、読み手も読みやすくなります。

うまく、箇条書きを使えば、みんな幸せです。<ul>タグを覚えましょう!

▲ページの先頭に戻る

実習 <ul>タグ

1:箇条書きしてみる

(01)

例えば、次のような文章があるとします。

わたしは、ジャニヲタです。最近おしているのは、山P(山下智久くん)でしょ、斗真くん(生田斗真くん)でしょ、それから、まつじゅん(松本潤くん)も好きかなぁ。

これを箇条書きにすると、HTMLコードは、次のようになります。

(02)

ブラウザで表示してみましょう。

ブラウザで表示

好きなのが3人であること、そして、3人の中でも順位付けがあることが、自然と相手に伝わります。

つまり、相手に自分が何を伝えたいのかが、分かりやすくなります。

「最後のまとめ」として、記事の要点などを書くのも良いかもしれません。<ul>タグと、<li>タグを覚えて、効果的に使いましょう。

▲ページの先頭に戻る

次回予告

次回は、タグをグループにまとめる<div>タグについて書きます。

その後、「HTML入門まとめ」と、その他タグについて書く予定です。そろそろ、CSS入門がはじまります。

▲ページの先頭に戻る

関連記事

HTMLに関連する記事を、ご紹介します。

▲ページの先頭に戻る

作成日:2008/03/26 更新日:2008/03/26

« 「表を作る 【<table>タグ】」|「グループ化 【<div>タグ】」 »

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

No title

はじめまして。いつも参考にさせて頂いています。
丁寧で分かりやすいので勉強になるのと同時に文章の構成の仕方参考になっています!

はじめましてーん♪

フルサポートさん、こんばんは!( ・∀・)ノぐいぶに
コメントありがとうございます。

いつもご利用いただきましてありがとうございます。

へー御社さまは、整骨院の内装などがお得意でいらっしゃるのですね。
どの分野でも専門性が大切な時代なのでしょうね。

私もがんばって専門性を高めなきゃだわ。((o(´∀`)o))

今後もよろしくお願いしまーす。

はじめまして

こんにちは。
自分のブログをいろいろカスタムしたく、こちらのブログにたどりつきました。
以前dream weaverを使ったことがありましたが、htmlやcssの基本を全く理解していませんでした。
KumaCrowさんのブログは、とてもわかりやすく説明をされているので、楽しく学べます!!
こちらで勉強しつつ、自分のブログを素敵なものにカスタマイズしたいと思います!!

はじめまして♪

きのこぱんさん、こんにちは!( ・∀・)ノ
コメントありがとうございます。

お役にたっているようで、何よりです。
素敵なブログになるといいですねー。(´▽`)♪

承認待ちコメント

このコメントは管理者の承認待ちです

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/247-c6c4b58d
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて