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

Coding
2020.02.11

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

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

使い方
  1. HTMLをbodyの好きな箇所にコピペ
  2. CSSをスタイルシートにコピペ
  3. DLファイルのscssを使用したい場合はこの記事を参考にして下さい
注意点
  • FontAwesomeやjQueryは自分で読み込んで下さい。
  • クラス名は各自で変更するなりして下さい。

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

WordPressでリストを作る方法(HTML記述コピペあり)
今回はWordPressで簡単にリストを作成する方法とHTMLの記述の仕方を紹介致します。【丸々コピペでOK】リストのデザイン集：HTML&CSSだけでおしゃれな見た目ににする方法はこちらWordPre...
kt-life.net
2020.02.10

デフォルト

  • リストデフォルト
  • リストデフォルト
  • リストデフォルト
  • リストデフォルト
  • リストデフォルト
  1. 数字リストデフォルト
  2. 数字リストデフォルト
  3. 数字リストデフォルト
  4. 数字リストデフォルト
  5. 数字リストデフォルト
<ul>
      <li>リストデフォルト</li>
      <li>リストデフォルト</li>
      <li>リストデフォルト</li>
      <li>リストデフォルト</li>
      <li>リストデフォルト</li>
    </ul>
    <ol>
      <li>数字リストデフォルト</li>
      <li>数字リストデフォルト</li>
      <li>数字リストデフォルト</li>
      <li>数字リストデフォルト</li>
      <li>数字リストデフォルト</li>
    </ol>

穴丸

<ul class="list_design001">
      <li>リストデザイン001</li>
      <li>リストデザイン001</li>
      <li>リストデザイン001</li>
      <li>リストデザイン001</li>
      <li>リストデザイン001</li>
    </ul>
/* リストデザイン001 */
.list_design001 li {
  list-style: circle;
}

点に色

<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>
/* リストデザイン002 */
.list_design002 li {
  color: #f4a006;
}
.list_design002 li span {
  color: #333;
}

擬似要素に▶︎

<ul class="list_design003">
      <li>リストデザイン003</li>
      <li>リストデザイン003</li>
      <li>リストデザイン003</li>
      <li>リストデザイン003</li>
      <li>リストデザイン003</li>
    </ul>
/* リストデザイン003 */
.list_design003 {
  padding: 0 20px;
}
.list_design003 li {
  list-style: none;
}
.list_design003 li::before {
  content: '▶︎';
  padding: 0 5px;
}

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

<ul class="list_design004">
      <li>リストデザイン004</li>
      <li>リストデザイン004</li>
      <li>リストデザイン004</li>
      <li>リストデザイン004</li>
      <li>リストデザイン004</li>
    </ul>
/* リストデザイン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;
}

奇数にのみ色

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

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

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

横に並べる

<ul class="list_design007">
      <li>リストデザイン007</li>
      <li>リストデザイン007</li>
      <li>リストデザイン007</li>
      <li>リストデザイン007</li>
      <li>リストデザイン007</li>
    </ul>
/* リストデザイン007 */
.list_design007 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
}
.list_design007 li {
  list-style: none;
  margin: 1rem;
}

2列に並べる

<ul class="list_design008">
      <li>リストデザイン008</li>
      <li>リストデザイン008</li>
      <li>リストデザイン008</li>
      <li>リストデザイン008</li>
      <li>リストデザイン008</li>
    </ul>
/* リストデザイン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;
}

背景と囲い

<ul class="list_design009">
      <li>リストデザイン009</li>
      <li>リストデザイン009</li>
      <li>リストデザイン009</li>
      <li>リストデザイン009</li>
      <li>リストデザイン009</li>
    </ul>
/* リストデザイン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;
}

左と下にボーダー線

<ul class="list_design010">
      <li>リストデザイン010</li>
      <li>リストデザイン010</li>
      <li>リストデザイン010</li>
      <li>リストデザイン010</li>
      <li>リストデザイン010</li>
    </ul>
/* リストデザイン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;
}

常に同じ長さの下線

<ul class="list_design011">
      <li>リストデザイン011</li>
      <li>リストデザイン011</li>
      <li>リストデザイン011</li>
      <li>リストデザイン011</li>
      <li>リストデザイン011</li>
    </ul>
/* リストデザイン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;
}

左右にスラッシュ

<ul class="list_design012">
      <li>リストデザイン012</li>
      <li>リストデザイン012</li>
      <li>リストデザイン012</li>
      <li>リストデザイン012</li>
      <li>リストデザイン012</li>
    </ul>
/* リストデザイン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;
}

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

<ul class="list_design013">
      <li>リストデザイン013</li>
      <li>リストデザイン013</li>
      <li>リストデザイン013</li>
      <li>リストデザイン013</li>
      <li>リストデザイン013</li>
    </ul>
/* リストデザイン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;
}

背景色の中に

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

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

<ul class="list_design015">
      <li>リストデザイン015</li>
      <li>リストデザイン015</li>
      <li>リストデザイン015</li>
      <li>リストデザイン015</li>
      <li>リストデザイン015</li>
    </ul>
/* リストデザイン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重ボーダー線あり背景色の中

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

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

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

上下にボーダー

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

左右にボーダー

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

マウスホバー

<ul class="list_design020">
      <li>リストデザイン020</li>
      <li>リストデザイン020</li>
      <li>リストデザイン020</li>
      <li>リストデザイン020</li>
      <li>リストデザイン020</li>
    </ul>
/* リストデザイン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

<ul class="list_design021">
      <li>リストデザイン021</li>
      <li>リストデザイン021</li>
      <li>リストデザイン021</li>
      <li>リストデザイン021</li>
      <li>リストデザイン021</li>
    </ul>
/* リストデザイン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

<ul class="list_design022">
      <li>リストデザイン022</li>
      <li>リストデザイン022</li>
      <li>リストデザイン022</li>
      <li>リストデザイン022</li>
      <li>リストデザイン022</li>
    </ul>
/* リストデザイン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);
}

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

<ul class="list_design023">
      <li>リストデザイン023</li>
      <li>リストデザイン023</li>
      <li>リストデザイン023</li>
      <li>リストデザイン023</li>
      <li>リストデザイン023</li>
    </ul>
/* リストデザイン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

<ul class="list_design024">
      <li>リストデザイン024</li>
      <li>リストデザイン024</li>
      <li>リストデザイン024</li>
      <li>リストデザイン024</li>
      <li>リストデザイン024</li>
    </ul>
/* リストデザイン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

<ul class="list_design025">
      <li>リストデザイン025</li>
      <li>リストデザイン025</li>
      <li>リストデザイン025</li>
      <li>リストデザイン025</li>
      <li>リストデザイン025</li>
    </ul>
/* リストデザイン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真ん中

<ul class="list_design026">
      <li>リストデザイン026</li>
      <li>リストデザイン026</li>
      <li>リストデザイン026</li>
      <li>リストデザイン026</li>
      <li>リストデザイン026</li>
    </ul>
/* リストデザイン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);
}

タグ風

<ul class="list_design027">
      <li>リストデザイン027</li>
      <li>リストデザイン027</li>
      <li>リストデザイン027</li>
      <li>リストデザイン027</li>
      <li>リストデザイン027</li>
    </ul>
/* リストデザイン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

<ul class="list_design028">
      <li>リストデザイン028</li>
      <li>リストデザイン028</li>
      <li>リストデザイン028</li>
      <li>リストデザイン028</li>
      <li>リストデザイン028</li>
    </ul>
/* リストデザイン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

<ul class="list_design029">
      <li>リストデザイン029</li>
      <li>リストデザイン029</li>
      <li>リストデザイン029</li>
      <li>リストデザイン029</li>
      <li>リストデザイン029</li>
    </ul>
/* リストデザイン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;
}

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

<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>
/* リストデザイン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%;
}
// アニメーション
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);

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

<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>
/* リストデザイン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%;
}
// アニメーション
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);

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

<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>
/* リストデザイン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%;
}
// アニメーション
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);

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

<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>
/* リストデザイン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%;
}
// アニメーション
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);

連続でフェードレフト

<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>
/* リストデザイン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;
}
// アニメーション
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);

連続でフェードアップ

<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>
/* リストデザイン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;
}
// アニメーション
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);

数字入り吹き出し風

<ol class="list_design036">
  <li>リストデザイン036</li>
  <li>リストデザイン036</li>
  <li>リストデザイン036</li>
  <li>リストデザイン036</li>
  <li>リストデザイン036</li>
</ol>
/* リストデザイン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

<ol class="list_design037">
      <li>リストデザイン037</li>
      <li>リストデザイン037</li>
      <li>リストデザイン037</li>
      <li>リストデザイン037</li>
      <li>リストデザイン037</li>
    </ol>
/* リストデザイン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制作などに適当に使って下さい。（全部丸々コピペでいけます。）

デザイン見本まとめ

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

CSSでグラデーションを作成する方法【コピペで使える】
今回は、CSSでグラデーションを作成する方法をいくつか紹介します。CSSのプロパティとカラーコードの指定の仕方や値に関してを詳しく書いていきます。また最後にはコピペ用の見本デザインも用意していますので良かったら参考にして下さい。
kt-life.net
2020.03.17
コピペで出来る見出しデザイン15選：CSSをそのまま使用可能
この記事では、HTMLとCSSだけで色々な用途で使用可能な見出し（h1,h2など）のデザインをいくつか紹介します。ブログやHPで使って下さい。
kt-life.net
2020.02.16
【コピペでOK】汎用性抜群なボックスレイアウトデザイン25選!!
この記事は、HTMLとCSSだけでボックス（div）の色々な用途で使用可能なレイアウトのコーティングデザインをいくつか紹介いたします。ブログやHPで要点などをまとめる時にでも使って下さい。
kt-life.net
2020.05.02
【コピペOK】お洒落な引用デザイン10選！！
今回はblockquoteを使った引用のデザインをおしゃれに表現したCSSデザインを10選紹介します。
kt-life.net
2020.09.09
【コピペ可】ワードプレスの表(テーブル)デザイン5選！！
この記事では、HTMLとCSSだけで色々な用途で使用可能な表（table）のおしゃれなコーティングデザインをいくつか紹介します。ブログやHPで一覧表や料金表などをまとめる時にでも使って下さい。
kt-life.net
2020.03.01
【コピペ可】おしゃれなリスト(箇条書き)デザイン30選！！ファイルあり
この記事は、HTMLとCSSだけで箇条書きリスト（ul、ol、li）の色々な用途で使用可能なおしゃれなコーティングデザインをいくつか紹介いたします。ブログやHPで要点などをまとめる時にでも使って下さい。初心者の方でもあまり難しく考えないで済む様にHTML内にスタイルを記述しているので全て丸々コピペでOKです。
kt-life.net
2020.02.11
【CSS】ボタンのデザイン10選：丸ごとコピペ超簡単！！
この記事では、HTMLとCSSだけで色々な用途で使用可能なボタンのデザインをいくつか紹介します。ブログやHPでお問い合わせボタンや詳細ボタンなどのCTAに使って下さい。
kt-life.net
2020.03.22
【コピペOK】お洒落な引用デザイン10選！！
今回はblockquoteを使った引用のデザインをおしゃれに表現したCSSデザインを10選紹介します。
kt-life.net
2020.09.09
Coding
CSSHTMLReference
この記事を共有する
KEITOをフォローする
スポンサーリンク
スポンサーリンク
KT
KT LIFE

コメント

  1. なっか より:
    2022年1月25日 3:23 PM

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

タイトルとURLをコピーしました