見出しデザイン一覧
01.テキストに下線
qiita.rb
<div class="headline">
<h2 class="headline__title">タイトル</h2>
</div>
qiita.rb
.headline {
background-color: #fff;
clear: both;
margin-bottom:3rem;
overflow: hidden;
padding: 3rem;
}
.headline__title{
color:#24936E;
border-bottom: 1px solid #434343;
font-size: 3rem;
padding:0 2rem 2rem;
}
ファイル保管場所：GitHub
02.テキストに下線(2色)
qiita.rb
<div class="headline">
<h2 class="headline__title">タイトル</h2>
</div>
qiita.rb
.headline__title{
border-bottom: solid 3px #7E807B;
padding-bottom: 1rem;
position: relative;
}
.headline__title:after{
border-bottom: solid 3px #333333;
bottom: -3px;
content: " ";
display: block;
position: absolute;
width: 20%;
}
ファイル保管場所：GitHub
03.アイコン付き
qiita.rb
<!-- アイコンフォント読込 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- 見出し -->
<h2 class="headline">タイトル</h2>
qiita.rb
.headline{
background: #f1f8ff;
border-left: solid 2em #009ABF;
padding: 0.3em 0.5em;
position: relative;
}
.headline:before{
color:#fff;
content: "\f021";
font-family: FontAwesome;
font-weight: normal;
left: -1.45em;
position: absolute;
padding: 0em;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%;
}
ファイル保管場所：GitHub
使用するアイコンを変更する場合は、CSSの"content"の値を変更。
Font Awesomeのページの"unicode"から値は取得可能。
アイコンフォントを使用した見出しは他にもこちらで色々なサンプルあり