[15-1] リストを作ってみよう ( ul (番号無しリスト))

今日は、ul(番号無しリスト)を作ってみましょう。
リストとは「顧客リスト」とか「買い物リスト」とかの、あのリストです。

使用する要素 <ul> 〜 </ul>
<li> 〜 </li>

リストの種類を、まずは見てみましょう

リストを作る要素は、下の3種類があります。

ul 番号無しリスト(順番無し) Unordered List の略
ol 番号付きリスト(順番がある) Ordered List の略
dl 記述リスト Description List の略
(HTML5でDefinitionからこれ↑に変更だそう。)

「ul(番号無しリスト)」は、順位が無い一般的な箇条書きを示すときに使います。
これに対してランキングなどで「順番」をつける場合は「ol (番号付きリスト)」を使います。
「ol (番号付きリスト)」は次回に。

サンプルのダウンロードはこちら

今日のサンプルHTMLです。
honttoni15-1.html ★画像をクリックするとHTMLファイルを開きます(別ウィンドウで開く)
★開いたHTMLのソースをブラウザで読んでもらえばOKですが、
めんどくさい人は、こちらから↓zipファイルをダウンロードできます。
→本日のサンプル(sample15-1set.zip (4k))をダウンロード

★ブラウザでHTMLやCSSのソースを見るには…「ほんっとにはじめてのHTML-[14-1] ブラウザでソースを見る」をご覧ください

ul 要素で「番号無しリスト」を作ろう

構造は超簡単。下記のように、<ul>要素の中に<li>要素を入れるだけ。
(ちなみに li は「List Item」の略です。)
li 要素は、ul の中に必ず1個は入ってなきゃいけません( li 無しじゃ意味ないし)。

<ul>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
</ul>

上記のHTMLソースをブラウザで見ると、このようになります。
ブラウザのデフォルトではリスト記号は「●」です。(discと言います)

  • リストアイテム
  • リストアイテム
  • リストアイテム

リスト記号は、CSSで変更します。

「●」などのリストの先頭に付いてる「リスト記号」は、CSSで変更できます。
「list-style」というプロパティがあって、あらかじめ下記のスタイルが用意
されています。

  • disc (●塗りつぶした円)=ブラウザのデフォルトです)
  • circle(○線で描いた円)
  • square(■塗りつぶした四角)
  • none (なし)

★そのページで使う全部のリストを、すべて同じリスト記号にしたい場合は、
下記のように、li要素にダイレクトにCSSを指定(idやclass属性を設定しないってことです。)

li {
	list-style: circle;
}

これだけで、すべてのリストのリスト記号がcircleになります。

★そのページ内の全部のリストでなく、特定のリストだけリスト記号を変えたい場合は、
ul要素に「id」(または class) をつけてから、CSSを指定します。
下の例は、ul要素に「sample-circle」というid名をつけています。
リスト記号の指定は li要素でします。ul要素ではできません。

ul#sample-circle{
	margin: 0px;
}
ul#sample-circle li {
	list-style: circle;
}

HTMLソースは下記。ul に id「sample-circle」を指定しました。

<ul id="sample-circle">
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
</ul> 

li でなく ul に id名を付けるのがミソですよ。
ul はリスト全体を囲むので、1回id名を書けばOKです(上記のように)が、
li にCSS指定するならidでなくclass名を付けますが(idは1ページに1回しか使えないので)
そんなことしたら、li のぜーんぶにclass名を書くハメになっちゃって大変です。

idとclassの違いに関しては「CSSレイアウトメモ:TIPS_セレクタとは」をご参照ください。

ブラウザでプレビューするとこのようにリスト記号がcircleになります。

  • リストアイテム
  • リストアイテム
  • リストアイテム

honttoni15-1.html 今日のサンプルHTML後半でも、リスト記号のidやclassによる指定を詳しめに説明しています。 こっちも見てもらった方がわかりやすいかも。
画像をクリックするとHTMLファイルを開きます(別ウィンドウで開く)

CSSでもっといろいろ指定できます

もうおわかりだと思いますが、ulもliもブロック要素ですので、CSSでもっといろいろビジュアル面を指定することができます。
リスト記号をオリジナルの画像にしたり。
例えばこんな感じ

  • リストアイテム
  • リストアイテム
  • リストアイテム

また、リストは、メニュー(ナビゲーション)としても使うことができます。
その場合は li要素の内側に a要素をしこんで、各HTMLページへジャンプするようにします。
こういう時は、li要素をメニューボタンらしく見せたいですよね。それにはCSSを使います。
これは、[15-4] でやってみましょう。

リストはグルーピングの役割です(div や p と同じ)

リスト要素(ul, ol, li, dl, dt, dd)はすべてブロックレベル要素です。
ブロックレベル要素は、その前後の行が改行されて、箱(ブロック)っぽくなります。

★「ブロックレベル要素」については…「ほんっとにはじめてのHTML-[7]<div>や<span>で特定の範囲を指定しよう」
 ご覧ください。

前にやった、h1〜h6 の見出し要素や、a 要素もブロック要素でした。
でも、h1〜h6の要素は「見出し」、a 要素は「リンク」という役割がありました。

★「h1〜h6」については…「ほんっとにはじめてのHTML-[4] テキストに見出し(<h1>から<h6>)をつけてみよう」を、
★「a要素」については…「ほんっとにはじめてのHTML-[11-1] 他のページにリンクしよう」をご覧ください。

「リスト要素(ul, ol, li, dl, dt, dd)」の役割は、前にやった「div」や「p」と同じ。
「内容をまとめる」=「グルーピング」の役割
です。
同じグルーピングの役割でも、divは汎用ブロック、pは段落、ul ol dlなどはリストを受け持ちます。

★「div要素」については…「ほんっとにはじめてのHTML-[7]<div>や<span>で特定の範囲を指定しよう」を、
★「p要素」については…「ほんっとにはじめてのHTML-[6] テキストに段落<p>を作ってみよう」をご覧ください。

次回予告

次回は、ol(番号付きリスト)をやりましょう。今日の ul と違って、番号が付くリストです。
「ランキング」とか「○○の作り方」などで、順位・順番があるリストを作るときに使用。
リスト記号でなく「リスト番号」がブラウザのデフォルトで付くようになっているリストです。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2017/08 | 09
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.