だれでもWEBマスター – ページ 4

□HTMLで作るホームページ・実践編です。
□もっとタグで書いてみよう

準備

■リスト・タグの説明

■リストを作るネタをさがそう

制作

■ リスト・タグで書いてみよう

■2段階リストを作ろう

■リストの行頭アイコン

活用

■リストを使ったWEBページ(更新中）

■

HTMLタグで作るホームページ
だれでもHTML/リスト・タグ編

■リスト・タグの説明　
箇条書きリスト
<ul></ul>      Unordered list
<li></li>        List Item
<ul></ul> で <li></li>を囲みます。
<ul>　
     <li> 例A　</li>　
     <li> 例B　</li>　
     <li> 例C　</li>　
</ul>
ブラウザ表示
例A例B例C
番号付き(順番）リスト<ol>　</ol>      Ordered List

<li>　</li>       List Item
<ol></ol> で <li></li>を囲みます。
リストの数だけ、<li></li> を並べて、内容を囲みます。
<ol>　
     <li> 例A　</li>　
     <li> 例B　</li>　
     <li> 例C　</li>　
</ol>
ブラウザ表示
例A例B例C

ＢＡＣＫ

■リストを作るネタをさがそう
たとえば、トップページのインデックスメニューがHTMLのリストで書かれます。
トップ、日記、イベントMAP、動画・フォト、プロフィール、SNS、問合せ
ショッピングサイトのカテゴリなどもリストで書かれます。
フード、ファッション、インテリア、ゲーム・メディア、スポーツ・アウトドア
あるいは、勉強中の方は教科、スポーツの種目やチーム名、食堂のメニュー等など
得意な専門テーマを選んで、調べたい内容をざっくりカテゴリ別にリストアップしておくと、メモ書きだけでWEBページになります。私的なWEBページを作りたくなってくるかもしれません。
また、カテゴリ別にお気に入りページURLのリンク集ページを作るのも便利だと思います。WEBページは、公開することでなにより本人用の備忘録、日常的に役立つ参考資料になります。
ページコンテンツを見出し階層と、本文の内容をリスト・タグで囲むことで、見栄えよく配置できます。テーブル・タグでページレイアウトをするより、リストを多様する傾向が見られます。
リスト・タグを用いると、スタイルシートでWEBページのレスポンシブ対応（PCやモバイル端末など異なる画面サイズに合わせてレイアウトを切り替える仕組み）が容易になります。PCでトップページの横長ナビゲーションメニューをスマホで見ると、縦長に並んでいたりします。

ＢＡＣＫ

■ リスト・タグで書いてみよう

＊メモ帳などテキストエディタに「準備」で読んだHTMLタグを入力練習したり、<ul> から </ul> まで、あるいは、<ol> から </ol> までを範囲選択してコピペ（コピー＆ペースト）して「名前を付けて保存」、その際、拡張子を.htmlにします。

トップ、日記、イベントMAP、動画・フォト、プロフィール、SNS、問合せ箇条書きリスト
<ul>　
    <li> トップ </li>
    <li> 日記 </li>
    <li> イベントMAP </li>
    <li> 動画・フォト </li>
    <li> プロフィール </li>
    <li> SNS　</li >　
    <li> 問合せ </li>　
</ul>

WEBブラウザで、それぞれ以下のようになっていると思います。

箇条書きリスト
トップ日記イベントMAP動画・フォトプロフィールSNS問合せ
フード、ファッション、インテリア、ゲーム・メディア、スポーツ・アウトドア番号付き(順番）リスト
<ol>　
   <li> フード</li>
   <li> ファッション</li >
   <li> インテリア</li >
   <li>ゲーム・メディア</li>
   <li>スポーツ・アウトドア</li>
   <li> 　</li>　
   <li> 　</li>　
</ol>
番号付きリスト
フードファッションインテリアゲーム・メディアスポーツ・アウトドア

ＢＡＣＫ

■ 2段階リストを作ろう
2段階のリストを作ります。
親リストの<li>　</li> の中に、別の出来上がった子リストを挿入して、囲みます。
<ul>　
     <li>親リスト　
  <ul>
<li>子リスト</li>　
  </ul>
     </li>　
</ul>
　親リスト　子リスト　　親リストに、子リスト（各データ3個）を追加した例です。
親リストは黒字、子リストは青字で書いています。

「フード」の子リストは　<ol>　で番号付き、
「ファッション」の子リストは　<ul> で番号なし箇条書き　で書いてみます。<ol>　
     <li>フード　
  <ol>
<li>和食</li>　
<li>洋食</li>　
<li>中華</li>　
  </ol>
     </li>　
     <li> ファッション
    <ul>
<li>メンズ</li><li> レディス</li><li> キッズ</li>　
    </ul>
     </li>　
     <li> インテリア　</li>　
     <li> ゲーム・メディア　</li>　
     <li> スポーツ・アウトドア　</li>　
</ol>
ブラウザには以下のように表示されています。　フード和食洋食中華　ファッションメンズレディスキッズ　インテリア　ゲーム・メディア　スポーツ・アウトドア　
ちなみに、3段階でも同様に作ることができます。
<ul>　
     <li>親リスト　
  <ul>
<li>子リスト
  <ul>
<li>孫リスト</li>　
  </ul>
</li>　
  </ul>
     </li>
</ul>
　親リスト　子リスト孫リスト　　　

ＢＡＣＫ

■ リストの行頭アイコン
箇条書きリスト・タグに、簡単なスタイルシートを追加して、
リストの行頭のアイコンを消す(非表示にする）ことができます。
<ul > </ul>　囲んで作ったリストで
style=”list-style: none;”
list-style の値を　none (なし）に設定します。

以下のようにスタイルシートを記述します。<ul style=”list-style: none;”>　
    <li> トップ </li>
    <li> 日記 </li>
    <li> プロフ </li>
</ul>

行頭アイコン（記号）を変えることもできます。
以下のように、　type＝” “　で記述します。

白丸 circle<ul type=”circle”>　
    <li> トップ </li>
    <li> 日記 </li>
    <li> プロフ </li>
</ul>
トップ日記プロフ
四角　square<ul type=”square”>　
    <li> トップ </li>
    <li> 日記 </li>
    <li> プロフ </li>
</ul>
トップ日記プロフ画像アイコンにする場合 (例　star.png）
スタイルシートで　list-style-image　を使って、画像の場所を指定します。

list-style-image: url(“画像フォルダ/画像名”);
<ul style=”list-style-image: url(‘star.png’);”>
トップ日記プロフ

ＢＡＣＫ

■ リストを使ったWEBページの活用

ＢＡＣＫ

カテゴリー: だれでもWEBマスター

だれでもHTML【リスト・タグ編】