スポンサーリンク
ブレインキャット
HTMLのリストをCSSを使用することでいろいろなスタイルを表現することが出来ます。
今回はそのスタイルについて学んでいきたと思います。
HTMLを作る
基本的な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を設定していく
デフォルト
![](https://share-ob.com/wp-content/uploads/2022/04/箇条書き_デフォルト.png)
1 2 3 | .list { list-style: disc; } |
白丸
![](https://share-ob.com/wp-content/uploads/2022/04/箇条書き_白丸.png)
1 2 3 | .list { list-style: circle; } |
四角
![](https://share-ob.com/wp-content/uploads/2022/04/箇条書き_四角.png)
1 2 3 | .list { list-style: square; } |
表示なし
![](https://share-ob.com/wp-content/uploads/2022/04/箇条書き_なし.png)
1 2 3 | .list { list-style: none; } |
まとめ
ブレインキャット
こんな感じでいろいろあるので、覚えておくと便利ですね!
![](https://share-ob.com/wp-content/uploads/2022/04/アイキャッチ_40_1-320x180.jpg)
【HTML】HTMLファイルを作成にあたっての基本とは!設定しておくことetc... ブレインキャット
今回はHTMLファイルを作成するにあたって設定しておくべき基本的項目をまとめておこうと思います! HTM...
スポンサーリンク