無難な見出し
- RESULT
- HTML
- CSS
Heading01
Heading02
Heading03
Heading04
- コピー
<h1 class="msr_h101">Heading01</h1> <h2 class="msr_h201">Heading02</h2> <h3 class="msr_h301">Heading03</h3> <h4 class="msr_h401">Heading04</h4>
- コピー
.msr_h101 { background: linear-gradient(#FEFEFE, #F3F5F5); background: -o-linear-gradient(#FEFEFE, #F3F5F5); background: -ms-linear-gradient(#FEFEFE, #F3F5F5); background: -moz-linear-gradient(#FEFEFE, #F3F5F5); background: -webkit-linear-gradient(#FEFEFE, #F3F5F5); background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #F3F5F5), color-stop(0.00, #FEFEFE)); border: 1px solid #AAAAAA; border-radius: 3px; box-sizing: border-box; font-size: 22px; margin: 0 0 20px; padding: 8px 10px 8px 26px; position: relative; width: 100%; } /* h1青の縦ライン */ .msr_h101:before { background-color: #1B73BA; border-radius: 3px; content: " "; display: inline-block; height: 60%; left: 10px; margin-right: 10px; position: absolute; top: 20%; width: 6px; } .msr_h201 { background: linear-gradient(#F3F5F5, #fff); background: -o-linear-gradient(#F3F5F5, #fff); background: -ms-linear-gradient(#F3F5F5, #fff); background: -moz-linear-gradient(#F3F5F5, #fff); background: -webkit-linear-gradient(#F3F5F5, #fff); background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #fff), color-stop(0.00, #F3F5F5)); border-bottom: 2px solid #1B73BA; box-sizing: border-box; font-size: 18px; margin: 0 0 20px; padding: 7px 0 5px 10px; } .msr_h301 { border-bottom: 2px solid #1B73BA; font-size: 18px; margin: 0 0 20px; padding-bottom: 5px; } .msr_h401 { font-size: 16px; margin: 0 0 20px; } /* h4青の縦ライン */ .msr_h401:before { background-color: #1B73BA; border-radius: 2px; content: ""; display: inline-block; height: 15px; margin-right: 8px; vertical-align: middle; width: 4px; }
検証済みブラウザ
- IE10
- Edge
- FF
- chrome
- Safari