目次(クリックでジャンプ)
番号なしリスト
丸印の基本形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に入れた使用例)
- 朝飯
- 昼飯
- おやつ
- 夕食
- 夜食
以下はこちらの御サイト様を参考にしました。
丸印の基本形
olの追加クラス「.round1」。olタグに「class=”round1″」を付け加える。
番号なしリストulと同じ名前にしたのは、ulとolを変えた時にクラス名も変えるのが面倒だから
(N-boxに入れた使用例)
- 朝飯
- 昼飯
- おやつ
- 夕食
- 夜食
丸印(区切り線あり)
さらに追加クラス「spr」を付けて「class=”round1 spr”」にすると区切り線がつく
(N-boxに入れた使用例)
- 朝飯
- 昼飯
- おやつ
- 夕食
- 夜食
タイムライン型1
olの追加クラス「.roundT1」。olタグに「class=”roundT1″」を付け加える。
(N-boxに入れた使用例)
- 朝飯
眠くならないよう
少なめにとります - 昼飯
- おやつ
甘いものを少し - 夕食
- 夜食
ちょびっとだけ
/* リスト全体 */
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に入れた使用例)
- 朝飯
眠くならないよう
少なめにとります - 昼飯
- おやつ
甘いものを少し - 夕食
- 夜食
ちょびっとだけ
タイムライン型2
webで一番良く見かけるデザイン。
