【コピペで簡単便利！】HTMLとCSSで作るリストまとめ

.list-1 ul {
  background: #f5f5f5; /*背景色*/
  padding: 10px 30px; /*ボックス内の余白*/
  border: solid 2px #191970; /*線の種類 太さ 色*/
}
.list-1 ul li {
  line-height: 1.2; /*文の行高*/
  padding: 5px 0; /*前後の文との余白*/
}

.list-2 {
  position: relative;
  padding: 15px 20px 15px 30px; /*ボックス内の余白*/
  border: solid 2px #8b4513; /*線の種類 太さ 色*/
  border-radius:5px; /*枠線の角の丸め具合*/
  color: #8b4513; /*フォントカラー*/
  background: #fff; /*背景色*/
}
.list-2:before {
  content: "Menu";  /* 好きな文字を記述 */
  position: absolute;
  display: block;
  top: -20px; /*位置調整*/
  left: 30px; /*位置調整*/
  background: #fff; /*背景色*/
  font-size: 18px; /*文字の大きさ*/
  font-weight: bold; /*文字の太さ*/
  padding: 0 10px; /*文字の周りの余白*/
}
.list-2 ul li {
  line-height: 1.2; /*文の行高*/
  padding: 7px 0; /*前後の文との余白*/
}

.list-3 ul {
  background: #fff;/*背景色*/
  padding: 10px 30px;/*ボックス内の余白*/
  border: outset 8px #c71585;/*線の種類 太さ 色*/
  list-style: none; /*項目前デザインの消去*/
}
.list-3 ul li {
  line-height: 1.2; /*文の行高*/
  padding: 5px 0; /*前後の文との余白*/
  font-weight: bold; /*文字の太さ*/
}

.list-4 ul {
  list-style: none; /*項目前デザインの消去*/
  padding: 10px; /*余白*/
}
.list-4 li {
  position: relative;
  padding: 5px 10px 5px 20px; /*余白*/
  font-weight: bold; /*文字の太さ*/
  line-height: 25px; /*文字の行高*/
  border-bottom: dotted 3px #40e0d0; /*下線の種類 太さ　色*/
}
.list-4 li:before {
   content: "❤︎"; /*項目前のデザイン指定 */
   color: #40e0d0; /*デザインの色*/
   padding-right: 10px; /*デザインとリストの間*/
}

.list-5 ul{
  list-style: none; /*項目前デザインの消去*/
}
.list-5 li{
  position: relative;
  padding: 5px 0; /*余白*/
  line-height: 25px; /*文字の行高*/
}
.list-5 li:before{
  font-family: "Font Awesome 5 Free"; /*デザインを使用するツール*/
  content: '\f0f4'; /*デザインのナンバー*/
  padding-right: 10px; /*項目との余白*/
  font-weight: bold; /*文字の太さ*/
  color: #cd853f; /*デザインの色*/
}

.list-6 ol {
  counter-reset: list; /*数字表示*/
  list-style: none !important;
  padding: 5px;
}
.list-6 li {
  position: relative;
  margin: 10px 0;
  padding-left: 45px; /*項目と四角の余白*/
  font-weight: bold;
  line-height: 34px;
  border: 2px solid #8b4513;
  color: #8b4513;
}
.list-6 li:before{
  counter-increment: list; /*数字*/
  content: counter(list); /*カウントさせる*/
  text-align: center;
  color: #fff;
/* 四角の設定↓*/
  position: absolute;
  left: 0px;
  width: 35px;
  height: 35px;
  background: #8b4513;
  top: 50%;
  transform: translateY(-50%);
}

.list-7 ul {
  padding: 0;
  list-style: none;
  position: relative;
}
.list-7 li {
  border-left: solid 10px #ff6347;/*左側の線*/
  background-color: #fffff0;/*背景色*/
  margin: 4px 0;/*上下のバーとの余白*/
  line-height: 1.2;
  border-radius: 10px 0 0 10px;/*左側の角だけ丸にする*/
  padding: 10px;
}

.list-8 ol {
  background-color: #ffffff;/*背景色*/
  padding: 10px 30px;/*ボックス内の余白*/
  border-top: solid 2px #808080;/*上線の種類 太さ 色*/
  border-bottom: solid 2px #808080;/*下線の種類 太さ 色*/
}
.list-8 li {
  line-height: 1.2; /*文の行高*/
  padding: 5px 0; /*前後の文との余白*/
  color: #808080;
}
.list-8 li:hover { /*マウスホバーした時*/
  color: #c71585; /*文字の色*/
  cursor : pointer; /*カーソルを指マークに*/
}

.list-9 ul {
  padding: 0;
  list-style: none;
  position: relative;
}
.list-9 li {
  border-left: solid 20px #008080; /*左側のライン*/
  background-color: #40e0d0; /*背景色*/
  color: #ffffff; /*文字の色*/
  margin: 4px 0; /*上下のタグとの余白*/
  line-height: 1.2;
  padding: 10px;
}
.list-9 li:hover {/*マウスホバーした時*/
  border-left: solid 20px #40e0d0;
  background-color: #008080;
  cursor : pointer;
}

.list-10 ul{
  list-style: none; 
}
.list-10 li{
  position: relative;
  padding: 5px 0; 
  line-height: 25px; 
}
.list-10 li:before{
  font-family: "Font Awesome 5 Free";
  content: '\f058'; /* デザインのナンバー*/
  padding-right: 10px;
  font-weight: bold; /*文字の太さ*/
  color: #ff4500;
}
.list-10 li:hover {
  transform: scale(1.2); /*大きくする*/
  opacity: 0.7; /*不透明度を変える*/
  cursor : pointer;
  padding-left: 10px;
}