【CSS】リスト・箇条書きのマークをいろいろ試してみる【HTML】

ブレインキャット 2022年4月8日 / 2022年4月10日

ブレインキャット

HTMLのリストをCSSを使用することでいろいろなスタイルを表現することが出来ます。

今回はそのスタイルについて学んでいきたと思います。

HTMLを作る

基本的なHTMLについては、以下を使っていきます。

<!DOCTYPE html>
<html lang="ja">
    <head>
         <meta charset="utf-8">
         <link rel="stylesheet" href="test.css">
    </head>
    <body>
        <ul class="list">
            <li>ホゲ</li>
            <li>hoge</li>
        </ul>
    </body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

<!DOCTYPE html>

<html lang="ja">

<head>

<meta charset="utf-8">

<link rel="stylesheet" href="test.css">

</head>

<body>

<ul class="list">

<li>ホゲ</li>

<li>hoge</li>

</ul>

</body>

</html>

CSSを設定していく

デフォルト

.list {
    list-style: disc;
}

1

2

3

.list {

list-style: disc;

}

白丸

.list {
    list-style: circle;
}

1

2

3

.list {

list-style: circle;

}

四角

.list {
    list-style: square;
}

1

2

3

.list {

list-style: square;

}

表示なし

.list {
    list-style: none;
}

1

2

3

.list {

list-style: none;

}

まとめ

ブレインキャット

こんな感じでいろいろあるので、覚えておくと便利ですね！

【HTML】HTMLファイルを作成にあたっての基本とは！設定しておくことetc... ブレインキャット今回はHTMLファイルを作成するにあたって設定しておくべき基本的項目をまとめておこうと思います！ HTM...

COMMENT コメントをキャンセル

【VB.NET】Listの使い方

【HTML】HTMLファイルを作成にあたっての基本とは！設定しておくこと...