講座1

リスト表示をHTMLとCSSでする方法

  • Jo Masafumi
  • Jo Masafumi
学習状況をツイッターでつぶやく

次は、リスト表示をHTMLとCSSでする方法をします。

リスト表示をHTMLとCSSでする方法

ワードプレスの管理画面を開きます。

左上の「投稿」を押します。

左上の「新規追加」を押します。

左上の「タイトルを追加」に「リスト表示をHTMLとCSSでする方法」と入力します。

右側の「テキスト」を押します。

テキストのところに、HTMLコードを貼り付けます。

テキストのところに、下記コードをコピーして貼り付けます。

<ul class="list0">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ul>
<ol class="list0">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ol>

貼り付けました。

右側の「公開」を押します。

「OK」を押します。

右上の「変更をプレビュー」を押します。

「サンプル１、サンプル２、サンプル３」の文字がリスト表示になっていることを確認します。

学習状況をツイッターでつぶやく
↑じょうまさふみに学習状況を報告すると喜びます(^^)/

HTMLとCSSの説明

CSS

/*リスト表示CSSコード*/
.list0 {
  background: #fcfcfc;/*背景色*/
  padding: 0.5em 0.5em 0.5em 2em;/*枠内の余白*/
  border: solid 3px gray;/*線の種類 太さ 色*/
  margin-bottom: 1.5em; /*下側の余白*/
}
.list0 li {
  line-height: 1.5; /*行の高さ*/
  padding: 0.5em 0; /*枠内余白*/
}

HTML

<ul class="list0">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ul>
<ol class="list0">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ol>

「CSSコード」の「.list」の部分は好きな名前を書いても大丈夫です。

「background」は、リストの枠の中の背景色です。

「padding」は、枠の内側の余白を指定するときに使います。

「margin-bottom」は、枠の外側の下側の余白を指定するときに使います。

「border」は、「solid」は「線の種類」、「3px」は「線の太さ」、「gray」は「線の色」が入ります。

「.list li」の「li」の部分は、「li」以外に名前を変更することはできません。

「line-height」は、リストの行の高さを指定するときに使います。

いろいろなリストの記入例

シロクロリスト

CSS

/*シロクロリスト*/
.list1 {
  background: #fcfcfc;/*背景色*/
  padding: 0.5em 0.5em 0.5em 2em;/*枠内の余白*/
  border: solid 3px gray;/*線の種類 太さ 色*/
  margin-bottom: 1.5em; /*下側の余白*/
}
.list1 li {
  line-height: 1.5; /*行の高さ*/
  padding: 0.5em 0; /*行の余白*/
}

HTML

<ul class="list1">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ul>
<ol class="list1">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ol>

記事をプレビュー表示したとき

  • サンプル１
  • サンプル２
  • サンプル３
  1. サンプル１
  2. サンプル２
  3. サンプル３

さわやかリスト

CSS

/*さわやかリスト*/
.list2 {
  color: #668ad8;/*文字色*/
  border: dashed 2px #668ad8;/*破線 太さ 色*/
  background: #f1f8ff; /*背景色*/
  padding: 0.5em 0.5em 0.5em 2em; /*枠内余白*/
  margin-bottom: 1.5em; /*下側の余白*/
}
.list2 li {
  line-height: 1.5; /*行の高さ*/
  padding: 0.5em 0; /*行の余白*/
}

HTML

<ul class="list2">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ul>
<ol class="list2">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ol>

記事をプレビュー表示したとき

  • サンプル１
  • サンプル２
  • サンプル３
  1. サンプル１
  2. サンプル２
  3. サンプル３

二重線リスト

CSS

/*二重線リスト*/
.list3 {
  color: #668ad8; /*文字色*/
  border: double 5px #668ad8;/*二重線 太さ 色*/
  background: #f1f8ff; /*背景色*/
  padding: 0.5em 0.5em 0.5em 2em; /*枠内余白*/
  margin-bottom: 1.5em; /*下側の余白*/
}
.list3 li {
  line-height: 1.5; /*行の高さ*/
  padding: 0.5em 0; /*行の余白*/
}

HTML

<ul class="list3">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ul>
<ol class="list3">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ol>

記事をプレビュー表示したとき

  • サンプル１
  • サンプル２
  • サンプル３
  1. サンプル１
  2. サンプル２
  3. サンプル３

上下の線リスト

CSS

/*上下の線リスト*/
.list4 {
  color: #1e366a; /*文字色*/
  border-top: solid #1e366a 1px; /*上の線*/
  border-bottom: solid #1e366a 1px; /*下の線*/
  padding: 0.5em 0 0.5em 1.5em; /*枠内余白*/
  margin-bottom: 1.5em; /*下側の余白*/
}
.list4 li {
  line-height: 1.5; /*行の高さ*/
  padding: 0.5em 0; /*行の余白*/
}

HTML

<ul class="list4">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ul>
<ol class="list4">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ol>

記事をプレビュー表示したとき

  • サンプル１
  • サンプル２
  • サンプル３
  1. サンプル１
  2. サンプル２
  3. サンプル３

点線リスト

CSS

/*点線リスト*/
.list5 {
  color: #1e366a; /*文字色*/
  border: dotted #1e366a 1px; /*点線 色 太さ*/
  padding: 0.5em 0.5em 0.5em 2em; /*枠内余白*/
  margin-bottom: 1.5em; /*下側の余白*/
}
.list5 li {
  line-height: 1.5; /*行の高さ*/
  padding: 0.5em 0; /*行の余白*/
}

HTML

<ul class="list5">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ul>
<ol class="list5">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ol>

記事をプレビュー表示したとき

  • サンプル１
  • サンプル２
  • サンプル３
  1. サンプル１
  2. サンプル２
  3. サンプル３

影付きリスト

CSS

/*影付きリスト*/
.list6 {
  background: #fffcf4; /*背景色*/
  border-radius :8px;/*角の丸み*/
  box-shadow :0px 5px 5px silver;/*5px=影の広がり具合*/
  padding: 0.5em 0.5em 0.5em 2em; /*枠内余白*/
  margin-bottom: 1.5em; /*下側の余白*/
}
.list6 li {
  line-height: 1.5; /*行の高さ*/
  padding: 0.5em 0; /*行の余白*/
}

HTML

<ul class="list6">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ul>
<ol class="list6">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ol>

記事をプレビュー表示したとき

  • サンプル１
  • サンプル２
  • サンプル３
  1. サンプル１
  2. サンプル２
  3. サンプル３

布リスト

CSS

/*布リスト*/
.list7 {
  background: #fffde8; /*背景色*/
  box-shadow: 0px 0px 0px 10px #fffde8;/*線の外側色*/
  border: dashed 2px #ffb03f;/*破線*/
  border-radius: 9px; /*角の丸み*/
  margin-left: 10px;/*左側余白*/
  margin-right: 10px;/*右側余白*/
  padding: 0.5em 0.5em 0.5em 2em; /*枠内余白*/
}
.list7 li {
  line-height: 1.5; /*行の高さ*/
  padding: 0.5em 0; /*行の余白*/
}

HTML

<ul class="list7">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ul>
<ol class="list7">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ol>

記事をプレビュー表示したとき

  • サンプル１
  • サンプル２
  • サンプル３
  1. サンプル１
  2. サンプル２
  3. サンプル３

布リスト

CSS

/*布リスト*/
.list7 {
  background: #fffde8; /*背景色*/
  box-shadow: 0px 0px 0px 10px #fffde8;/*線の外側色*/
  border: dashed 2px #ffb03f;/*破線*/
  border-radius: 9px; /*角の丸み*/
  margin-left: 10px;/*左側余白*/
  margin-right: 10px;/*右側余白*/
  padding: 0.5em 0.5em 0.5em 2em; /*枠内余白*/
}
.list7 li {
  line-height: 1.5; /*行の高さ*/
  padding: 0.5em 0; /*行の余白*/
}

HTML

<ul class="list7">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ul>
<ol class="list7">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ol>

記事をプレビュー表示したとき

  • サンプル１
  • サンプル２
  • サンプル３
  1. サンプル１
  2. サンプル２
  3. サンプル３

ふせん付きリスト

CSS

/*ふせん付きリスト*/
.list8 {
  padding: 0; /*枠内余白*/
  position: relative; /*通常の表示位置が基準*/
}
.list8 li {
  color: #2d8fdd; /*文字色*/
  border-left: solid 6px #2d8fdd;/*左側の線*/
  background: #f1f8ff;/*背景色*/
  margin-bottom: 3px;/*下のバーとの余白*/
  line-height: 1.5; /*行の高さ*/
  padding: 0.5em; /*行の余白*/
  list-style-type: none!important;/*行の頭のものを消す*/
}

HTML

<ul class="list8">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ul>

記事をプレビュー表示したとき

  • サンプル１
  • サンプル２
  • サンプル３

ふせん右側丸くリスト

CSS

/*ふせん右側丸くリスト*/
.list9 {
  padding: 0; /*枠内余白*/
  position: relative; /*通常の表示位置が基準*/
}
.list9 li {
  color: black; /*文字色*/
  border-left: solid 8px orange;/*左側の線*/
  background: #e2f9ff;/*背景色*/
  margin-bottom: 5px;/*下のバーとの余白*/
  line-height: 1.5; /*行の高さ*/
  border-radius: 0 15px 15px 0;/*右側の角だけ丸く*/
  padding: 0.5em; /*行の余白*/
  list-style-type: none!important; /*行の頭のものを消す*/
}

HTML

<ul class="list9">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ul>

記事をプレビュー表示したとき

  • サンプル１
  • サンプル２
  • サンプル３

ふせん下線付きくリスト

CSS

/*ふせん下線付きくリスト*/
.list10 {
  padding: 0; /*枠内余白*/
}
.list10 li {
  color: #404040; /*文字色*/
  border-left: solid 6px #1fa67a;/*左側の線*/
  border-bottom: solid 2px #dadada;/*下に灰色線*/
  background: #e9e9e9; /*背景色*/
  margin-bottom: 5px;/*下のバーとの余白*/
  line-height: 1.5; /*行の高さ*/
  padding: 0.5em; /*行の余白*/
  list-style-type: none!important; /*行の頭のものを消す*/
  font-weight: bold; /*文字の太さ*/
}

HTML

<ul class="list10">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ul>

記事をプレビュー表示したとき

  • サンプル１
  • サンプル２
  • サンプル３

タグリスト

CSS

/*タグリスト*/
.list11 {
  padding: 0; /*枠内余白*/
}
.list11 li {
  position: relative; /*通常の表示位置が基準*/
  list-style-type: none!important;/*ポチ消す*/
  padding: 0.5em 0.5em 0.5em 0.5em; /*行の余白*/
  margin-bottom: 5px; /*下側余白*/
  line-height: 1.5; /*行の高さ*/
  background: #8fcdff; /*背景色*/
  vertical-align: middle; /*中央揃え*/
  color: #505050; /*文字色*/
  border-radius: 15px 0px 0px 15px;/*左側の角丸く*/
}
.list11 li:before{ 
  display:inline-block; /*横並び*/ 
  vertical-align: middle; /*中央揃え*/
  content:''; /*白丸用*/
  width:1em; /*白丸横幅*/
  height: 1em; /*白丸高さ*/
  background: #fff; /*白丸色*/
  border-radius: 50%; /*白丸の丸み*/
  margin-right: 8px; /*白丸右側の余白*/
}

HTML

<ul class="list11">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ul>

記事をプレビュー表示したとき

  • サンプル１
  • サンプル２
  • サンプル３

矢印リスト

CSS

/*矢印リスト*/
.list12 {
  border: solid 2px skyblue; /*枠の線*/
  border-radius: 5px; /*角の丸み*/
  padding: 0.5em 1em 0.5em 2.3em; /*枠内余白*/
  position: relative; /*通常の表示位置が基準*/
}
.list12 li {
  line-height: 1.5; /*行の高さ*/
  padding: 0.5em 0; /*行の余白*/
  list-style-type: none!important; /*行の頭を消す*/
}
.list12 li:before {
  font-family: FontAwesome; /*フォント名*/
  content: "\f138";/*アイコンの種類*/
  position: absolute; /*親要素の左上基準*/
  left : 1em;/*左端からのアイコンまでの距離*/
  color: skyblue;/*アイコン色*/
}

HTML

<ul class="list12">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ul>

記事をプレビュー表示したとき

  • サンプル１
  • サンプル２
  • サンプル３

ふきだしリスト

CSS

/*ふきだしリスト*/
.list13 {
  border: solid 2px skyblue;/*線の設定*/
  padding: 0.5em 1em 0.5em 2.3em; /*枠内余白*/
  position: relative; /*通常の表示位置が基準*/
}
.list13 li {
  line-height: 1.5; /*行の高さ*/
  padding: 0.5em 0; /*行の余白*/
  list-style-type: none!important; /*行の頭を消す*/
}
.list13 li:before { 
  font-family: FontAwesome; /*フォント名*/
  content: "\f075";/*アイコンの種類*/
  position: absolute; /*親要素の左上基準*/
  left : 1em; /*左端からのアイコンまで*/
  color: skyblue; /*アイコン色*/
}

HTML

<ul class="list13">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ul>

記事をプレビュー表示したとき

  • サンプル１
  • サンプル２
  • サンプル３

チェックリスト

CSS

/*チェックリスト*/
.list14 {
  border: solid 2px #ffb03f; /*線の設定*/
  padding: 0.5em 1em 0.5em 2.3em; /*枠内余白*/
  position: relative; /*通常の表示位置が基準*/
}
.list14 li {
  line-height: 1.5; /*行の高さ*/
  padding: 0.5em 0; /*行の余白*/
  list-style-type: none!important;/*ポチ消す*/
}
.list14 li:before {
  font-family: FontAwesome; /*フォント名*/
  content: "\f00c";/*アイコンの種類*/
  position: absolute; /*親要素の左上基準*/
  left : 1em; /*左端からのアイコンまで*/
  color: #ffb03f; /*アイコン色*/
}

HTML

<ul class="list14">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ul>

記事をプレビュー表示したとき

  • サンプル１
  • サンプル２
  • サンプル３

ゆびさしリスト

CSS

/*ゆびさしリスト*/
.list15 {
  border: double 5px #ffb03f; /*線の設定*/
  padding: 0.5em 1em 0.5em 2.3em; /*枠内余白*/
  position: relative; /*通常の表示位置が基準*/
}
.list15 li {
  line-height: 1.5; /*行の高さ*/
  padding: 0.5em 0; /*行の余白*/
  list-style-type: none!important;/*ポチ消す*/
}
.list15 li:before {
  font-family: FontAwesome; /*フォント名*/
  content: "\f0a4";/*アイコンの種類*/
  position: absolute; /*親要素の左上基準*/
  left : 1em; /*左端からのアイコンまで*/
  color: #ffb03f; /*アイコン色*/
}

HTML

<ul class="list15">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ul>

記事をプレビュー表示したとき

  • サンプル１
  • サンプル２
  • サンプル３

肉球リスト

CSS

/*肉球リスト*/
.list16 {
  border: solid 2px #ffb03f; /*線の設定*/
  padding: 0.5em 1em 0.5em 2.3em; /*枠内余白*/
  position: relative; /*通常の表示位置が基準*/
}
.list16 li {
  line-height: 1.5; /*行の高さ*/
  padding: 0.5em 0; /*行の余白*/
  list-style-type: none!important;/*ポチ消す*/
}
.list16 li:before {
  font-family: FontAwesome; /*フォント名*/
  content: "\f1b0";/*アイコンの種類*/
  position: absolute; /*親要素の左上基準*/
  left : 1em; /*左端からのアイコンまで*/
  color: #ffb03f; /*アイコン色*/
}

HTML

<ul class="list16">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ul>

記事をプレビュー表示したとき

  • サンプル１
  • サンプル２
  • サンプル３

ひかえめリスト

CSS

/*ひかえめリスト*/
.list17 {
  border: solid 2px silver; /*線の設定*/
  padding: 0.5em 1em 0.5em 2.3em; /*枠内余白*/
  position: relative; /*通常の表示位置が基準*/
}
.list17 li {
  line-height: 1.5; /*行の高さ*/
  padding: 0.5em 0; /*行の余白*/
  list-style-type: none!important;/*ポチ消す*/
}
.list17 li:before {
  font-family: FontAwesome; /*フォント名*/
  content: "\f0da";/*アイコンの種類*/
  position: absolute; /*親要素の左上基準*/
  left : 1em; /*左端からのアイコンまで*/
  color: gray; /*アイコン色*/
}

HTML

<ul class="list17">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ul>

記事をプレビュー表示したとき

  • サンプル１
  • サンプル２
  • サンプル３

立体リスト

CSS

/*立体リスト*/
.list18 {
  padding: 0; /*枠内余白*/
  position: relative; /*通常の表示位置が基準*/
}
.list18 li {
  line-height: 1.5; /*行の高さ*/
  padding: 0.5em 0.5em 0.5em 1.7em; /*行の余白*/
  list-style-type: none!important; /*行の頭なし*/
  background: -webkit-linear-gradient(top, #whitesmoke 0%, whitesmoke 100%);/*グラデーション*/
  background: linear-gradient(to bottom, whitesmoke 0%, #dadada 100%);/*グラデーション*/
  text-shadow: 1px 1px 1px whitesmoke;/*文字を立体的に*/
  color: black;
}
.list18 li:before { 
  font-family: FontAwesome; /*フォント名*/
  content: "\f138"; /*アイコン種類*/
  position: absolute; /*親要素の左上基準*/
  left : 0.5em; /*左端からのアイコンまでの距離*/
  color: orange; /*アイコン色*/
}

HTML

<ul class="list18">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ul>

記事をプレビュー表示したとき

  • サンプル１
  • サンプル２
  • サンプル３

青色立体リスト

CSS

/*青色立体リスト*/
.list19 {
  padding: 0; /*枠内余白*/
  position: relative; /*通常の表示位置が基準*/
}
.list19 li {
  line-height: 1.5; /*行の高さ*/
  padding: 0.5em 0.5em 0.5em 1.7em; /*行の余白*/
  list-style-type: none!important; /*行の頭なし*/
  background: -webkit-linear-gradient(top, skyblue 0%, #5aade6 100%);/*グラデーション*/
  background: linear-gradient(to bottom, skyblue 0%, #5aade6 100%);/*グラデーション*/
  text-shadow: 1px 1px 1px whitesmoke;/*文字を立体的に*/
  color: white;
}
.list19 li:before { 
  font-family: FontAwesome; /*フォント名*/
  content: "\f138"; /*アイコン種類*/
  position: absolute; /*親要素の左上基準*/
  left : 0.5em; /*左端からのアイコンまでの距離*/
  color: white; /*アイコン色*/
}

HTML

<ul class="list19">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ul>

記事をプレビュー表示したとき

  • サンプル１
  • サンプル２
  • サンプル３

区切り線リスト

CSS

/*区切り線リスト*/
.list20 {
  border: solid 2px #ffb03f; /*枠の線*/
  padding: 0 0.5em; /*枠内余白*/
  position: relative; /*通常の表示位置が基準*/
}
.list20 li {
  line-height: 1.5; /*行の高さ*/
  padding: 0.5em 0 0.5em 1.4em; /*行の余白*/
  border-bottom: dashed 1px silver; /*下破線*/
  list-style-type: none!important; /*行の頭なし*/
}
.list20 li:before {
  font-family: FontAwesome; /*フォント名*/
  content: "\f138";/*アイコン種類*/
  position: absolute; /*親要素の左上基準*/
  left : 0.5em; /*左端からのアイコンまで*/
  color: #ffb03f; /*アイコン色*/
}
.list20 li:last-of-type {
  border-bottom: none; /*一番下の破線なし*/
}

HTML

<ul class="list20">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ul>

記事をプレビュー表示したとき

  • サンプル１
  • サンプル２
  • サンプル３

白線リスト

CSS

/*白線リスト*/
.list21 {
  background: #dadada; /*背景色*/
  padding: 0 0.5em !important; /*枠内余白*/
  position: relative; /*通常の表示位置が基準*/
}
.list21 li {
  line-height: 1.5; /*行の高さ*/
  padding: 0.5em 0 0.5em 1.5em; /*行の余白*/
  border-bottom: 2px solid white; /*下線*/
  list-style-type: none!important; /*行の頭なし*/
}
.list21 li:before {
  font-family: FontAwesome; /*フォント名*/
  content: "\f00c";/*アイコン種類*/
  position: absolute; /*親要素の左上基準*/
  left : 0.5em; /*左端からのアイコンまで*/
  color: #668ad8; /*アイコン色*/
}
.list21 li:last-of-type {
  border-bottom: none;/*最後の線だけ消す*/
}

HTML

<ul class="list21">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ul>

記事をプレビュー表示したとき

  • サンプル１
  • サンプル２
  • サンプル３

フラットリスト

CSS

/*フラットリスト*/
.list22 {
  padding: 0; /*枠内余白*/
  position: relative; /*通常の表示位置が基準*/
}
.list22 li {
  color: white; /*文字色*/
  background: #81d0cb; /*背景色*/
  line-height: 1.5; /*行の高さ*/
  padding: 0.5em 0.5em 0.5em 2em; /*行の余白*/
  border-bottom: 2px solid white; /*下線*/
  list-style-type: none!important; /*行の頭なし*/
  font-weight: bold; /*好みで太字に*/
}
.list22 li:before {
  font-family: FontAwesome; /*フォント名*/
  content: "\f14a"; /*アイコン種類*/
  position: absolute; /*親要素の左上基準*/
  left : 0.5em; /*左端からのアイコンまでの距離*/
  color: white; /*アイコン色*/
}

HTML

<ul class="list22">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ul>

記事をプレビュー表示したとき

  • サンプル１
  • サンプル２
  • サンプル３

青色破線リスト

CSS

/*青色破線リスト*/
.list23 {
  padding: 0; /*枠内余白*/
  position: relative; /*通常の表示位置が基準*/
}
.list23 li {
  color: white; /*文字色*/
  background: #2d8fdd; /*背景色*/
  line-height: 1.5; /*行の高さ*/
  padding: 0.5em 0.5em 0.5em 2em; /*行の余白*/
  border-bottom: 1px dashed white; /*下線*/
  list-style-type: none!important; /*行の頭なし*/
}
.list23 li:before {
  font-family: FontAwesome; /*フォント名*/
  content: "\f040"; /*アイコン種類*/
  position: absolute; /*親要素の左上基準*/
  left : 0.5em/*左端からのアイコンまでの距離*/;
  color: white;/*アイコン色*/
}
.list23 li:last-of-type {
  border-bottom: none;/*最後のliの線だけ消す*/
}

HTML

<ul class="list23">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ul>

記事をプレビュー表示したとき

  • サンプル１
  • サンプル２
  • サンプル３

アイコン四角リスト

CSS

/*アイコン四角リスト*/
.list24 {
  padding: 0; /*枠内余白*/
}
.list24 li {
  color: black; /*文字色*/
  position:relative; /*通常の表示位置が基準*/
  background: #f1f8ff;/*バーの色*/
  line-height: 1.5; /*行の高さ*/
  padding: 0.5em; /*行余白*/
  margin-bottom: 4px; /*行の下余白*/
  border-left : solid 35px #5c9ee7;/*先の色＝アイコン裏の色*/
  list-style-type: none!important; /*行の頭なし*/
}
.list24 li:before {
  font-family: FontAwesome; /*フォント名*/
  content: "\f040"; /*アイコン種類*/
  position: absolute; /*親要素の左上基準*/
  display: block; /*表示位置*/
  padding: 0.5em; /*アイコン余白*/
  width: 1.2em; /*アイコン幅*/
  color: white; /*アイコン色*/
  font-weight: normal;/*アイコンは太字にしない*/
  text-align: center; /*アイコン位置*/
  left : -35px; /*左端からのアイコンまでの距離*/
  /*以下 上下中央寄せのため*/
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

HTML

<ul class="list24">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ul>

記事をプレビュー表示したとき

  • サンプル１
  • サンプル２
  • サンプル３

丸番号リスト

CSS

/*丸番号リスト*/
.list25 {
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding:0.5em; /*枠内余白*/
  background: #f5faff; /*背景色*/
}
.list25 li {
  position: relative; /*通常の表示位置が基準*/
  padding-left: 30px; /*行の左側余白*/
  line-height: 1.5em; /*行の高さ*/
  padding: 0.5em 0.5em 0.5em 30px; /*行の余白*/
}
.list25 li:before{
  /* 以下数字をつける */
  position: absolute; /*親要素の左上基準*/
  counter-increment: number;
  content: counter(number);
  /*以下数字のデザイン変える*/
  display:inline-block; /*横並び*/
  background: #5c9ee7; /*数字の背景色*/
  color: white; /*数字の色*/
  font-family: 'Avenir','Arial Black','Arial',sans-serif; /*フォント名*/
  font-weight:bold; /*数字の太さ*/
  font-size: 15px; /*数字サイズ*/
  border-radius: 50%; /*数字の丸*/
  left: 0; /*左位置*/
  width: 25px; /*数字横幅*/
  height: 25px; /*数字高さ*/
  line-height: 25px; /*行の高さ*/
  text-align: center; /*数字の位置*/
  /*以下 上下中央寄せのため*/
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

HTML

<ol class="list25">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ol>

記事をプレビュー表示したとき

  1. サンプル１
  2. サンプル２
  3. サンプル３

丸番号と破線リスト

CSS

/*丸番号と破線リスト*/
.list26 {
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding: 0.3em 0.8em; /*枠内余白*/
  border: solid 2px #ffb107; /*枠の線*/
}
.list26 li {
  border-bottom: dashed 1px orange; /*破線*/
  position: relative; /*通常の表示位置が基準*/
  padding: 0.5em 0.5em 0.5em 30px; /*行の余白*/
  line-height: 1.5em; /*行の高さ*/
}
.list26 li:before{
  /* 以下数字をつける */
  position: absolute; /*親要素の左上基準*/
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display:inline-block; /*表示位置*/
  background: #ffb107; /*数字の背景色*/
  color: white; /*数字の色*/
  font-family: 'Avenir','Arial Black','Arial',sans-serif; /*フォント名*/
  font-weight:bold; /*数字の太さ*/
  font-size: 15px; /*数字のサイズ*/
  border-radius: 50%; /*数字の丸*/
  left: 0; /*左の位置*/
  width: 25px; /*数字の横幅*/
  height: 25px; /*数字の高さ*/
  line-height: 25px; /*行の高さ*/
  text-align: center; /*数字の位置*/
  /*以下 上下中央寄せのため*/
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.list26 li:last-of-type {
  border-bottom: none; /*最後のliの線だけ消す*/
}

HTML

<ol class="list26">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ol>

記事をプレビュー表示したとき

  1. サンプル１
  2. サンプル２
  3. サンプル３

四角番号と枠リスト

CSS

/*四角番号と枠リスト*/
.list27 {
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding:0.5em; /*枠内余白*/
  border: solid 3px skyblue; /*枠の線*/
}
.list27 li {
  position: relative; /*通常の表示位置が基準*/
  line-height: 1.5em; /*行の高さ*/
  padding: 0.5em 0.5em 0.5em 30px; /*行の余白*/
}
.list27 li:before{
  /* 以下数字をつける */
  position: absolute; /*親要素の左上基準*/
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display:inline-block; /*横並び*/
  background: #74c2f8; /*数字の背景色*/
  color: white; /*数字の色*/
  font-family: 'Avenir','Arial Black','Arial',sans-serif; /*フォント名*/
  font-weight:bold; /*数字の太さ*/
  font-size: 15px; /*数字のサイズ*/
  left: 0; /*左の位置*/
  width: 25px; /*数字の横幅*/
  height: 25px; /*数字の高さ*/
  line-height: 25px; /*行の高さ*/
  text-align: center; /*数字の位置*/
  /*以下上下中央寄せのため*/
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

HTML

<ol class="list27">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ol>

記事をプレビュー表示したとき

  1. サンプル１
  2. サンプル２
  3. サンプル３

四角番号リスト

CSS

/*四角番号リスト*/
.list28 {
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding:0; /*枠内余白*/
}
.list28 li {
  position: relative; /*通常の表示位置が基準*/
  padding: 0.5em; /*行の余白*/
  line-height: 1.5em; /*行の高さ*/
  background: #f1f8ff; /*背景色*/
  border-left : solid 35px red; /*数字の背景色*/
  margin-bottom: 5px; /*下側の余白*/
}
.list28 li:before{
  /* 以下数字をつける */
  position: absolute; /*親要素の左上基準*/
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display:inline-block; /*横並び*/
  color: white; /*数字の色*/
  font-family: 'Avenir','Arial Black','Arial',sans-serif; /*フォント名*/
  font-weight:bold; /*数字の太さ*/
  font-size: 1em; /*数字のサイズ*/
  top: 50%; /*数字の位置*/
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  left: -35px; /*数字の左位置*/
  width: 35px; /*数字の横幅*/
  height: 1em; /*数字の高さ*/
  line-height: 1; /*行の高さ*/
  text-align: center; /*数字の位置*/
}

HTML

<ol class="list28">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ol>

記事をプレビュー表示したとき

  1. サンプル１
  2. サンプル２
  3. サンプル３

手書きリスト

CSS

/*手書きリスト*/
.list29 {
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding:0; /*枠内余白*/
  border-top: solid 2px black; /*上線*/
  border-bottom: solid 2px black; /*下線*/
}
.list29 li {
  padding: 0.5em 0; /*行の余白*/
  position: relative; /*通常の表示位置が基準*/
  padding-left: 1.4em; /*左側の余白*/
  line-height: 1.5em; /*行の高さ*/
}
.list29 li:before{
  counter-increment: number;
  content: counter(number) ".";
  position: absolute; /*親要素の左上基準*/
  left: 0; /*左位置*/
  font-family: 'Bradley Hand','Segoe Script','Segoe Print',sans-serif;/*手書き風のフォント*/
  font-size: 1.3em;/*フォントサイズ*/
}

HTML

<ol class="list29">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ol>

記事をプレビュー表示したとき

  1. サンプル１
  2. サンプル２
  3. サンプル３

ふきだし番号リスト

CSS

/*ふきだし番号リスト*/
.list30 {
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding:0.5em; /*枠内余白*/
  border: solid 2px #5c9ee7; /*枠の線*/
}
.list30 li {
  position: relative; /*通常の表示位置が基準*/
  padding: 0.5em 0.5em 0.5em 35px; /*行の余白*/
  line-height: 1.5em; /*行の高さ*/
}
.list30 li:before{
  /* 以下数字をつける */
  position: absolute; /*親要素の左上基準*/
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display:inline-block; /*横並び*/
  background: #5c9ee7; /*数字の背景色*/
  color: white; /*数字の色*/
  font-family: 'Avenir','Arial Black','Arial',sans-serif; /*フォント名*/
  font-weight:bold; /*数字の太さ*/
  font-size: 15px; /*数字のサイズ*/
  border-radius: 50%;/*円にする*/
  left: 0; /*左の位置*/
  width: 25px; /*丸の横幅*/
  height: 25px; /*丸の高さ*/
  line-height: 25px; /*行の高さ*/
  text-align: center; /*数字の位置*/
  /*以下 上下中央寄せのため*/
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.list30 li:after {/*吹き出しのちょこんと出た部分*/
  content: '';
  display: block;
  position: absolute; /*親要素の左上基準*/
  left: 20px;/*左からの位置*/
  height: 0;
  width: 0;
  border-top: 7px solid transparent; /*上側*/
  border-bottom: 7px solid transparent; /*下側*/
  border-left: 12px solid #5c9ee7; /*左側*/
  /*以下 上下中央寄せのため*/
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

HTML

<ol class="list30">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ol>

記事をプレビュー表示したとき

  1. サンプル１
  2. サンプル２
  3. サンプル３

タイトル付きリスト

CSS

/*タイトル付きリスト*/
.list31 {
  border: solid 2px #ffb03f; /*枠の線*/
  padding: 0.5em !important; /*枠内余白*/
  position: relative; /*通常の表示位置が基準*/
  margin-top: 2em; /*上側の余白*/
}
.list31 li {
  line-height: 1.5; /*行の高さ*/
  padding: 0.5em 0 0.5em 1.4em; /*行の余白*/
  border-bottom: dashed 1px silver; /*点線*/
  list-style-type: none!important; /*行の頭なし*/
}
.list31 li:last-of-type {
  border-bottom: none; /*一番下の点線なし*/
}
.list31 li:before {
  /*リスト内のアイコン*/
  font-family: FontAwesome; /*フォント名*/
  content: "\f138";/*アイコン種類*/
  position: absolute; /*親要素の左上基準*/
  left : 0.5em; /*左端からのアイコンまで*/
  color: #ffb03f; /*アイコン色*/
}
.list31 li:after {
  /*タイトルタブ*/
  background: #ffb03f; /*タイトル背景色*/
  color: #fff; /*タイトル文字の色*/
  font-weight: bold; /*タイトル文字の太さ*/
  position: absolute; /**/
  left: -2px; /*タイトルの位置*/
  bottom: 100%; /*タイトルの位置*/
  padding: 1px 7px; /*タイトルの余白*/
  content: "POINT";/*タブの文字*/
  letter-spacing: 0.05em;/*字間*/
}

HTML

<ul class="list31">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ul>

記事をプレビュー表示したとき

  • サンプル１
  • サンプル２
  • サンプル３

タイトルアイコン付きリスト

CSS

/*タイトルアイコン付きリスト*/
.list32 {
  border: solid 2px #ffb03f; /*枠の線*/
  padding: 0.5em 1em 0.5em 2.3em; /*枠内余白*/
  position: relative; /*通常の表示位置が基準*/
  margin-top: 2em; /*上側余白*/
}
.list32 li {
  line-height: 1.5; /*行の高さ*/
  padding: 0.5em 0; /*行の余白*/
  list-style-type: none!important; /*行の頭なし*/
}
.list32 li:before {
  /*リストのアイコン*/
  font-family: FontAwesome; /*フォント名*/
  content: "\f00c"; /*アイコン種類*/
  position: absolute; /*親要素の左上基準*/
  left : 1em; /*左端からのアイコンまでの距離*/
  color: #ffb03f; /*アイコン色*/
}
.list32 li:after {
  /*タブ*/
  background: #ffb03f; /*タイトル背景色*/
  color: #fff; /*タイトル文字*/
  font-family: "FontAwesome",'Avenir','Arial',sans-serif; /*フォント名*/
  position: absolute; /*親要素の左上基準*/
  left: -2px; /*タイトル位置*/
  bottom: 100%; /*タイトル位置*/
  padding: 1px 7px; /*タイトル余白*/
  content: '\f0a7  チェック';/*アイコンコード＋文字*/
  letter-spacing: 0.05em;/*字間*/
}

HTML

<ul class="list32">
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ul>

記事をプレビュー表示したとき

  • サンプル１
  • サンプル２
  • サンプル３