ulタグolタグliタグについて - 西智子のホームページのアクセスアップ講座

ulタグolタグliタグはリストタグと呼ばれており各ページへのナビゲーションやパンくずリスト箇条書き表示する際に使います。

タグ	説明
ulタグ	unordered list / 順序のないリストを表示する
olタグ	ordered list / 順序のあるリストを表示する
liタグ	list item / リストの各項目を表記する

ulタグで順序のないリストを表示する場合リスト表示の前に■(ul type=”square”)●(ul type=”disc”)○(ul type=”circle”)を指定することができます。

例えば…
●ピカチュウ
●アルセウス
●ギラティナ
●ディアルガ
●パルキア
と表示したい場合には以下のように書きます。

<ul type="disc">
<li>ピカチュウ</li>
<li>アルセウス</li>
<li>ギラティナ</li>
<li>ディアルガ</li>
<li>パルキア</li>
</ul>

olタグ順序のあるリストを表示する場合リスト表示の前に数字やアルファベット小文字(ol type=”a”)アルファベット大文字(ol type=”A”)ローマ数字小文字(ol type=”i”)ローマ数字大文字(ol type=”I”)を指定することができます。

例えば…
1.ピカチュウ
2.アルセウス
3.ギラティナ
4.ディアルガ
5.パルキア
と表示したい場合には以下のように書きます。

<ol type="1">
<li>ピカチュウ</li>
<li>アルセウス</li>
<li>ギラティナ</li>
<li>ディアルガ</li>
<li>パルキア</li>
</ol>

例えば「西智子のホームページのアクセスアップ講座」では次のようになります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-script-type" content="text/javascript" />
<meta http-equiv="Content-style-type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="robots" content="INDEX,FOLLOW" />
<meta name="author" content="西智子のホームページのアクセスアップ講座" />
<meta name="copyright" content="Copyright (c) 2009 nishi-shinjuku.net" />
<meta name="coverage" content="japan" />
<meta name="Targeted Geographic Area" content="japan" />
<meta name="classification" content="general,computers,internet,personal" />
<meta name="rating" content="general" />
<meta name="Keywords" content="西智子,ホームページ,アクセスアップ,講座" />
<meta name="Description" content="西智子のホームページのアクセスアップ講座は、実戦的ホームページの制作からSEO、SEM、広告戦略まで余すところなく公開します。" />
<meta name="slurp" content="NOYDIR" />
<meta name="robots" content="NOODP" />
<title>西智子のホームページのアクセスアップ講座</title>
</head>
<body>
<h1>西智子のホームページのアクセスアップ講座</h1>
<ul>
<li>ホームページ制作講座</li>
<li>SEO・SEM講座</li>
<li>SEOツール講座</li>
<li>広告講座</li>
<li>失敗講座</li>
<li>リンク集</li>
<li>ブログ</li>
</ul>
<ul>
<li>トップ</li>
<li>サイトマップ</li>
<li>検索</li>
</ul>
<h2>プロのノウハウを公開する理由　インターネットとフリー（無償）の思想</h2>
<h3>インターネットの普及</h3>
<p>1995年、Windows95の登場によって、インターネットは爆発的に普及しました。<br />
インターネットに<strong>アクセス</strong>すれば、様々な<strong>ホームページ</strong>から知りたい情報をいつでも入手できる。そんな手軽さがインターネット普及の大きな要因であることは間違いありません。<br />
インターネット上で使われている様々な技術や管理制度の多くは、一般のユーザーに公開されているものが多く、インターネットが通信網としてその地位を確立するまでの歴史的経緯から、インターネット網の中には特定の集中した責任主体は存在しません。<br />
誰もが平等にアクセスする事ができ、様々なホームページを自由に閲覧することができるのです。<br />
インターネットの根底にあるこの「フリー（無償）の思想」に基づいて、通信網にアクセスすれば有益な情報を「フリー（無料）」で探し出すことができるという利便性こそが、インターネットが普及した要因であると言えます。</p>
<h3>インターネット利用者の増加</h3>
<p>インターネット利用者は、確実に増加を続けています。<br />
総務省の調査では、平成20年度末インターネット利用者は9,091万人。日本人の75.3%が何らかの形でインターネットを利用しているのです。（平成20年度通信利用動向調査）利用者層は、13歳から40歳代までが9割以上、50代が8割以上、60代前半は6割以上で、いずれの世代も前の年度より増え続けています。<br />
より使いやすいパソコン、その他の通信機器のおかげで、より多くの人が、より気軽に、インターネットを利用して情報を得ているのです。</p>
<h3>ホームページの利用とアクセスアップ</h3>
<p>ホームページを通して自社製品やサービスを販売する企業や個人が増えました。<br />
しかし、インターネットという通信網内に存在する膨大な数のホームページの中、利用者に閲覧されるのは、検索サイトで上位表示されるごく僅かな数のホームページにすぎません。<br />
どうすれば検索サイトで上位表示されるのか？アクセスアップのためには、何をすればよいのか？<br />
インターネット利用者に見てもらえる地位を確保するには？</p>
<p>私、<strong>鈴木智子</strong>が代表を務める株式会社西新宿ドットネットでは、2003年の創業以来、ホームページの制作からアクセスアップのための<strong>SEO</strong>までをトータルパッケージで提供してきました。優れた商品、サービスに関する情報をより多くの人々に知ってほしい。これは、商品・サービスを提供する企業のビジネスチャンスが広がるだけでなく、消費者にとっても有益な情報だからです。SEO、SEMでアクセスアップ！<br />
2003年以降インターネットの動向を実際の現場で見てきた、ホームページのアクセスアップ講座を、すべてお見せします。</p>
<ul>
<li>トップ</li>
<li>ホームページ制作講座</li>
<li>SEO・SEM講座</li>
<li>SEOツール講座</li>
<li>広告講座</li>
<li>失敗講座</li>
<li>リンク集</li>
<li>ブログ</li>
<li>サイトマップ</li>
</ul>
<p>Copyright&copy;2009 tomokos.net. Powered by nishi-shinjuku.net.</p>
<ul>
<li>株式会社西新宿ドットネット</li>
<li>メインクーンのホームページ</li>
<li>ニラジマGT</li>
</ul>
</body>
</html>

ここでは<ul type=”disc”><ol type=”1″>などhtmlで見た目を制御する方法を紹介していますが実は現在のWEB標準に反しています。
W3Cはhtml4.0以降いくつかの要素・属性を廃止非推奨要素・属性を定めました。
廃止・非推奨化されたのは主に視覚表現に関するタグでtype=”disc”や type=”1″もそのうちのひとつです。

ではどうやって見た目を制御すればいいのでしょうか？
ここで登場するのが見た目を制御するスタイルシートです。