配色デザイン本が全国の書店で発売中!

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

3年生

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

リストタグとは

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

数字ありのリスト

  1. りんご
  2. ごりら
  3. らっぱ

数字なしのリスト

  • りんご
  • ごりら
  • らっぱ

数字ありのリスト


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

  1. りんご
  2. ごりら
  3. らっぱ

数字ありのリストの場合、<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】について解説しました!

  • 数字ありがol
  • 数字なしがul
  • 丸(数字)を消したい場合は、「list-style:none;」

と覚えておいて下さい!

こばやし
こばやし

最後まで読んで下さりありがとうございました♪

コメント

タイトルとURLをコピーしました