【コピペ可!】ul・ol・liタグ 箇条書きリストの作り方

今回は、HTMLのリストタグの使い方から、丸（数字）の消し方、コピペで使えるデザインのテンプレートまで解説していきます!

リストタグとは

リストタグは数字付きのリストと、数字なしのリストの2種類あります。

数字ありのリスト

<ol>
<li>りんご</li>
<li>ごりら</li>
<li>らっぱ</li>
</ol>

数字ありのリストの場合、<ol></ol>で<li></li>の項目を囲みます。

数字なしのリスト

<ul>
<li>りんご</li>
<li>ごりら</li>
<li>らっぱ</li>
</ul>

数字なしのリストの場合、<ul></ul>で<li></li>の項目を囲みます。

リストの丸（数字）を消したい場合

HTMLの構造だけリストタグを使用したいけど、丸（数字）は消したいという場合、ul（またはol）に対して「list-style:none;」と指定します。

.ul{
	list-style: none;/*ドットを消す*/
}

※liに対してでもOK

コピペできる箇条書きテンプレート

<ul class="design01"> 
<li>りんご</li>
<li>ごりら</li>
<li>らっぱ</li>
</ul>

.design01{
	border: dashed 2px #6fa9dc;/*周りの破線*/
	border-radius: 20px;/*角を丸く*/
	background: #fff;/*背景色*/
	padding: 20px 30px;	
}

.design01 li{
	margin-bottom: 15px;
}

.design01 li:last-child{
	margin-bottom: 15px;/*一番最後のliだけ下の余白をなしに*/
}

<ul class="design02"> 
<li>りんご</li>
<li>ごりら</li>
<li>らっぱ</li>
</ul>

.design02 li{
	border-left: solid 8px #84e0ff;/*左の線*/
	background: #fff;/*背景色*/
	margin-bottom: 5px;
	line-height: 1.5;
	padding: 0.5em;
	list-style: none!important;/*ドットを消す*/
}

<ul class="design03"> 
<li>りんご</li>
<li>ごりら</li>
<li>らっぱ</li>
</ul>

.design03 li{
	position: relative;
	padding: 10px 5px 10px 35px;
	margin-bottom:5px;
	background: #91c4ff;
	color: #fff;	
	list-style: none!important;/*ドットを消す*/
	border-radius: 0 10px 10px 0;/*右だけ角を丸く*/
}

/*左の丸の指定*/
.design03 li:before{
	content: "";
	display: block;
	position: absolute;
	left: 12px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #fff;
	top: 50%;
	transform: translateY(-50%);	
}

<ul class="design04"> 
<li>りんご</li>
<li>ごりら</li>
<li>らっぱ</li>
</ul>

.design04{
	border: solid 2px #000;
	background: #fff;
	padding: 20px 40px;
}

.design04 li{
	margin-bottom: 10px;
}

.design04 li:last-child{
	margin-bottom: 0px;/*一番最後のliだけ下の余白をなしに*/
}

まとめ

今回はHTMLの箇条書きタグの【ul・ol・li】について解説しました!

と覚えておいて下さい!