html関連TIPS

項目一覧
水平線の中に文字を表示させる
項目一覧（以上）

　
上記のように、水平線の中に文字を表示させる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 ;
}