Webデザインを勉強中

Webデザインを独学で勉強しています。調べたことや覚えたことをまとめます。

ブログなどで箇条書きをしたい場合に使うタグ

パソコンにコード映っている写真


こんにちは。mikulonです。今回はnav,ul,ol,liタグについてまとめます。

目的の記事へリンクしたり、複数の要素を並べて提示したい場合などには箇条書きしておきたいですよね。

今回ご紹介するタグで箇条書きでテキスト等を並べることができます。

CSSを使用することで縦書きだけでなく横書きにしてカテゴリ毎にリンクしたりもできたりします。(今回は詳細手順を記載しておりません。)

なにかご参考になれば幸いです。

navタグ

<nav></nav>とはサイトのなかでナビゲーションや目次のことをしめすタグです。 後述するul,olタグと組み合わせてサイト内での他記事へ移動などを行うことができます。 主要なリストへ付けるようにしましょう。

ulタグ

<ul></ul>タグは順序のないリストを示すことに使用します。基本的にリストは箇条書きで示されます。 styleを指定することで文頭に表示される記号を●や◇にすることができます。

olタグ

<ol></ol>は順序のあるリストを示すことに使用します。基本的に上から数字や英語でリストを作成します。styleを指定することでリストの文頭に表示される文字を英語や数字に指定することができます。

liタグ

<li></li>タグはul,olの中に1つのリストとしてテキストなどを表示するために記載します。

今回はリストを作成するタグについて記載してみました。ブログを書いたときにリストで記事の見出しなどへ遷移できると記事の参照がしやすくなりますね。
違う記事ではなく同じ記事内で見出しへ遷移したい場合はclassタグで見出しのh2タグなどに名前をつけてaタグでつけた名前を遷移先へ指定すると記事内で遷移することができるようになります。まだまだいろいろ勉強中なので至らない点が多数あると思いますが参考になりますと幸いです。