olとulタグはリストを作る要素です。olは順番を表示し、ulは順不同のリストを作る際に利用します。
HTML5になり追加された属性も掲載しています。
olタグ
カテゴリ | リスト |
---|---|
タグ | <ol></ol> |
機能 | 番号順のリストを作ります |
属性 | start reversed type |
使用例 |
---|
<ol><li></li></ol> |
olタグの説明
リストを作るときに使用します。下の例のように記述します。するとリストの行頭に順番が表示されます。
- リスト
- リスト
- リスト
- リスト
- リスト
- リスト
start
リストのスタート番号を決めることができます。
- リスト
- リスト
- リスト
start属性のプレビュー
- リスト
- リスト
- リスト
reversed
リストは上から順番に重要な順に番号をつけるものですが、reversedを指定すると逆に表示されます。
- リスト
- リスト
- リスト
start属性のプレビュー
- リスト
- リスト
- リスト
リストを使ったホームページ作成のヒント
olタグを使ったホームページ作成
<ol> は必須のタグですが、使い方は文章内の項目を箇条書きにして説明したい場合に使うのが基本的な使い方です。よく見かける例としはブログの目次に利用されています。
ページのコンテンツの上部にこれから説明するコンテンツの内容を要約して、表示することで、このページが何について書かれているかを伝える役目もあります。
こちらの画像のようにページ上部に目次があるとわかりやすい。
<ol><ul>で書かれたものはGoogleが重要度の高い文字として認識するといわれています。
ulタグ
カテゴリ | リスト |
---|---|
タグ | <ul></ul> |
機能 | 順不同のリストを作ります |
属性 | なし |
使用例 |
---|
<ul><li></li></ul> |
ulタグ説明
順不同(番号のない丸や四角等)のリストを作るときに使用します。行頭記号のスタイルはCSSで指定します。また、検索エンジン上では重要な項目として認識されます。
グローバルナビゲーションやローカルナビゲーションを作るときににも使用します。スタイルシート(CSS)でデザインを作ります。
ulタグを使ったホームページ作成
グローバルナビゲーションやサイドメニューを作る際にも<ul>を使うのが一般的です。パンくずナビゲーションを作る際にも利用できます。
グローバルナビゲーションを作りたい方はこちらの記事を参考にしてください。
グローバルナビゲーションの作り方
また、行頭記号をチェックマークなどの画像にする方法もよく使います。スタイルシートの「list-style-image」などを使いますが、フォントやアイコンのサイズによって、ずれが生じます。
そのような時には「background」にアイコンを設定して、「margin/paddin/line-height」などで調整します。詳しくは下記記事にまとめてあります。
「ずれないリスト画像の設定方法」もご覧ください。
入れ子リストの場合
- 1-1リスト
- 1-2リスト
- 2-1リスト
- 2-2リスト
- 1-3リスト
- 1-1リスト
- 1-2リスト
- 2-1リスト
- 2-2リスト
- 1-3リスト
入れ子のリストの表示がうまくいかない場合は「CSSリストを入れ子にするとサイズが大きくなって困ったことはありませんか?」記事をご覧ください。