【コピペ可】おしゃれなリスト(箇条書き)デザイン30選！！ファイルあり

2021年5月17日Coding

この記事は、HTMLとCSSだけで箇条書きリスト（ul、ol、li）の色々な用途で使用可能なおしゃれなコーティングデザインをいくつか紹介いたします。ブログやHPで要点などをまとめる時にでも使って下さい。

HTMLとCSSをコピペするだけで反映されます。コピペした後に自分なりに編集してオリジナルのデザインにしてみて下さい。最後にhtml、css、scss、jsの入ったファイルのダウンロードが可能です。是非活用下さい

使い方

HTMLをbodyの好きな箇所にコピペ
CSSをスタイルシートにコピペ
DLファイルのscssを使用したい場合はこの記事を参考にして下さい

注意点

FontAwesomeやjQueryは自分で読み込んで下さい。
クラス名は各自で変更するなりして下さい。

WordPressでリストを作る方法（HTML記述コピペあり）については以下の記事から

WordPressでリストを作る方法(HTML記述コピペあり)

今回はWordPressで簡単にリストを作成する方法とHTMLの記述の仕方を紹介致します。【丸々コピペでOK】 ...

https://kt-life.net/wordpress-list/

1. デフォルト
2. 穴丸
3. 点に色
4. 擬似要素に▶︎
5. 擬似要素にアイコンフォント
6. 奇数にのみ色
7. 偶数のみインデントを下げる
8. 横に並べる
9. 2列に並べる
10. 背景と囲い
11. 左と下にボーダー線
12. 常に同じ長さの下線
13. 左右にスラッシュ
14. くっ付けずに左右上下に線
15. 背景色の中に
16. ボーダー線あり背景色の中
17. 2重ボーダー線あり背景色の中
18. 点線ボーダー線あり背景色の中
19. 上下にボーダー
20. 左右にボーダー
21. マウスホバー
22. マウスホバーup
23. マウスホバーdown
24. マウスホバー左から色変化
25. マウスホバー左から色変化2
26. マウスホバーborder
27. マウスホバーborder真ん中
28. タグ風
29. タグ風2
30. タグ風3
31. アニメーションフェードライト
32. アニメーションフェードレフト
33. アニメーションフェードアップ
34. アニメーションフェードダウン
35. 連続でフェードレフト
36. 連続でフェードアップ
37. 数字入り吹き出し風
38. 数字入り吹き出し風2
39. ファイルをダウンロードする
40. デザイン見本まとめ

デフォルト

リストデフォルト
リストデフォルト
リストデフォルト
リストデフォルト
リストデフォルト

数字リストデフォルト
数字リストデフォルト
数字リストデフォルト
数字リストデフォルト
数字リストデフォルト

HTML

<ul>
      <li>リストデフォルト</li>
      <li>リストデフォルト</li>
      <li>リストデフォルト</li>
      <li>リストデフォルト</li>
      <li>リストデフォルト</li>
    </ul>

    <ol>
      <li>数字リストデフォルト</li>
      <li>数字リストデフォルト</li>
      <li>数字リストデフォルト</li>
      <li>数字リストデフォルト</li>
      <li>数字リストデフォルト</li>
    </ol>

穴丸

HTML

<ul class="list_design001">
      <li>リストデザイン001</li>
      <li>リストデザイン001</li>
      <li>リストデザイン001</li>
      <li>リストデザイン001</li>
      <li>リストデザイン001</li>
    </ul>

CSS

/* リストデザイン001 */
.list_design001 li {
  list-style: circle;
}

点に色

HTML

<ul class="list_design002">
      <li><span>リストデザイン002</span></li>
      <li><span>リストデザイン002</span></li>
      <li><span>リストデザイン002</span></li>
      <li><span>リストデザイン002</span></li>
      <li><span>リストデザイン002</span></li>
    </ul>

CSS

/* リストデザイン002 */
.list_design002 li {
  color: #f4a006;
}

.list_design002 li span {
  color: #333;
}

擬似要素に▶︎

HTML

<ul class="list_design003">
      <li>リストデザイン003</li>
      <li>リストデザイン003</li>
      <li>リストデザイン003</li>
      <li>リストデザイン003</li>
      <li>リストデザイン003</li>
    </ul>

CSS

/* リストデザイン003 */
.list_design003 {
  padding: 0 20px;
}

.list_design003 li {
  list-style: none;
}

.list_design003 li::before {
  content: '▶︎';
  padding: 0 5px;
}

擬似要素にアイコンフォント

HTML

<ul class="list_design004">
      <li>リストデザイン004</li>
      <li>リストデザイン004</li>
      <li>リストデザイン004</li>
      <li>リストデザイン004</li>
      <li>リストデザイン004</li>
    </ul>

CSS

/* リストデザイン004 */
.list_design004 {
  padding: 0 20px;
}

.list_design004 li {
  list-style: none;
}

.list_design004 li::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f00c";
  padding: 0 5px;
}

奇数にのみ色

HTML

<ul class="list_design005">
      <li>リストデザイン005</li>
      <li>リストデザイン005</li>
      <li>リストデザイン005</li>
      <li>リストデザイン005</li>
      <li>リストデザイン005</li>
    </ul>

CSS

/* リストデザイン005 */
.list_design005 li:nth-child(odd) {
  color: #f4a006;
}

偶数のみインデントを下げる

HTML

<ul class="list_design006">
      <li>リストデザイン006</li>
      <li>リストデザイン006</li>
      <li>リストデザイン006</li>
      <li>リストデザイン006</li>
      <li>リストデザイン006</li>
    </ul>

CSS

/* リストデザイン006 */
.list_design006 li:nth-child(even) {
  list-style: circle;
  margin: 0 0 0 1.5rem;
}

横に並べる

HTML

<ul class="list_design007">
      <li>リストデザイン007</li>
      <li>リストデザイン007</li>
      <li>リストデザイン007</li>
      <li>リストデザイン007</li>
      <li>リストデザイン007</li>
    </ul>

CSS

/* リストデザイン007 */
.list_design007 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
}

.list_design007 li {
  list-style: none;
  margin: 1rem;
}

2列に並べる

HTML

<ul class="list_design008">
      <li>リストデザイン008</li>
      <li>リストデザイン008</li>
      <li>リストデザイン008</li>
      <li>リストデザイン008</li>
      <li>リストデザイン008</li>
    </ul>

CSS

/* リストデザイン008 */
.list_design008 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  width: 515px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.list_design008 li {
  list-style: none;
  margin: 1rem;
}

背景と囲い

HTML

<ul class="list_design009">
      <li>リストデザイン009</li>
      <li>リストデザイン009</li>
      <li>リストデザイン009</li>
      <li>リストデザイン009</li>
      <li>リストデザイン009</li>
    </ul>

CSS

/* リストデザイン009 */
.list_design009 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
}

.list_design009 li {
  list-style: none;
  margin: 10px;
  border: solid #333 1px;
  border-radius: 5px;
  background: #ddd;
}

左と下にボーダー線

HTML

<ul class="list_design010">
      <li>リストデザイン010</li>
      <li>リストデザイン010</li>
      <li>リストデザイン010</li>
      <li>リストデザイン010</li>
      <li>リストデザイン010</li>
    </ul>

CSS

/* リストデザイン010 */
.list_design010 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
}

.list_design010 li {
  list-style: none;
  margin: 10px;
  padding: 0 0 0 5px;
  border-bottom: solid #999 1px;
  border-left: solid #333 2.5px;
}

常に同じ長さの下線

HTML

<ul class="list_design011">
      <li>リストデザイン011</li>
      <li>リストデザイン011</li>
      <li>リストデザイン011</li>
      <li>リストデザイン011</li>
      <li>リストデザイン011</li>
    </ul>

CSS

/* リストデザイン011 */
.list_design011 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
}

.list_design011 li {
  list-style: none;
  margin: 1rem;
  position: relative;
}

.list_design011 li::before {
  content: '　';
  border-bottom: solid #f4a006 3px;
  padding: 0 2rem;
  position: absolute;
  top: 1px;
}

左右にスラッシュ

HTML

<ul class="list_design012">
      <li>リストデザイン012</li>
      <li>リストデザイン012</li>
      <li>リストデザイン012</li>
      <li>リストデザイン012</li>
      <li>リストデザイン012</li>
    </ul>

CSS

/* リストデザイン012 */
.list_design012 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
}

.list_design012 li {
  list-style: none;
  margin: 10px;
  position: relative;
}

.list_design012 li::before {
  content: '/';
  color: #f4a006;
  padding: 0 3px;
}

.list_design012 li::after {
  content: '/';
  color: #f4a006;
  font-size: 18px;
  padding: 0 3px;
}

くっ付けずに左右上下に線

HTML

<ul class="list_design013">
      <li>リストデザイン013</li>
      <li>リストデザイン013</li>
      <li>リストデザイン013</li>
      <li>リストデザイン013</li>
      <li>リストデザイン013</li>
    </ul>

CSS

/* リストデザイン013 */
.list_design013 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
}

.list_design013 li {
  list-style: none;
  margin: 10px;
  position: relative;
  border-bottom: solid #f4a006 1px;
  border-top: solid #f4a006 1px;
}

.list_design013 li::before {
  content: '|';
  font-weight: bold;
  color: #f4a006;
  position: absolute;
  left: -5px;
  bottom: 0px;
}

.list_design013 li::after {
  content: '|';
  font-weight: bold;
  color: #f4a006;
  position: absolute;
  right: -5px;
  bottom: 0px;
}

背景色の中に

HTML

<ul class="list_design014">
      <li>リストデザイン014</li>
      <li>リストデザイン014</li>
      <li>リストデザイン014</li>
      <li>リストデザイン014</li>
      <li>リストデザイン014</li>
    </ul>

CSS

/* リストデザイン014 */
.list_design014 {
  color: #333;
  background: rgba(244, 160, 6, 0.1);
  display: inline-block;
  padding: 1rem 2rem;
  margin: 1rem;
}

ボーダー線あり背景色の中

HTML

<ul class="list_design015">
      <li>リストデザイン015</li>
      <li>リストデザイン015</li>
      <li>リストデザイン015</li>
      <li>リストデザイン015</li>
      <li>リストデザイン015</li>
    </ul>

CSS

/* リストデザイン015 */
.list_design015 {
  color: #333;
  background: rgba(244, 160, 6, 0.1);
  display: inline-block;
  padding: 1rem 2rem;
  margin: 1rem;
  border: solid #333 1px;
}

2重ボーダー線あり背景色の中

HTML

<ul class="list_design016">
      <li>リストデザイン016</li>
      <li>リストデザイン016</li>
      <li>リストデザイン016</li>
      <li>リストデザイン016</li>
      <li>リストデザイン016</li>
    </ul>

CSS

/* リストデザイン016 */
.list_design016 {
  color: #333;
  background: rgba(244, 160, 6, 0.1);
  display: inline-block;
  padding: 1rem 2rem;
  margin: 1rem;
  border: double #333 4px;
}

点線ボーダー線あり背景色の中

HTML

<ul class="list_design017">
      <li>リストデザイン017</li>
      <li>リストデザイン017</li>
      <li>リストデザイン017</li>
      <li>リストデザイン017</li>
      <li>リストデザイン017</li>
    </ul>

CSS

/* リストデザイン017 */
.list_design017 {
  color: #333;
  background: rgba(244, 160, 6, 0.1);
  display: inline-block;
  padding: 1rem 2rem;
  margin: 1rem;
  border: dashed #333 2px;
}

上下にボーダー

HTML

<ul class="list_design018">
      <li>リストデザイン018</li>
      <li>リストデザイン018</li>
      <li>リストデザイン018</li>
      <li>リストデザイン018</li>
      <li>リストデザイン018</li>
    </ul>

CSS

/* リストデザイン018 */
.list_design018 {
  color: #333;
  display: inline-block;
  padding: 1rem 2rem;
  margin: 1rem;
  border-top: solid #333 1px;
  border-bottom: solid #333 1px;
}

左右にボーダー

HTML

<ul class="list_design019">
      <li>リストデザイン019</li>
      <li>リストデザイン019</li>
      <li>リストデザイン019</li>
      <li>リストデザイン019</li>
      <li>リストデザイン019</li>
    </ul>

CSS

/* リストデザイン019 */
.list_design019 {
  color: #333;
  display: inline-block;
  padding: 1rem 2rem;
  margin: 1rem;
  border-left: solid #333 1px;
  border-right: solid #333 1px;
}

マウスホバー

HTML

<ul class="list_design020">
      <li>リストデザイン020</li>
      <li>リストデザイン020</li>
      <li>リストデザイン020</li>
      <li>リストデザイン020</li>
      <li>リストデザイン020</li>
    </ul>

CSS

/* リストデザイン020 */
.list_design020 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  list-style: none;
}

.list_design020 li {
  margin: 3px;
  padding: 1rem;
  color: #fff;
  background: #f4a006;
  border-radius: 3px;
  cursor: pointer;
  -webkit-transition: all  0.3s ease;
  transition: all  0.3s ease;
}

.list_design020 li:hover {
  background: rgba(244, 160, 6, 0.1);
  color: #333;
  -webkit-transition: all  0.3s ease;
  transition: all  0.3s ease;
}

マウスホバーup

HTML

<ul class="list_design021">
      <li>リストデザイン021</li>
      <li>リストデザイン021</li>
      <li>リストデザイン021</li>
      <li>リストデザイン021</li>
      <li>リストデザイン021</li>
    </ul>

CSS

/* リストデザイン021 */
.list_design021 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  list-style: none;
}

.list_design021 li {
  margin: 3px;
  padding: 1rem;
  color: #fff;
  background: #f4a006;
  border-radius: 3px;
  cursor: pointer;
  -webkit-transition: all  .3s ease;
  transition: all  .3s ease;
}

.list_design021 li:hover {
  -webkit-transition: all  .3s ease;
  transition: all  .3s ease;
  -webkit-transform: translateY(-10px);
          transform: translateY(-10px);
}

マウスホバーdown

HTML

<ul class="list_design022">
      <li>リストデザイン022</li>
      <li>リストデザイン022</li>
      <li>リストデザイン022</li>
      <li>リストデザイン022</li>
      <li>リストデザイン022</li>
    </ul>

CSS

/* リストデザイン022 */
.list_design022 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  list-style: none;
}

.list_design022 li {
  margin: 3px;
  padding: 1rem;
  color: #fff;
  background: #f4a006;
  border-radius: 3px;
  cursor: pointer;
  -webkit-transition: all  .3s ease;
  transition: all  .3s ease;
}

.list_design022 li:hover {
  -webkit-transition: all  .3s ease;
  transition: all  .3s ease;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
}

マウスホバー左から色変化

HTML

<ul class="list_design023">
      <li>リストデザイン023</li>
      <li>リストデザイン023</li>
      <li>リストデザイン023</li>
      <li>リストデザイン023</li>
      <li>リストデザイン023</li>
    </ul>

CSS

/* リストデザイン023 */
.list_design023 {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
}

.list_design023 li {
  background: #333;
  color: #fff;
  overflow: hidden;
  padding: 1rem;
  margin: 3px;
  position: relative;
  cursor: pointer;
}

.list_design023 li::before {
  background: #fff;
  content: "";
  display: block;
  height: 100%;
  left: -96%;
  opacity: 0.3;
  position: absolute;
  -webkit-transition: .4s;
  transition: .4s;
  top: 0px;
  width: 100%;
}

.list_design023 li:hover:before {
  left: 0;
}

マウスホバー左から色変化2

HTML

<ul class="list_design024">
      <li>リストデザイン024</li>
      <li>リストデザイン024</li>
      <li>リストデザイン024</li>
      <li>リストデザイン024</li>
      <li>リストデザイン024</li>
    </ul>

CSS

/* リストデザイン024 */
.list_design024 {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
}

.list_design024 li {
  background: #f4a006;
  color: #fff;
  overflow: hidden;
  padding: 1rem;
  margin: 3px;
  position: relative;
  cursor: pointer;
}

.list_design024 li::before {
  background: #fff;
  content: "";
  display: block;
  height: 100%;
  left: -96%;
  opacity: 0.3;
  position: absolute;
  -webkit-transition: .4s;
  transition: .4s;
  top: 0px;
  width: 100%;
}

.list_design024 li:hover:before {
  left: 0;
}

マウスホバーborder

HTML

<ul class="list_design025">
      <li>リストデザイン025</li>
      <li>リストデザイン025</li>
      <li>リストデザイン025</li>
      <li>リストデザイン025</li>
      <li>リストデザイン025</li>
    </ul>

CSS

/* リストデザイン025 */
.list_design025 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  list-style: none;
}

.list_design025 li {
  margin: 3px 1rem;
  position: relative;
  cursor: pointer;
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
}

.list_design025 li::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #f4a006;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
}

.list_design025 li:hover::after {
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}

マウスホバーborder真ん中

HTML

<ul class="list_design026">
      <li>リストデザイン026</li>
      <li>リストデザイン026</li>
      <li>リストデザイン026</li>
      <li>リストデザイン026</li>
      <li>リストデザイン026</li>
    </ul>

CSS

/* リストデザイン026 */
.list_design026 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  list-style: none;
}

.list_design026 li {
  margin: 3px 1rem;
  position: relative;
  cursor: pointer;
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
}

.list_design026 li::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #f4a006;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transform-origin: center top;
          transform-origin: center top;
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
}

.list_design026 li:hover::after {
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}

タグ風

HTML

<ul class="list_design027">
      <li>リストデザイン027</li>
      <li>リストデザイン027</li>
      <li>リストデザイン027</li>
      <li>リストデザイン027</li>
      <li>リストデザイン027</li>
    </ul>

CSS

/* リストデザイン027 */
.list_design027 {
  list-style: none;
  width: 100%;
}

.list_design027 li {
  color: #333;
  border-left: solid 8px #f4a006;
  background: rgba(244, 160, 6, 0.1);
  margin-bottom: 5px;
  padding: 0.5rem;
  width: 25%;
}

タグ風2

HTML

<ul class="list_design028">
      <li>リストデザイン028</li>
      <li>リストデザイン028</li>
      <li>リストデザイン028</li>
      <li>リストデザイン028</li>
      <li>リストデザイン028</li>
    </ul>

CSS

/* リストデザイン028 */
.list_design028 {
  list-style: none;
  width: 100%;
}

.list_design028 li {
  color: #333;
  border-left: solid 8px #333;
  background: #999;
  margin-bottom: 5px;
  padding: 0.5rem;
  width: 25%;
  color: #fff;
}

タグ風3

HTML

<ul class="list_design029">
      <li>リストデザイン029</li>
      <li>リストデザイン029</li>
      <li>リストデザイン029</li>
      <li>リストデザイン029</li>
      <li>リストデザイン029</li>
    </ul>

CSS

/* リストデザイン029 */
.list_design029 {
  list-style: none;
  width: 100%;
}

.list_design029 li {
  color: #333;
  border-left: solid 8px #f4a006;
  background: #f4a006;
  margin-bottom: 5px;
  padding: 0.5rem;
  width: 25%;
  color: #fff;
  border-radius: 25px 0px 0px 25px;
}

.list_design029 li:before {
  display: inline-block;
  vertical-align: middle;
  content: '';
  width: 1rem;
  height: 1rem;
  background: #fff;
  border-radius: 50%;
  margin-right: 8px;
}

アニメーションフェードライト

HTML

<ul class="list_design030">
      <li class="animation">リストデザイン030</li>
      <li class="animation">リストデザイン030</li>
      <li class="animation">リストデザイン030</li>
      <li class="animation">リストデザイン030</li>
      <li class="animation">リストデザイン030</li>
    </ul>

CSS

/* リストデザイン030 */
.list_design030 {
  list-style: none;
  width: 300px;
}

.list_design030 .animation {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translate(-100px, 0px);
          transform: translate(-100px, 0px);
  -webkit-transition: all 1s;
  transition: all 1s;
  width: 100%;
}

.list_design030 .animation.is-show {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.list_design030 li {
  color: #333;
  border-left: solid 8px #f4a006;
  background: #eee;
  margin-bottom: 5px;
  padding: 0.5rem;
  width: 25%;
}

JavaScript

// アニメーション
function showElementAnimation() {
  var element = document.getElementsByClassName('animation');
  if(!element) return;
  var showTiming = window.innerHeight > 768 ? 200 : 40; // 要素が出てくるタイミングはここで調整
  var scrollY = window.pageYOffset;
  var windowH = window.innerHeight;
  for(var i=0;i<element.length;i++) { var elemClientRect = element[i].getBoundingClientRect(); var elemY = scrollY + elemClientRect.top; if(scrollY + windowH - showTiming > elemY) {
      element[i].classList.add('is-show');
    } else if(scrollY + windowH < elemY) {
      element[i].classList.remove('is-show');
    }
  }
}
showElementAnimation();
window.addEventListener('scroll', showElementAnimation);

アニメーションフェードレフト

HTML

<ul class="list_design031">
      <li class="animation">リストデザイン031</li>
      <li class="animation">リストデザイン031</li>
      <li class="animation">リストデザイン031</li>
      <li class="animation">リストデザイン031</li>
      <li class="animation">リストデザイン031</li>
    </ul>

CSS

/* リストデザイン031 */
.list_design031 {
  list-style: none;
  width: 300px;
}

.list_design031 .animation {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translate(100px, 0px);
          transform: translate(100px, 0px);
  -webkit-transition: all 1s;
  transition: all 1s;
  width: 100%;
}

.list_design031 .animation.is-show {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.list_design031 li {
  color: #333;
  border-left: solid 8px #f4a006;
  background: #eee;
  margin-bottom: 5px;
  padding: 0.5rem;
  width: 25%;
}

JavaScript

// アニメーション
function showElementAnimation() {
  var element = document.getElementsByClassName('animation');
  if(!element) return;
  var showTiming = window.innerHeight > 768 ? 200 : 40; // 要素が出てくるタイミングはここで調整
  var scrollY = window.pageYOffset;
  var windowH = window.innerHeight;
  for(var i=0;i<element.length;i++) { var elemClientRect = element[i].getBoundingClientRect(); var elemY = scrollY + elemClientRect.top; if(scrollY + windowH - showTiming > elemY) {
      element[i].classList.add('is-show');
    } else if(scrollY + windowH < elemY) {
      element[i].classList.remove('is-show');
    }
  }
}
showElementAnimation();
window.addEventListener('scroll', showElementAnimation);

アニメーションフェードアップ

HTML

<ul class="list_design032">
      <li class="animation">リストデザイン032</li>
      <li class="animation">リストデザイン032</li>
      <li class="animation">リストデザイン032</li>
      <li class="animation">リストデザイン032</li>
      <li class="animation">リストデザイン032</li>
    </ul>

CSS

/* リストデザイン032 */
.list_design032 {
  list-style: none;
  width: 300px;
}

.list_design032 .animation {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translate(0px, 100px);
          transform: translate(0px, 100px);
  -webkit-transition: all 1s;
  transition: all 1s;
  width: 100%;
}

.list_design032 .animation.is-show {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.list_design032 li {
  color: #333;
  border-left: solid 8px #f4a006;
  background: #eee;
  margin-bottom: 5px;
  padding: 0.5rem;
  width: 25%;
}

JavaScript

// アニメーション
function showElementAnimation() {
  var element = document.getElementsByClassName('animation');
  if(!element) return;
  var showTiming = window.innerHeight > 768 ? 200 : 40; // 要素が出てくるタイミングはここで調整
  var scrollY = window.pageYOffset;
  var windowH = window.innerHeight;
  for(var i=0;i<element.length;i++) { var elemClientRect = element[i].getBoundingClientRect(); var elemY = scrollY + elemClientRect.top; if(scrollY + windowH - showTiming > elemY) {
      element[i].classList.add('is-show');
    } else if(scrollY + windowH < elemY) {
      element[i].classList.remove('is-show');
    }
  }
}
showElementAnimation();
window.addEventListener('scroll', showElementAnimation);

アニメーションフェードダウン

HTML

<ul class="list_design033">
      <li class="animation">リストデザイン033</li>
      <li class="animation">リストデザイン033</li>
      <li class="animation">リストデザイン033</li>
      <li class="animation">リストデザイン033</li>
      <li class="animation">リストデザイン033</li>
    </ul>

CSS

/* リストデザイン033 */
.list_design033 {
  list-style: none;
  width: 300px;
}

.list_design033 .animation {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translate(0px, -100px);
          transform: translate(0px, -100px);
  -webkit-transition: all 1s;
  transition: all 1s;
  width: 100%;
}

.list_design033 .animation.is-show {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.list_design033 li {
  color: #333;
  border-left: solid 8px #f4a006;
  background: #eee;
  margin-bottom: 5px;
  padding: 0.5rem;
  width: 25%;
}

JavaScript

// アニメーション
function showElementAnimation() {
  var element = document.getElementsByClassName('animation');
  if(!element) return;
  var showTiming = window.innerHeight > 768 ? 200 : 40; // 要素が出てくるタイミングはここで調整
  var scrollY = window.pageYOffset;
  var windowH = window.innerHeight;
  for(var i=0;i<element.length;i++) { var elemClientRect = element[i].getBoundingClientRect(); var elemY = scrollY + elemClientRect.top; if(scrollY + windowH - showTiming > elemY) {
      element[i].classList.add('is-show');
    } else if(scrollY + windowH < elemY) {
      element[i].classList.remove('is-show');
    }
  }
}
showElementAnimation();
window.addEventListener('scroll', showElementAnimation);

連続でフェードレフト

HTML

<ul class="list_design034">
      <li class="animation">リストデザイン034</li>
      <li class="animation">リストデザイン034</li>
      <li class="animation">リストデザイン034</li>
      <li class="animation">リストデザイン034</li>
      <li class="animation">リストデザイン034</li>
    </ul>

CSS

/* リストデザイン034 */
.list_design034 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  list-style: none;
}

.list_design034 .animation:nth-child(1) {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translate(-100px, 0px);
          transform: translate(-100px, 0px);
  -webkit-transition: all 1s;
  transition: all 1s;
  width: 100%;
}

.list_design034 .animation:nth-child(1).is-show {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.list_design034 .animation:nth-child(2) {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translate(-100px, 0px);
          transform: translate(-100px, 0px);
  -webkit-transition: all 1.2s;
  transition: all 1.2s;
  width: 100%;
}

.list_design034 .animation:nth-child(2).is-show {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.list_design034 .animation:nth-child(3) {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translate(-100px, 0px);
          transform: translate(-100px, 0px);
  -webkit-transition: all 1.4s;
  transition: all 1.4s;
  width: 100%;
}

.list_design034 .animation:nth-child(3).is-show {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.list_design034 .animation:nth-child(4) {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translate(-100px, 0px);
          transform: translate(-100px, 0px);
  -webkit-transition: all 1.6s;
  transition: all 1.6s;
  width: 100%;
}

.list_design034 .animation:nth-child(4).is-show {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.list_design034 .animation:nth-child(5) {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translate(-100px, 0px);
          transform: translate(-100px, 0px);
  -webkit-transition: all 1.8s;
  transition: all 1.8s;
  width: 100%;
}

.list_design034 .animation:nth-child(5).is-show {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.list_design034 li {
  margin: 3px;
  padding: 1rem;
  text-align: center;
  color: #fff;
  background: #f4a006;
  border-radius: 3px;
}

JavaScript

// アニメーション
function showElementAnimation() {
  var element = document.getElementsByClassName('animation');
  if(!element) return;
  var showTiming = window.innerHeight > 768 ? 200 : 40; // 要素が出てくるタイミングはここで調整
  var scrollY = window.pageYOffset;
  var windowH = window.innerHeight;
  for(var i=0;i<element.length;i++) { var elemClientRect = element[i].getBoundingClientRect(); var elemY = scrollY + elemClientRect.top; if(scrollY + windowH - showTiming > elemY) {
      element[i].classList.add('is-show');
    } else if(scrollY + windowH < elemY) {
      element[i].classList.remove('is-show');
    }
  }
}
showElementAnimation();
window.addEventListener('scroll', showElementAnimation);

連続でフェードアップ

HTML

<ul class="list_design035">
      <li class="animation">リストデザイン035</li>
      <li class="animation">リストデザイン035</li>
      <li class="animation">リストデザイン035</li>
      <li class="animation">リストデザイン035</li>
      <li class="animation">リストデザイン035</li>
    </ul>

CSS

/* リストデザイン035 */
.list_design035 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  list-style: none;
}

.list_design035 .animation:nth-child(1) {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translate(0px, 100px);
          transform: translate(0px, 100px);
  -webkit-transition: all 1s;
  transition: all 1s;
  width: 100%;
}

.list_design035 .animation:nth-child(1).is-show {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.list_design035 .animation:nth-child(2) {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translate(0px, 100px);
          transform: translate(0px, 100px);
  -webkit-transition: all 1.2s;
  transition: all 1.2s;
  width: 100%;
}

.list_design035 .animation:nth-child(2).is-show {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.list_design035 .animation:nth-child(3) {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translate(0px, 100px);
          transform: translate(0px, 100px);
  -webkit-transition: all 1.4s;
  transition: all 1.4s;
  width: 100%;
}

.list_design035 .animation:nth-child(3).is-show {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.list_design035 .animation:nth-child(4) {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translate(0px, 100px);
          transform: translate(0px, 100px);
  -webkit-transition: all 1.6s;
  transition: all 1.6s;
  width: 100%;
}

.list_design035 .animation:nth-child(4).is-show {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.list_design035 .animation:nth-child(5) {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translate(0px, 100px);
          transform: translate(0px, 100px);
  -webkit-transition: all 1.8s;
  transition: all 1.8s;
  width: 100%;
}

.list_design035 .animation:nth-child(5).is-show {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.list_design035 li {
  margin: 3px;
  padding: 1rem;
  text-align: center;
  color: #fff;
  background: #f4a006;
  border-radius: 3px;
}

JavaScript

// アニメーション
function showElementAnimation() {
  var element = document.getElementsByClassName('animation');
  if(!element) return;
  var showTiming = window.innerHeight > 768 ? 200 : 40; // 要素が出てくるタイミングはここで調整
  var scrollY = window.pageYOffset;
  var windowH = window.innerHeight;
  for(var i=0;i<element.length;i++) { var elemClientRect = element[i].getBoundingClientRect(); var elemY = scrollY + elemClientRect.top; if(scrollY + windowH - showTiming > elemY) {
      element[i].classList.add('is-show');
    } else if(scrollY + windowH < elemY) {
      element[i].classList.remove('is-show');
    }
  }
}
showElementAnimation();
window.addEventListener('scroll', showElementAnimation);

数字入り吹き出し風

HTML

<ol class="list_design036">
  <li>リストデザイン036</li>
  <li>リストデザイン036</li>
  <li>リストデザイン036</li>
  <li>リストデザイン036</li>
  <li>リストデザイン036</li>
</ol>

CSS

/* リストデザイン036 */
.list_design036 {
  list-style: none;
  counter-reset: list;
  display: inline-block;
  padding: 1rem 2rem;
  margin: 1rem;
}

.list_design036 li {
  position: relative;
  padding: 0 1rem;
  margin: 1rem;
  padding-left: 43px;
  line-height: 30px;
  border: 2px solid #999;
  color: #333;
}

.list_design036 li:before {
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: 0px;
  width: 30px;
  height: 30px;
  text-align: center;
  color: #fff;
  line-height: 30px;
  background: #999;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.list_design036 li:after {
  content: "";
  display: block;
  position: absolute;
  left: 30px;
  height: 0;
  width: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid #999;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

数字入り吹き出し風2

HTML

<ol class="list_design037">
      <li>リストデザイン037</li>
      <li>リストデザイン037</li>
      <li>リストデザイン037</li>
      <li>リストデザイン037</li>
      <li>リストデザイン037</li>
    </ol>

CSS

/* リストデザイン037 */
.list_design037 {
  list-style: none;
  counter-reset: list;
  display: inline-block;
  padding: 1rem 2rem;
  margin: 1rem;
}

.list_design037 li {
  position: relative;
  padding: 0 1rem;
  margin: 1rem 4rem;
  line-height: 30px;
  border: 2px solid #999;
  color: #333;
}

.list_design037 li:before {
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: -45px;
  width: 30px;
  height: 30px;
  text-align: center;
  color: #fff;
  line-height: 30px;
  background: #999;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.list_design037 li:after {
  content: "";
  display: block;
  position: absolute;
  left: -15px;
  height: 0;
  width: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid #999;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

ファイルをダウンロードする

以下のリンクから今回紹介したスタイルが書かれた実際のファイルを丸ごとダウンロード出来ます。個人用チートシートや学習用に使用して下さい。

listデザイン集ダウンロード

以上が『【コピペ可】おしゃれなリスト(箇条書き)デザイン15選』でした。

今後気が向けばどんどんいろんなデザインを追加していきます。コーティング作業やブログ運営、HP制作などに適当に使って下さい。（全部丸々コピペでいけます。）

Udemyなら一早く一流のエンジニアになれます。
約10万の中から選べる完全買い切り型のオンライン教材だから無駄なく学べて、尚且つ非常に分かりやすく効率的です。
普段のネットショッピングの様にカートに入れてレジに進む。たったこれだけで一流への一歩を歩めます。

▶︎　世界最大級のオンライン学習サイトUdemy

デザイン見本まとめ

他のデザイン見本もいくつか用意しています。合わせてどうぞ。

CSSでグラデーションを作成する方法【コピペで使える】

今回は、CSSでグラデーションを作成する方法をいくつか紹介します。CSSのプロパティとカラーコードの指 ...

https://kt-life.net/css-gradation/

コピペで出来る見出しデザイン15選：CSSをそのまま使用可能

この記事では、HTMLとCSSだけで色々な用途で使用可能な見出し（h1,h2など）のデザインをいくつか紹介し ...

https://kt-life.net/title-h1-design/

【コピペでOK】汎用性抜群なボックスレイアウトデザイン25選!!

この記事は、HTMLとCSSだけでボックス（div）の色々な用途で使用可能なレイアウトのコーティングデザイ ...

https://kt-life.net/box-design/

【コピペOK】お洒落な引用デザイン10選！！

今回はblockquoteを使った引用のデザインをおしゃれに表現したCSSデザインを10選紹介します。

https://kt-life.net/blockquote-design

【コピペ可】ワードプレスの表(テーブル)デザイン5選！！

この記事では、HTMLとCSSだけで色々な用途で使用可能な表（table）のおしゃれなコーティングデザインを ...

https://kt-life.net/wordpress-table-css/

【コピペ可】おしゃれなリスト(箇条書き)デザイン30選！！ファイルあり

この記事は、HTMLとCSSだけで箇条書きリスト（ul、ol、li）の色々な用途で使用可能なおしゃれなコーテ ...

https://kt-life.net/list-design/

【CSS】ボタンのデザイン10選：丸ごとコピペ超簡単！！

この記事では、HTMLとCSSだけで色々な用途で使用可能なボタンのデザインをいくつか紹介します。ブログ ...

https://kt-life.net/botan-css/

【コピペOK】CSSで画像をおしゃれに！全6パターン！!

この記事では、CSSで画像に様々のスタイルを付けて、いくつかおしゃれなデザインを紹介します。画像を ...

https://kt-life.net/cssimg/

今すぐ使えるCSSレシピブック

created by Rinker

2020年2月11日2021年5月17日CodingCSS,HTML,Reference

Posted by KT

ワードプレスのブロックをグループ化してstyleを適応させる方法

ワードプレスで簡単にメニューを作る方法

なっかより:
2022年1月25日 3:23 PM
はじめまして、なっかと申します
ランキングリストに数字入り吹き出し風2を利用させていいただこうと思っています
例えば同率がいる場合など、以下のような表示にすることは可能でしょうか？
1　ほにゃらら
2　ほにゃらら
3　ほにゃらら
3　ほにゃらら
5　ほにゃらら
返信