メダカと自転車とetc.

元経理屋がメダカを分析したり、自転車で出かけたりするブログです

MENU

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

f:id:historynt-02bs:20220302075733j:plain



毎日お疲れさまです

管理人のホビーライフです

 

今回は

【ブログ設定備忘録】箇条書き『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%);
}

 

 

 

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

 

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

インスタグラムはこちら

f:id:historynt-02bs:20210804010034p:plain