コピペで簡単！リストのシンプルデザインCSS

2019-10-222019-10-24CSSアイコンフォント

リストスタイルを装飾するシンプルなデザインCSSです。

リスト標準スタイル（UL）は以下の通り

• リスト
• リスト

この標準のリストスタイル先頭の「・」は非表示にして、疑似要素「Before」を使ってアイコンフォントや固定の文字を表示しています。

 

HTML記述

ULタグ、OLタグをカスタマイズしてしまう方法もありますが、今回はクラス名でCSSを記述していますので、標準的なリストも使えますし、必要に応じていろんなデザインも使えます。

お好みの方法でご利用下さい。

HTMLの記述は「UL」タグにクラス名を付与するだけですべて共通です。

↓　サンプルはクラス名：ul_1

<ul class="ul_1">
 	<li>サンプル１</li>
 	<li>サンプル１</li>
</ul>

 

アイコンフォントを使うパターン

アイコンフォントは「Font Awesome」のフリーを利用しています。

使い方については以下をご覧ください。

 

CSS

 

.ul_1{list-style:none;}
.ul_1 li:before{
font-family: "Font Awesome 5 Free";
content: "f152"; /*アイコンフォント*/
font-weight: 900;
color:#5787b7; /*アイコンフォントの色*/
padding-right:5px;
font-size:18px;
list-style:none;
}

カラー変更は以下も参考にして下さい。

マカロンビビッドパステル和色セーフ色名 赤桃青紫黄橙緑茶黒

 

サンプル１

アイコンフォント：f152

 

サンプル２

アイコンフォント：f0a4

 

サンプル３

アイコンフォント：f101

 

サンプル４

アイコンフォント：f303

 

サンプル５

アイコンフォント：f058

 

サンプル６

アイコンフォント：f00c

 

アイコンフォントを使わない

サンプル７

.ul_7{list-style:none;}
.ul_7 li {
border-left: solid 8px #5787b7;/*左側の線の色*/
background: #afc5dc;/*背景色*/
border-radius: 0 15px 15px 0;/*右側の角を丸く*/
margin-bottom: 5px;
list-style:none;
line-height: 2;
padding: 5px;
}

 

サンプル８

.ul_8{list-style:none;}
.ul_8 li:before{
content: "●";
color:#5787b7;
padding-right:5px;
font-size:18px;
}

 

サンプル９

.ul_9{list-style:none;}
.ul_9 li {
border-left: solid 8px #5787b7;/*左側の線の色*/
background: #afc5dc;/*背景色*/
border-radius: 15px 0 0 15px;/*右側の角を丸く*/
margin-bottom: 5px;
list-style:none;
line-height: 2;
padding: 5px;
}
.ul_9 li:before{
content: "●";
color:#fff;
padding-right:5px;
font-size:18px;
}

 

サンプル１０

.ul_10{list-style:none;
border-top: 1px dashed #5787b7;
border-bottom: 1px dashed #5787b7;
}
.ul_10 li:before{
content: "●";
color:#5787b7;
padding-right:5px;
font-size:18px;
}

 

サンプル１１

.ul_11{list-style:none;
border-top: 1px dotted #5787b7;
border-bottom: 1px dotted #5787b7;
}
.ul_11 li:before{
content: "●";
color:#5787b7;
padding-right:5px;
font-size:18px;
}

 

サンプル１２

.ul_12{list-style:none;
border: 1px solid #5787b7;
}
.ul_12 li:before{
content: "●";
color:#5787b7;
padding-right:5px;
font-size:18px;
}