Pickupニュース

スタイルシートで作る見出しデザイン
HTML & CSS

スタイルシートで作る見出しデザイン

気に入ったデザインスタイルをコピペで利用
よく使うスタイルシートだけで作る見出しデザインをコピペ可能なスニペットコードと一緒にリストアップしました。随時更新していきます。

ボーダー

下に線

見出しデザインサンプル
HTMLCopy
<h2 class="border1">見出しデザインサンプル</h2>
CSSCopy
.border1 { font-size: 16px; line-height: 20px; padding: 0 0 .5em 0; border-bottom: 1px solid #000000; }

上下に線

見出しデザインサンプル
HTMLCopy
<h2 class="border2">見出しデザインサンプル</h2>
CSSCopy
.border2 { font-size: 16px; line-height: 20px; padding: .5em 0; border-top: 1px solid #000000; border-bottom: 1px solid #000000; }

先頭に太い線

見出しデザインサンプル
HTMLCopy
<h2 class="border3">見出しデザインサンプル</h2>
CSSCopy
.border3 { font-size: 16px; line-height: 20px; padding: .5em 0 .5em .5em; border-left: 6px solid #000000; }

先頭に太い線+下に線

見出しデザインサンプル
HTMLCopy
<h2 class="border4">見出しデザインサンプル</h2>
CSSCopy
.border4 { font-size: 16px; line-height: 20px; padding: .5em 0 .5em .5em; border-left: 6px solid #000000; border-bottom: 1px solid #000000; }

先頭に太い線+囲み線

見出しデザインサンプル
HTMLCopy
<h2 class="border5">見出しデザインサンプル</h2>
CSSCopy
.border5 { font-size: 16px; line-height: 20px; padding: .5em 0 .5em 1.5em; position: relative; background: #ffffff; border: 1px solid #000000; } .border5:after { content: " "; position: absolute; top: .5em; left: .5em; width: 6px; height: calc(100% - 1em); background: #000000; }

下に線+見出し文字下のみに線

見出しデザインサンプル
HTMLCopy
<h2 class="border6">見出しデザインサンプル</h2>
CSSCopy
.border6 { font-size: 16px; line-height: 20px; padding: 1em; position: relative; border-bottom: 3px solid #000000; } .border6 span { content: " "; left: 0; bottom: -3px; padding-bottom: .25em; position: absolute; border-bottom: 3px solid #f00000; }

リボン

左端に折り目

見出しデザインサンプル
HTMLCopy
<h2 class="ribbon1">見出しデザインサンプル</h2>
CSSCopy
.ribbon1 { color: #ffffff; font-size: 16px; line-height: 20px; position: relative; padding: 10px; background: #000000; box-shadow: 0 0 0 0 #000000, -10px 0 0 0 #000000, 0 3px 3px 0 rgba(0,0,0,0.1); } .ribbon1:before { content: " "; position: absolute; top: 100%; left: -10px; width: 0; height: 0; border-width: 0 10px 10px 0; border-style: solid; border-color: transparent; border-right-color: #4f4f4f; }

両端に折り目

見出しデザインサンプル
HTMLCopy
<h2 class="ribbon2">見出しデザインサンプル</h2>
CSSCopy
.ribbon2 { color: #ffffff; font-size: 16px; line-height: 20px; position: relative; padding: 10px; background: #000000; box-shadow: 10px 0 0 0 #000000, -10px 0 0 0 #000000, 0 3px 3px 0 rgba(0,0,0,0.1); } .ribbon2:before { content: " "; position: absolute; top: 100%; left: -10px; width: 0; height: 0; border-width: 0 10px 10px 0; border-style: solid; border-color: transparent; border-right-color: #4f4f4f; } .ribbon2:after { content: " "; position: absolute; top: 100%; right: -10px; width: 0; height: 0; border-width: 10px 10px 0 0; border-style: solid; border-color: transparent; border-top-color: #4f4f4f; }

両端逆に折り目

見出しデザインサンプル
HTMLCopy
<h2 class="ribbon3">見出しデザインサンプル</h2>
CSSCopy
.ribbon3 { color: #ffffff; font-size: 16px; line-height: 20px; position: relative; padding: 10px; background: #000000; box-shadow: 10px 0 0 0 #000000, -10px 0 0 0 #000000, 0 3px 3px 0 rgba(0,0,0,0.1); } .ribbon3:before { content: " "; position: absolute; top: 100%; left: -10px; width: 0; height: 0; border-width: 0 10px 10px 0; border-style: solid; border-color: transparent; border-right-color: #4f4f4f; } .ribbon3:after { content: " "; position: absolute; top: -8px; right: -10px; width: 0; height: 0; border-width: 0 10px 10px 0; border-style: solid; border-color: transparent; border-bottom-color: #4f4f4f; }

左端に折り目+右端に切り込み

見出しデザインサンプル
HTMLCopy
<h2 class="ribbon4">見出しデザインサンプル</h2>
CSSCopy
.ribbon4 { color: #ffffff; font-size: 16px; line-height: 20px; position: relative; padding: 10px; background: #000000; box-shadow: 0 0 0 0 #000000, -10px 0 0 0 #000000, 0 3px 3px 0 rgba(0,0,0,0.1); } .ribbon4:before { content: " "; position: absolute; top: 100%; left: -10px; width: 0; height: 0; border-width: 0 10px 10px 0; border-style: solid; border-color: transparent; border-right-color: #4f4f4f; } .ribbon4:after { content: " "; position: absolute; top: 0; left: 100%; width: 0; height: 0; border-width: 20px 10px; border-style: solid; border-color: #000000; border-right-color: transparent; }

吹き出し

左下に矢じり

見出しデザインサンプル
HTMLCopy
<h2 class="balloon1">見出しデザインサンプル</h2>
CSSCopy
.balloon1 { position: relative; color: #fff; background: #000000; font-size: 16px; line-height: 1; margin: 30px -10px 10px -10px; padding: 15px 5px 12px 10px; } .balloon1:after { content: " "; position: absolute; top: 100%; left: 20px; height: 0; width: 0; border: 10px solid transparent; border-top: 10px solid #000000; }

左下に矢じり+ボーダー

見出しデザインサンプル
HTMLCopy
<h2 class="balloon2">見出しデザインサンプル</h2>
CSSCopy
.balloon2 { position: relative; color: #fff; background: #4f4f4f; font-size: 16px; line-height: 1; margin: 30px -10px 10px -10px; padding: 15px 5px 12px 10px; border: 2px solid #000000; } .balloon2:after, .balloon2:before { content: " "; top: 100%; left: 25px; border: solid transparent; height: 0; width: 0; position: absolute; } .balloon2:after { border-color: rgba(79, 79, 79, 0); border-top-color: #4f4f4f; border-width: 10px; margin-left: -10px; } .balloon2:before { border-color: rgba(0, 0, 0, 0); border-top-color: #000000; border-width: 13px; margin-left: -13px; }

丸い吹き出し

見出しデザインサンプル
HTMLCopy
<h2 class="balloon3">見出しデザインサンプル</h2>
CSSCopy
.balloon3 { font-size: 16px; line-height: 40px; position: relative; display: inline-block; padding: 0 20px; width: auto; height: 40px; color: #ffffff; text-align: center; background: #000000; border-radius: 60%; } .balloon3:before { content: " "; position: absolute; bottom: -10px; left: 20px; margin-left: 0; display: block; width: 30px; height: 30px; background: #000000; border-radius: 0 30px 0 30px; z-index: -1; } .balloon3:after { content: " "; position: absolute; bottom: -5px; left: 30px; margin-left: 0; display: block; width: 30px; height: 30px; background: #ffffff; border-radius: 0 30px 0 30px; z-index: -1; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); }
これに加えて、親要素に以下スタイルシートを設定する必要があります。
CSSCopy
.親要素{ position: relative!important; z-index: 0!important; }

インデックス

長方形のインデックス

見出しデザインサンプル
HTMLCopy
<h2 class="index1"><span>見出しデザインサンプル</span></h2>
CSSCopy
.index1 { border-bottom: 3px solid #000000; } .index1 span { color: #ffffff; font-size: 16px; line-height: 20px; background: #000000; display: inline-block; padding: 10px; }

右端に斜のあるインデックス

見出しデザインサンプル
HTMLCopy
<h2 class="index2"><span>見出しデザインサンプル</span></h2>
CSSCopy
.index2 { border-bottom: 3px solid #000000; } .index2 span { color: #ffffff; font-size: 16px; line-height: 20px; position: relative; background: #000000; display: inline-block; padding: 10px; } .index2 span:after { content: " "; position: absolute; top: 0; left: 100%; width: 0; height: 0; border-width: 0 10px 40px 0; border-style: solid; border-color: transparent; border-bottom-color: #000000; }

台形のインデックス

見出しデザインサンプル
HTMLCopy
<h2 class="index3"><span>見出しデザインサンプル</span></h2>
CSSCopy
.index3 { border-bottom: 3px solid #000000; } .index3 span { color: #ffffff; font-size: 16px; line-height: 20px; position: relative; background: #000000; display: inline-block; padding: 10px; margin-left: 10px; } .index3 span:before { content: " "; position: absolute; top: 0; left: -10px; width: 0; height: 0; border-width: 40px 10px 0 0; border-style: solid; border-color: transparent; border-right-color: #000000; } .index3 span:after { content: " "; position: absolute; top: 0; left: 100%; width: 0; height: 0; border-width: 0 10px 40px 0; border-style: solid; border-color: transparent; border-bottom-color: #000000; }

ストライプ

太めのストライプ

見出しデザインサンプル
HTMLCopy
<h2 class="stripe1">見出しデザインサンプル</h2>
CSSCopy
.stripe1 { color: #ffffff; font-size: 16px; line-height: 20px; padding: 10px; background: repeating-linear-gradient(45deg, #4f4f4f, #4f4f4f 10px, #000000 10px, #000000 20px); }

細めのストライプ

見出しデザインサンプル
HTMLCopy
<h2 class="stripe2">見出しデザインサンプル</h2>
CSSCopy
.stripe2 { color: #ffffff; font-size: 16px; line-height: 20px; padding: 10px; background: repeating-linear-gradient(45deg, #4f4f4f, #4f4f4f 3px, #000000 3px, #000000 6px); }

ストライプ模様の下線

見出しデザインサンプル
HTMLCopy
<h2 class="stripe3">見出しデザインサンプル</h2>
CSSCopy
.stripe3 { font-size: 16px; line-height: 20px; padding: 10px; position: relative; } .stripe3:after { content: " "; width: 100%; height: 5px; bottom: 0; left: 0; position: absolute; background: repeating-linear-gradient(45deg, #4f4f4f, #4f4f4f 3px, #000000 3px, #000000 6px); }

2 件のコメント

コメントを残す

記事ランキング