【ブログ設定備忘録】箇条書き『ul ol li』

毎日お疲れさまです

管理人です

今回は

【ブログ設定備忘録】箇条書き『ul　ol　li』

です

最後までよろしくお願いします

【ブログ設定備忘録】箇条書き『ul　ol　li』

当ブログで使用しているコードです

web上でコピペさせていただいたものを加工しています

コピペできるようにしていますので、ルールを守ってお好きにお使いください

www.hobbylife1981.com

箇条書き

1.　リスト

通常の箇条書きです。

• リスト1
• リスト2
• リスト3

HTML表示

<ul>
  <li> 
　　<p>リスト1</p>
　　<p>リスト2</p>
　　<p>リスト3</p>
　</li>
</ul>

CSS表示

とくに設定していません

はてなブログの「テーマ」のままです

2.　番号付きリスト

数字が先頭につく箇条書きです

1. 番号付きリスト1
2. 番号付きリスト2
3. 番号付きリスト3

HTML表示

<ol>
　<li> 
　　<p>番号付きリスト1</p>
　　<p>番号付きリスト2</p>
　　<p>番号付きリスト3</p>
　</li>
</ol>

CSS表示

/* 箇条書き数字(背景あり白文字)　*/
.list04 {
  padding: 0;
  position: relative;
}
.list04 li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;
}
.list04 li:before {
  font-family: "FontAwesome";
  content: "\f138";/*アイコンの種類*/
  position: absolute;
  left : 1em;/*左端からのアイコンまでの距離*/
  color: #000;/*アイコン色*/
}
ol {
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding:0.5em;
}
ol li {
  position: relative;
  padding: 0.5em 0.5em 0.5em 35px;
  line-height: 1.5em;
}
ol li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display:inline-block;
  background: #808080;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 12px;
  border-radius: 50%;/*円にする*/
  left: 0;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  /*以下 上下中央寄せのため*/
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

▼参考にさせていただいたサイトです▼

copypet.jp

最後まで読んでいただきありがとうございます

インスタグラムはこちら