HTMLでリストを作る

リストを表すHTMLタグとして<ul>や<ol>、<dl>などの種類があります。

今回は<ul>について解説していきます。

点付リスト

順番のついていないリストを作る場合に<ul>と<li>を使います。まず<ul>～</ul>で点付リストであることを表し、その中に<li>～</li>でリストの項目を表示します。

<p>買い物リスト</p>
<ul>
<li>鉛筆</li>
<li>洗濯ばさみ</li>
<li>トイレットペーパー</li>
<li>飲料水</li>
</ul>

ブラウザ表示例

買い物リスト

CSSを使ってリストマークを消してみましょう。リストマークを消すにはlist-style-typeに値を入力して、表示させないようにします。今回は・の部分を表示しないように値にnoneを入力します。

その他のマークには下のようなものがあります。

CSSプロパティ	解説
list-style-type	リストマークを設定

@charset "utf-8";
ul { list-style-type: none; }

ブラウザ表示例

買い物リスト