箇条書き(リスト)サンプル

番号なしリスト

丸印の基本形round1

ulの追加クラス「.round1」。ulタグに「class=”round1″」を付け加える。

番号ありリストolと同じ名前にしたのは、ulとolを変えた時にクラス名も変えるのが面倒だから

(N-boxに入れた使用例)

猫の毛色と性格(俗信)
  • 黒猫はミステリアス
  • 白猫は優しい性格
  • 三毛猫は?
  • キジトラ
    • ただのキジトラ
    • キジトラ白が最高に可愛いです。
  • 茶トラは人懐っこい

/* 箇条書き全体(親) */
ul.round2{
list-style:none;
background-color: #fff6;
padding:0px;
margin:0px;
}/* リストアイテム(親) */
ul.round2 li{
text-indent: -1em;/* 一行目を逆に字下げする */
font-size:1em;
padding-left: 1em;/* その分全体を右へ */
margin:0;
padding-top: 0.2em;
padding-bottom: 0.2em;
line-height: 1.2em;}/* 親の先頭の記号 */
ul.round2 li:before{content:”●”}/* 箇条書き全体(子以下) */
ul.round2 li ul{
list-style:none;
padding-left: 1em;}/* リストアイテム(子以下) */
ul.round2 li ul li{
font-size:0.95em;/*親より少し小さく*/
padding: 0.2em 0px;
border:none;}/*子以下の先頭記号*/
ul.round2 li ul li:before{content:”○”}

丸印(区切り線あり)

さらに追加クラス「spr」を付けて「class=”round1 spr”」にすると区切り線がつく

(N-boxに入れた使用例)

猫の毛色と性格(俗信)
  • 黒猫はミステリアス
  • 白猫は優しい性格
  • 三毛猫は?
  • キジトラ
    • ただのキジトラ
    • キジトラ白が最高に可愛いです。
  • 茶トラは人懐っこい

ul.round2.spr li{/* リストアイテム(親) */
border-top: dashed 2px #aed8ff;
padding-top: 0.25em;
padding-bottom: 0.25em;
line-height: 1.4em;}

ul.round2.spr li ul{/* 箇条書き全体(子以下) */
margin-top:0;}

ul.round2.spr li:first-child{/* 最初の親だけ区切り線無し */
border-top:none;}

ul.round2.spr li ul li{/* 子の区切り線は薄く */
border-color:#d0e6fb;}

round2

違いを忘れた…

(N-boxに入れた使用例)

猫の毛色と性格(俗信)
  • 黒猫はミステリアス
  • 白猫は優しい性格
  • 三毛猫は?
  • キジトラ
    • ただのキジトラ
    • キジトラ白が最高に可愛いです。
  • 茶トラは人懐っこい

丸印(区切り線あり)

さらに追加クラス「spr」を付けて「class=”round1 spr”」にすると区切り線がつく

(N-boxに入れた使用例)

猫の毛色と性格(俗信)
  • 黒猫はミステリアス
  • 白猫は優しい性格
  • 三毛猫は?
  • キジトラ
    • ただのキジトラ
    • キジトラ白が最高に可愛いです。
  • 茶トラは人懐っこい

番号ありリスト

カッコ数字のリスト

olの追加クラス「.kko2」。olタグに「class=”kko2″」を付け加える。ほぼ例題・類題の小問のみに使用

(N-boxに入れた使用例)

一日の食事
  1. 朝飯
  2. 昼飯
  3. おやつ
  4. 夕食
  5. 夜食

 

以下はこちらの御サイト様を参考にしました。

丸印の基本形

olの追加クラス「.round1」。olタグに「class=”round1″」を付け加える。

番号なしリストulと同じ名前にしたのは、ulとolを変えた時にクラス名も変えるのが面倒だから

(N-boxに入れた使用例)

一日の食事
  1. 朝飯
  2. 昼飯
  3. おやつ
  4. 夕食
  5. 夜食

[su_spoiler title=”CSSを表示” style=”fancy” icon=”chevron-circle” class=”std no-trn GMN”]

[/su_spoiler]

丸印(区切り線あり)

さらに追加クラス「spr」を付けて「class=”round1 spr”」にすると区切り線がつく

(N-boxに入れた使用例)

一日の食事
  1. 朝飯
  2. 昼飯
  3. おやつ
  4. 夕食
  5. 夜食

[su_spoiler title=”CSSを表示” style=”fancy” icon=”chevron-circle” class=”std no-trn GMN”]

 

[/su_spoiler]

タイムライン型1

olの追加クラス「.roundT1」。olタグに「class=”roundT1″」を付け加える。

(N-boxに入れた使用例)

一日の食事(太字は手動)
  1. 朝飯
    眠くならないよう
    少なめにとります
  2. 昼飯
  3. おやつ
    甘いものを少し
  4. 夕食
  5. 夜食
    ちょびっとだけ

/* リスト全体 */
ol.roundT1 {position: relative;
counter-reset: number;list-style-type: none;
margin: 0;
margin-top: -0.1em;
padding-left: 0.5em;padding-bottom:0.5em;
background-color: #fff8;
z-index: 0;}

/* 縦断ライン */
ol.roundT1:before {position: absolute;
content: “”;
top: 0.5em;left: calc(1em – 3px);
width: 5px;height: calc(100% – 0.5em);
background: #5d9be8;
z-index: 1;}
/* リストアイテム */

ol.roundT1 li {position: relative;
margin:.5em 0em 0em;
padding-left: 1.3em;
padding-bottom: 2px;padding-top: 2px;
font-size: 1em;line-height:1.4em;}
/* 最初のアイテムには上ボーダー無し */

ol.roundT1 li:first-child {border-top: none;}

/* 丸数字 */
ol.roundT1 li:before {counter-increment: number;content: counter(number);
color: #5d9be8;background-color: #fff;
position: absolute;
font-weight: bold;font-size: 0.8em;
border-radius: 50%;
left: 0;top: calc(.3em + 0px);
width: 1.2em;height: 1.2em;
line-height: calc(1.2em + 2px);
text-align: center;z-index: 1;
box-shadow: 0px 0px 0px calc(2.5px + 0.04vw);
font-family: sans-serif;}
/* 最後のアイテムのみ下向き矢印 */

ol.roundT1 li:last-child:after {position: absolute;
content: “”;
bottom: calc(-0.5em + 2px);left: calc(0em – 0.5px);
width: 1em;height: 1em;
background-color: #fff;
transform: scale(0.8,0.8) rotate(45deg);
box-shadow: 4px 4px 0 0 #5d9be8;
z-index: 0;
}

 

タイムライン型1B(開発中)

olの追加クラス「.roundT1B」。olタグに「class=”roundT1B”」を付け加える。

項目の中身(二行目以降)が小さくなるように

(N-boxに入れた使用例)

一日の食事
  1. 朝飯
    眠くならないよう
    少なめにとります
  2. 昼飯
  3. おやつ
    甘いものを少し
  4. 夕食
  5. 夜食
    ちょびっとだけ

タイムライン型2

webで一番良く見かけるデザイン。

 

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