.fas_list_before{
	margin: 0;
	padding: 0;
}
.fas_list_before li{
	list-style: none;
	position: relative;
	margin: 0 0 8px 0;
	padding: 0 0 0 calc(1em + 5px);
	line-height: 1.4;
}
.fas_list_before li:before{
	position: absolute;
	top: 0;
	left: 0;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f058';
	color: #333;
}
.fas_list_before li:last-child{
	margin-bottom: 0px;
}

前にアイコンが付くシンプルなリストのサンプルです。アイコンはposition: absolute;でリストに対しての絶対配置にすることで文字が折り返した場合にも対応できるようにしています。

アイコン付きリスト（アイコン指定）

SAMPLE
CODE

Smile
Cry
Angry

HTML
COPY

<ul class="fas_list_iconselect">
	<li><i class="far fa-laugh-beam"></i>Smile</li>
	<li><i class="far fa-sad-tear"></i>Cry</li>
	<li><i class="far fa-angry"></i>Angry</li>
</ul>

CSS
COPY

.fas_list_iconselect{
	margin: 0;
	padding: 0;
}
.fas_list_iconselect li{
	list-style: none;
	position: relative;
	margin: 0 0 8px 0;
	padding: 0 0 0 calc(1.25em + 5px);
	line-height: 1.4;
}
.fas_list_iconselect li i{
	position: absolute;
	top: 0;
	left: 0;
	line-height: 1.4;
	width: 1.25em;
	text-align: center;
	color: #333;
}
.fas_list_iconselect li:last-child{
	margin-bottom: 0px;
}

こちらも前にアイコンが付くリストのサンプルですが、それぞれのリストに対してiタグでアイコンを指定できるリストになっています。リストで個別にアイコンを指定したいという場合にご利用ください。

交互にアイコンの色が変わるリスト

SAMPLE
CODE

Sunday
Monday
Tuesday
Wednesday

HTML
COPY

<ul class="fas_list_alter">
	<li>Sunday</li>
	<li>Monday</li>
	<li>Tuesday</li>
	<li>Wednesday</li>
</ul>

CSS
COPY

.fas_list_alter{
	margin: 0;
	padding: 0;
}
.fas_list_alter li{
	list-style: none;
	position: relative;
	margin: 0 0 8px 0;
	padding: 0 0 0 calc(1em + 5px);
	line-height: 1.4;
}
.fas_list_alter li:before{
	position: absolute;
	top: 0;
	left: 0;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f00c';
	color: #3366cc;
}
.fas_list_alter li:last-child{
	margin-bottom: 0px;
}
.fas_list_alter li:nth-child(even):before{
	color: #99ccff;
}

アイコンの色が交互に変わるリストのサンプルです。:nth-child(even):beforeで偶数のリストのアイコン色を上書きしています。

交互にアイコンが変わるリスト

SAMPLE
CODE

Spring
Summer
Autumn
Winter

HTML
COPY

<ul class="fas_list_altericon">
	<li>Spring</li>
	<li>Summer</li>
	<li>Autumn</li>
	<li>Winter</li>
</ul>

CSS
COPY

.fas_list_altericon{
	margin: 0;
	padding: 0;
}
.fas_list_altericon li{
	list-style: none;
	position: relative;
	margin: 0 0 8px 0;
	padding: 0 0 0 calc(1.25em + 5px);
	line-height: 1.4;
}
.fas_list_altericon li:before{
	position: absolute;
	top: 0;
	left: 0;
	line-height: 1.4;
	width: 1.25em;
	text-align: center;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 400;
	content: '\f058';
	color: #6699cc;
}
.fas_list_altericon li:last-child{
	margin-bottom: 0px;
}
.fas_list_altericon li:nth-child(even):before{
	font-weight: 900;
	content: '\f058';
}

アイコンが交互に変わるリストのサンプルです。:nth-child(even):beforeで偶数のリストのcontentとfont-weightを上書きすることでアイコンを置き換えています。

背景色ありのリスト

SAMPLE
CODE

January
February
March

HTML
COPY

<ul class="fas_list_back">
	<li>January</li>
	<li>February</li>
	<li>March</li>
</ul>

CSS
COPY

.fas_list_back{
	margin: 0;
	padding: 10px;
	background: #e0ecf9;
}
.fas_list_back li{
	list-style: none;
	position: relative;
	margin: 0 0 8px 0;
	padding: 0 0 0 calc(1em + 5px);
	line-height: 1.4;
}
.fas_list_back li:before{
	position: absolute;
	top: 0;
	left: 0;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f138';
	color: #6699cc;
}
.fas_list_back li:last-child{
	margin-bottom: 0px;
}

背景色があるリストのサンプルです。ulタグに対してbackgroundで背景色を設定しています。またpaddingで余白の調整もおこなっています。

背景色＋枠線のリスト

SAMPLE
CODE

April
May
June

HTML
COPY

<ul class="fas_list_backborder">
	<li>April</li>
	<li>May</li>
	<li>June</li>
</ul>

CSS
COPY

.fas_list_backborder{
	margin: 0;
	padding: 10px;
	background: #e0ecf9;
	border: 1px solid #6699cc;
}
.fas_list_backborder li{
	list-style: none;
	position: relative;
	margin: 0 0 8px 0;
	padding: 0 0 0 calc(1em + 5px);
	line-height: 1.4;
}
.fas_list_backborder li:before{
	position: absolute;
	top: 0;
	left: 0;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 400;
	content: '\f35a';
	color: #6699cc;
}
.fas_list_backborder li:last-child{
	margin-bottom: 0px;
}

背景色＋枠線が付いたリストのサンプルです。ulタグに対してbackgroundで背景色を、borderで枠線を設定しています。

背景色＋左線のリスト

SAMPLE
CODE

July
August
September

HTML
COPY

<ul class="fas_list_backborderleft">
	<li>July</li>
	<li>August</li>
	<li>September</li>
</ul>

CSS
COPY

.fas_list_backborderleft{
	margin: 0;
	padding: 10px;
	background: #e0ecf9;
	border-left: 5px solid #6699cc;
}
.fas_list_backborderleft li{
	list-style: none;
	position: relative;
	margin: 0 0 8px 0;
	padding: 0 0 0 calc(1em + 5px);
	line-height: 1.4;
}
.fas_list_backborderleft li:before{
	position: absolute;
	top: 0;
	left: 0;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f101';
	color: #6699cc;
}
.fas_list_backborderleft li:last-child{
	margin-bottom: 0px;
}

背景色＋左線が入ったリストのサンプルです。ulタグにborder-leftで左線を入れています。お好みで背景色や左線を変更することもできます。

背景がストライプのリスト

SAMPLE
CODE

October
November
December

HTML
COPY

<ul class="fas_list_stripe">
	<li>October</li>
	<li>November</li>
	<li>December</li>
</ul>

CSS
COPY

.fas_list_stripe{
	margin: 0;
	padding: 10px;
	background-color: #f4f9ff;
	background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #ecf5ff), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #ecf5ff),color-stop(.75, #ecf5ff), color-stop(.75, transparent),to(transparent));
	-webkit-background-size: 28px 28px;
}
.fas_list_stripe li{
	list-style: none;
	position: relative;
	margin: 0 0 8px 0;
	padding: 0 0 0 calc(1em + 5px);
	line-height: 1.4;
}
.fas_list_stripe li:before{
	position: absolute;
	top: 0;
	left: 0;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f14a';
	color: #6699cc;
}
.fas_list_stripe li:last-child{
	margin-bottom: 0px;
}

背景色をストライプにしたリストのサンプルです。background-colorでストライプの背景を作り、background-imageで斜めのラインが入るような設定になっています。

立体的なリスト

SAMPLE
CODE

Single
Double
Triple

HTML
COPY

<ul class="fas_list_bordershadow">
	<li>Single</li>
	<li>Double</li>
	<li>Triple</li>
</ul>

CSS
COPY

.fas_list_bordershadow{
	margin: 0;
	padding: 10px;
	background: #e0ecf9;
	border-radius: 0 5px 0 5px;
	border-bottom: 5px solid #c4d0dd;
	border-right: 5px solid #c4d0dd;
	box-shadow: 2px 2px 6px 0 #dcdcdc;
}
.fas_list_bordershadow li{
	list-style: none;
	position: relative;
	margin: 0 0 8px 0;
	padding: 0 0 0 calc(1em + 5px);
	line-height: 1.4;
}
.fas_list_bordershadow li:before{
	position: absolute;
	top: 0;
	left: 0;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: '\f138';
	color: #6699cc;
}
.fas_list_bordershadow li:last-child{
	margin-bottom: 0px;
}

立体的に浮き出たように見えるリストのサンプルです。線と影を組み合わせて立体的に見えるように表現しました。border-rightとborder-bottomで右と下に線を作り、box-shadowで影を設定しています。

個別に背景を付けたリスト

SAMPLE
CODE

Dog
Cat
Fish

HTML
COPY

<ul class="fas_list_indiv">
	<li>Dog</li>
	<li>Cat</li>
	<li>Fish</li>
</ul>

CSS
COPY

.fas_list_indiv{
	position: relative;
	margin: 0;
	padding: 0;
	background: #fff;
}
.fas_list_indiv li{
	list-style: none;
	position: relative;
	margin: 0 0 8px 0;
	padding: 5px 5px 5px calc(1em + 10px);
	background: #e0ecf9;
	line-height: 1.4;
}
.fas_list_indiv li:before{
	position: absolute;
	top: 5px;
	left: 5px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f061';
	color: #6699cc;
}
.fas_list_indiv li:last-child{
	margin-bottom: 0px;
}

各リストに背景色を付けたリストのサンプルです。liタグに余白を設定してbackgroundで背景色を設定しています。

アイコンを別背景にした個別リスト

SAMPLE
CODE

Car
Bike
Bicycle

HTML
COPY

<ul class="fas_list_indiviconback">
	<li>Car</li>
	<li>Bike</li>
	<li>Bicycle</li>
</ul>

CSS
COPY

.fas_list_indiviconback{
	position: relative;
	margin: 0;
	padding: 0;
	background: #fff;
}
.fas_list_indiviconback li{
	list-style: none;
	position: relative;
	margin: 0 0 8px 0;
	padding: 5px 5px 5px calc(1em + 15px);
	background: #e0ecf9;
	line-height: 1.4;
}
.fas_list_indiviconback li:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;
	width: calc(1em + 10px);
	height: 100%;
	padding: 5px 0 0 5px;
	background: #6699cc;
	color: #fff;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f058';
}
.fas_list_indiviconback li:last-child{
	margin-bottom: 0px;
}

アイコン部分を別背景にした個別リストのサンプルです。付箋のような感じで使えそうです。liタグの擬似要素に背景を指定してアイコンを表示しています。

固定タイトルが付いたリスト

SAMPLE
CODE

FontAwesomeは便利！
FontAwesomeは簡単！
FontAwesomeは美しい！

HTML
COPY

<ul class="fas_list_title">
	<li>FontAwesomeは便利！</li>
	<li>FontAwesomeは簡単！</li>
	<li>FontAwesomeは美しい！</li>
</ul>

CSS
COPY

.fas_list_title{
	position: relative;
	margin: 0;
	padding: calc(1.2em + 30px) 10px 10px 10px;
	background: #e0ecf9;
}
.fas_list_title:before{
	position: absolute;
	top: 10px;
	left: 10px;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free",sans-serif; 
	font-weight: 900;
	content: '\f0eb  Point';
	font-size: 1.2em;
	color: #3366cc;
}
.fas_list_title li{
	list-style: none;
	position: relative;
	margin: 0 0 8px 0;
	padding: 0 0 0 calc(1em + 5px);
	line-height: 1.4;
}
.fas_list_title li:before{
	position: absolute;
	top: 0;
	left: 0;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f00c';
	color: #6699cc;
}
.fas_list_title li:last-child{
	margin-bottom: 0px;
}

固定のタイトルを付けられるリストのサンプルです。ulタグに擬似要素でタイトルを設定しています。まとめなどの同じタイトルのリストを何度も使う場合は便利なリストです。

背景色ありの固定タイトルが付いたリスト

SAMPLE
CODE

Football
Baseball
Basketball

HTML
COPY

<ul class="fas_list_titleback">
	<li>Football</li>
	<li>Baseball</li>
	<li>Basketball</li>
</ul>

CSS
COPY

.fas_list_titleback{
	position: relative;
	margin: 0;
	padding: calc(1.2em + 30px) 10px 10px 10px;
	background: #e0ecf9;
}
.fas_list_titleback:before{
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	padding: 5px 10px;
	background: #3366cc;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free",sans-serif; 
	font-weight: 900;
	content: '\f13a  Sports';
	font-size: 1.2em;
	color: #fff;
}
.fas_list_titleback li{
	list-style: none;
	position: relative;
	margin: 0 0 8px 0;
	padding: 0 0 0 calc(1em + 5px);
	line-height: 1.4;
}
.fas_list_titleback li:before{
	position: absolute;
	top: 0;
	left: 0;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f101';
	color: #6699cc;
}
.fas_list_titleback li:last-child{
	margin-bottom: 0px;
}

背景色ありの固定タイトルが付いたリストのサンプルです。ulタグの擬似要素をブロック要素にして背景を設定してタイトルを表示しています。

帯風の固定タイトルが付いたリスト

SAMPLE
CODE

Tokyo
Kanagawa
Osaka

HTML
COPY

<ul class="fas_list_titleband">
	<li>Tokyo</li>
	<li>Kanagawa</li>
	<li>Osaka</li>
</ul>

CSS
COPY

.fas_list_titleband{
	position: relative;
	margin: 0;
	padding: 60px 10px 10px 10px;
	background: #e0ecf9;
}
.fas_list_titleband:before{
	position: absolute;
	top: 10px;
	left: -10px;
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	line-height: 40px;
	padding: 0 10px;
	background: #3366cc;
	box-shadow: 2px 2px 2px 0 #ccc;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free",sans-serif; 
	font-weight: 900;
	content: '\f3c5  Prefectures';
	font-size: 1.2em;
	color: #fff;
}
.fas_list_titleband:after{
	position: absolute;
	top: 50px;
	left: -10px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 10px 6px 0;
	border-color: transparent #1c376e transparent transparent;
	content: '';
}
.fas_list_titleband li{
	list-style: none;
	position: relative;
	margin: 0 0 8px 0;
	padding: 0 0 0 calc(1em + 5px);
	line-height: 1.4;
}
.fas_list_titleband li:before{
	position: absolute;
	top: 0;
	left: 0;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f058';
	color: #6699cc;
}
.fas_list_titleband li:last-child{
	margin-bottom: 0px;
}

帯風の固定タイトルが付いたリストのサンプルです。ulタグの擬似要素:beforeでタイトルを作成して、:afterで折り返し用の三角形を作って帯を表現しています。

枠線の途中に固定タイトルが付いたリスト

SAMPLE
CODE

North
South
East
West

HTML
COPY

<ul class="fas_list_titleborder">
	<li>North</li>
	<li>South</li>
	<li>East</li>
	<li>West</li>
</ul>

CSS
COPY

.fas_list_titleborder{
	position: relative;
	top: 0.6em;
	margin: 0 0 0.6em 0;
	padding: calc(0.6em + 10px) 20px 10px 20px;
	background: #fff;
	border: 2px solid #3366cc;
	border-radius: 5px;
}
.fas_list_titleborder:before{
	position: absolute;
	top: -0.5em;
	left: 10px;
	display: inline-block;
	background: #fff;
	padding: 0 10px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free",sans-serif; 
	font-weight: 900;
	content: '\f14e  Direction';
	font-size: 1.2em;
	line-height: 1;
	color: #3366cc;
}
.fas_list_titleborder li{
	list-style: none;
	position: relative;
	margin: 0 0 8px 0;
	padding: 0 0 0 calc(1em + 5px);
	line-height: 1.4;
}
.fas_list_titleborder li:before{
	position: absolute;
	top: 0;
	left: 0;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f101';
	color: #6699cc;
}
.fas_list_titleborder li:last-child{
	margin-bottom: 0px;
}

枠線の途中に固定タイトルが付いたリストのサンプルです。ulタグの擬似要素:beforeでタイトルを作成して文字サイズの半分だけ上にあげることで枠線の途中に表示されるようにしています。

パンくずリスト

SAMPLE
CODE

Home
Category
Page

HTML
COPY

<ul class="fas_list_breadcrumbs">
	<li><a href="{URL}">Home</a></li>
	<li><a href="{URL}">Category</a></li>
	<li>Page</li>
</ul>

CSS
COPY

.fas_list_breadcrumbs{
	margin: 0;
	padding: 0;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	flex-wrap: wrap;
	align-items: center;	
}
.fas_list_breadcrumbs li{
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 1.4;
	color: #6699cc;
}
.fas_list_breadcrumbs li a{
	text-decoration: none;
	color: #6699cc;
}
.fas_list_breadcrumbs li:after{
	display: inline-block;
	line-height: 1.4;
	width: 2em;
	text-align: center;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f105';
	color: #6699cc;
}
.fas_list_breadcrumbs li:last-child:after{
	width: 0;
	content: '';
}

ページ上部でよく使われるパンくずリストのサンプルです。display: flex;でリストを横並びにして、リストの擬似要素:afterでアイコンを表示しています。また:last-child:afterで最後のリストにはアイコンが表示されないように設定しています。

ステップリスト

SAMPLE
CODE

STEP1.
基本情報
STEP2.
決済方法
STEP3.
決済確認
STEP4.
購入完了

HTML
COPY

<ul class="fas_list_step">
	<li class="fas_list_step_pl">
		<span>
			STEP1.<br>
			<i class="fas fa-user-circle"></i>基本情報
		</span>
	</li>
	<li>
		<span>
			STEP2.<br>
			<i class="fas fa-shopping-cart"></i>決済方法
		</span>
	</li>
	<li>
		<span>
			STEP3.<br>
			<i class="fas fa-question-circle"></i>決済確認
		</span>
	</li>
	<li>
		<span>
			STEP4.<br>
			<i class="fas fa-check-circle"></i>購入完了
		</span>
	</li>
</ul>

CSS
COPY

.fas_list_step{
	margin: 0;
	padding: 0;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	align-items: stretch;	
}
.fas_list_step li{
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	justify-content: center;
	align-items: center;
	width: calc(100% / 4);
	height: 50px;
	line-height: 1.2;
	background: #e0ecf9;
	color: #6699cc;
	text-align: center;
}
.fas_list_step li i{
	margin-right: 5px;
}
.fas_list_step li:before,
.fas_list_step li:after{
	position: absolute;
	z-index: 1;
	width: 0;
	height: 0;
	border-style: solid;
	content: '';
}
.fas_list_step li:before{
	top: -2px;
	right: -22px;
	border-width: 27px 0 27px 22px;
	border-color: transparent transparent transparent #fff;	
}
.fas_list_step li:after{
	top: 0px;
	right: -20px;
	border-width: 25px 0 25px 20px;
	border-color: transparent transparent transparent #e0ecf9;	
}
.fas_list_step li:last-child:before,
.fas_list_step li:last-child:after{
	border: none;
}
.fas_list_step li.fas_list_step_pl{
	background: #6699cc;
	color: #fff;
}
.fas_list_step li.fas_list_step_pl:after{
	border-color: transparent transparent transparent #6699cc;
}

入力フォームが複数ページであるような場合にステップをわかりやすくするリストです。リストの擬似要素:beforeと:afterで三角形を作っています。リストにクラスfas_list_step_plを付与することで現在のページの色を変えています。