ここではメニューや箇条書きで使う「リスト」タグを説明します。分かりやすく例えると目次のような文章を作成したいときに指定するタグです。その他メニューボタンなどにも使います。
こんにちは！あーるくんです。ヾ ^_^♪
Adobe提携校でWEBクリエイター講師を２年ほどしていました。しっかりと学べるように記事を書いていくので閲覧よろしくお願い致します。
もくじメニューや箇条書きで利用するリストタグ｜Webデザイナー講座
この目次もリストタグなのね^^
リストタグの記述方法について
リストタグはこれまで紹介したタグと使い方が少し違います。複数のタグを組み合わせて記述することが必要になります。
複数のタグとは、どういうことなんだろう？
箇条書きを記述するulタグとliタグ
| タグ | 意味 |
|---|---|
| <ul></ul> | 箇条書きを記述するときに使用する。リストタグを挟むように記述する。 |
| <li></li> | リストの項目内容を書く為のタグ。箇条書きの項目を記述するために使用します。 |
liタグとは単独で記述するものではなく、ulタグとセットで記述するタグとなります。これはルールなので覚えておきましょう！
※ リストタグはよく使います！
リストタグの記述例
＝＝＝【会社を訪問するときの心得】＝＝＝
- 立ち上がって挨拶を
- 名刺の渡し方
- 打ち合わせ後、すみやかに帰る
- 丁寧なあいさつ
- 時間に遅れそうな時は…
- 案内してくれた人にお礼を伝える
例題の文章です。タイトルがありその下に箇条書の文章が並んでいます。このようにリストタグとは箇条書きを書くために用いられるタグとなります。
HTMLの記述方法
| <h3>【会社を訪問するときの心得】</h3> <ul> <li>立ち上がって挨拶を</li> <li>名刺の渡し方</li> <li>打ち合わせ後、すみやかに帰る</li> <li>丁寧なあいさつ</li> <li>時間に遅れそうな時は…</li> <li>案内してくれた人にお礼を伝える</li> </ul> |
liタグを利用すると・（点）が自動的に表示します。CSSで番号や◯、□などに変更もできます。不要な場合は点を消すこともできます。
・（点）を連番にすることも可能
- 立ち上がって挨拶を
- 名刺の渡し方
- 打ち合わせ後、すみやかに帰る
- 丁寧なあいさつ
- 時間に遅れそうな時は…
- 案内してくれた人にお礼を伝える
まとめ
リストタグは箇条書きを記述するために利用する。ulタグとliタグはいつもセットで記述する必要がある。
リストタグはCSSで装飾を加えることも多いタグです。デザインを担うCSSはHTMLの学習が終わりましたら説明していきます。まずは骨組みであるHTMLの記述を習得しましょう！