html関連TIPS

項目一覧
  1. リスト表示のカスタマイズ
  2. 水平線の中に文字を表示させる方法
項目一覧（以上）
１）リスト表示のカスタマイズ

具体例１　(1)、(2)、’3)・・といったリスト表示のためのCSS

.custom-list1 {
list-style: none; /* デフォルトの箇条書きを消す */
counter-reset: cnt;
/* カウンタをリセット */
 }

.custom-list1 li {
counter-increment: cnt; /* カウンタを1つ進める */
text-indent: -1em; /* ハンギングインデント */
padding-left: 1em; /* 本文のインデント */
}

.custom-list1 li::before {
content: “(“counter(cnt) “) “;
font-weight: bold;
}

具体例２　1)、2)、3)・・といったリスト表示のためのCSS

.custom-list2 {
list-style: none; /* デフォルトの箇条書きを消す */
counter-reset: cnt;
/* カウンタをリセット */
 }

.custom-list2 li {
counter-increment: cnt; /* カウンタを1つ進める */
text-indent: -1em; /* ハンギングインデント */
padding-left: 1em; /* 本文のインデント */
}

.custom-list2 li::before {
content: counter(cnt) “) “;
font-weight: bold;
}

　
２）水平線の中に文字を表示させる方法

htmlコード
<h5><span class=”size-1″>項目一覧</span></h5>
<h5><span class=”size-1″>項目一覧（以上）</span></h5>
　
CSSスタイル設定
h5 {overflow: hidden;text-align: center;}
h5 span {display: inline-block;padding: 0 0.5em;position: relative;}
h5 span:before,h5 span:after {
　border-top: 1px solid;
　content: “”;
　position: absolute;
　top: 50%;
　width: 99em;}
h5 span:before {right: 100%;}
h5 span:after {left: 100%;}
.h300{line-height:300%;}
.border1 {
　border-top-width: 1pt;
　border-bottom-width: 1pt;
　border-color: grey;
　border-top-style: solid;
　border-right-style: none;
　border-bottom-style:solid;
　border-left-style:none ;
}