Luxeritas(ルクセリタス)でリスト表示をカスタマイズする

CSS

みなさん、HTMLで文章を書くときに順番をつけて箇条書きにしたい時はありませんか？
え？いちいち先頭に数字や記号を書くんですか？それはオススメではないですので、今回は箇条書きの書き方とスタイルのカスタマイズについてご案内します！

ルクセリタスで箇条書きの表示をカスタマイズする

デフォルトの表示

まずはデフォルトの表示ですとこんな感じになります。
ol ul css default

デフォルトのHTML
<ol>
<li>連番数字を使ったリスト表示</li>
<li>連番数字を使ったリスト表示</li>
</ol>

<ul>
<li>記号を使った箇条書き</li>
<li>記号を使った箇条書き</li>
</ul>

数字を丸で囲む

ul にはクラス”mark”をつけて、先頭の記号はフォントアイコンを使用しています。
ol ul css

HTMLの書き方
<ol>
<li>連番数字を使ったリスト表示</li>
<li>連番数字を使ったリスト表示</li>
</ol>

<ul class="mark">
<li>記号を使った箇条書き</li>
<li>記号を使った箇条書き</li>
</ul>

フォントアイコンの色と種類はCSSの39、40行目を書き換えることで変更できます。

Font Awesome 4 の場合

CSS
/* リスト数字 */
.post ul, .post ol {
	padding: 0 0 0 10px; /* 上 右 下 左 */
}
.post ol {
	counter-reset: li;
}
.post ol > li {
	list-style: none;
	position: relative;
	padding-left: 3rem;
	line-height: 3.2rem;
}
.post ol > li:before {
	counter-increment: li;
	content: counter(li);
	background: #1e73be; /*blue*/
	color: #ffffff;
	border-radius: 50%;
	text-align: center;
	width: 2.2rem;
	height: 2.2rem;
	position: absolute;
	left: 0rem;
	top: .5rem;
	line-height: 2.2rem;
	font-family: 'Arial',sans-serif;
}
/* 箇条書き */
ul.mark{
	list-style-type:none;
}
ul.mark li{
	position:relative;
	padding: 0 0 0 5px;
	line-height: 2.8rem;
 }
ul.mark li:before{
	content: "\f0da"; /* アイコンの種類 */
	color:#1e73be; /* アイコンの色 */
	font-family: FontAwesome;
	margin-right: 1rem;
}

Font Awesome 5 の場合

CSS
/* リスト数字 */
.post ul, .post ol {
	padding: 0 0 0 10px; /* 上 右 下 左 */
}
.post ol {
	counter-reset: li;
}
.post ol > li {
	list-style: none;
	position: relative;
	padding-left: 3rem;
	line-height: 3.2rem;
}
.post ol > li:before {
	counter-increment: li;
	content: counter(li);
	background: #1e73be; /*blue*/
	color: #ffffff;
	border-radius: 50%;
	text-align: center;
	width: 2.2rem;
	height: 2.2rem;
	position: absolute;
	left: 0rem;
	top: .5rem;
	line-height: 2.2rem;
	font-family: 'Arial',sans-serif;
}
/* 箇条書き */
ul.mark{
	list-style-type:none;
}
ul.mark li{
	position:relative;
	padding: 0 0 0 5px;
	line-height: 2.8rem;
 }
ul.mark li:before{
	content: "\f0da"; /* アイコンの種類 */
	color:#1e73be; /* アイコンの色 */
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 1rem;
}

イタリック文字

ol-ul-css-02

HTMLの書き方
<ol>
<li>連番数字を使ったリスト表示</li>
<li>連番数字を使ったリスト表示</li>
</ol>

<ul class="mark">
<li>記号を使った箇条書き</li>
<li>記号を使った箇条書き</li>
</ul>

Font Awesome 4 の場合

CSS
/* リスト数字 */
.post ol {
	counter-reset: li;
}
.post ol > li {
	list-style: none;
	position: relative;
	padding-left: 2rem;
	line-height: 3.0rem;
}
.post ol > li:before {
	counter-increment: li;
	content: counter(li)'.';
	color: #1e73be;
	position: absolute;
	left: -1.3rem;
	font-style:italic;
	font-size:1.8rem;
	text-align: center;
	width: 2.5rem;
	height: 2.5rem;
}
/* 箇条書き */
ul.mark{
	list-style-type:none;
}
ul.mark li{
	position:relative;
	line-height: 2.8rem;
 }
ul.mark li:before{
	content: "\f111"; /* アイコンの種類 */
	color:#1e73be; /* アイコンの色 */
	font-family: FontAwesome;
	margin-right:1.2rem;
}

Font Awesome 5 の場合

CSS
/* リスト数字 */
.post ol {
	counter-reset: li;
}
.post ol > li {
	list-style: none;
	position: relative;
	padding-left: 2rem;
	line-height: 3.0rem;
}
.post ol > li:before {
	counter-increment: li;
	content: counter(li)'.';
	color: #1e73be;
	position: absolute;
	left: -1.3rem;
	font-style:italic;
	font-size:1.8rem;
	text-align: center;
	width: 2.5rem;
	height: 2.5rem;
}
/* 箇条書き */
ul.mark{
	list-style-type:none;
}
ul.mark li{
	position:relative;
	line-height: 2.8rem;
 }
ul.mark li:before{
	content: "\f111"; /* アイコンの種類 */
	color:#1e73be; /* アイコンの色 */
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right:1.2rem;
}

イタリック色違い（モノクロ）

ol-ul-css-03

HTMLの書き方
<ol>
<li>連番数字を使ったリスト表示</li>
<li>連番数字を使ったリスト表示</li>
</ol>

<ul class="mark">
<li>記号を使った箇条書き</li>
<li>記号を使った箇条書き</li>
</ul>

Font Awesome 4 の場合

モノクロのCSS
/* リスト数字 */
.post ol {
	counter-reset: li;
}
.post ol > li {
	list-style: none;
	position: relative;
	padding-left: 2rem;
	line-height: 3.0rem;
}
.post ol > li:before {
	counter-increment: li;
	content: counter(li)'.';
	color: #333;
	position: absolute;
	left: -1.3rem;
	font-style:italic;
	font-size:1.8rem;
	text-align: center;
	width: 2.5rem;
	height: 2.5rem;
}
/* 箇条書き */
ul.mark{
	list-style-type:none;
}
ul.mark li{
	position:relative;
	line-height: 2.8rem;
 }
ul.mark li:before{
	content: "\f0da"; /* アイコンの種類 */
	color:#999; /* アイコンの色 */
	font-family: FontAwesome;
	margin-right:1.2rem;
}

Font Awesome 5 の場合

CSS
/* リスト数字 */
.post ol {
	counter-reset: li;
}
.post ol > li {
	list-style: none;
	position: relative;
	padding-left: 2rem;
	line-height: 3.0rem;
}
.post ol > li:before {
	counter-increment: li;
	content: counter(li)'.';
	color: #333;
	position: absolute;
	left: -1.3rem;
	font-style:italic;
	font-size:1.8rem;
	text-align: center;
	width: 2.5rem;
	height: 2.5rem;
}
/* 箇条書き */
ul.mark{
	list-style-type:none;
}
ul.mark li{
	position:relative;
	line-height: 2.8rem;
 }
ul.mark li:before{
	content: "\f0da"; /* アイコンの種類 */
	color:#999; /* アイコンの色 */
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right:1.2rem;
}

あとがき

例によって例のごとく、CSSを何度も修正してキャプチャを撮っている間にわけがわからなくなりましたヽ(＠◇＠)ノ
Webには色々なリストデザインがあると思いますが、私がここで紹介しているのは、私が使いたいと感じるデザインだけです。
自分がわからずに調べた時「こう書いてあるとわかりやすいな」と感じるよう、心がけて書くようにしています。
あまり点数はありませんが、気に入るものがあればお使いくださいね^^
ルクセリタステーマですぐに使えるようになっています。
すべてのブラウザ、モバイルで表示を確認しているわけではありませんのでご了承ください。

2018.02.1カスタマイズを反映させるためのHTML記述を、簡素化してすべてのCSSとセットで展示しました。
2

カスタマイズ

Posted by どらみ