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

Coding

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

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

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

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

デフォルト

  • リストデフォルト
  • リストデフォルト
  • リストデフォルト
  • リストデフォルト
  • リストデフォルト
  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制作などに適当に使って下さい。（全部丸々コピペでいけます。）

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

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

デザイン見本まとめ

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

今すぐ使えるCSSレシピブック
created by Rinker
三浦圭人

最後まで閲覧頂きありがとうございます。
Twitterでは更に細かくWEBリテラシーのネタを発信しています。是非フォローお願い致します。感想/ご意見頂けたら喜びます✨

2020年2月11日CodingCSS,HTML,Reference

Posted by KT