BLOG
HTMLとCSSのみで簡単に作れる比較的シンプルな見出しデザインをご紹介いたします。
コピペで使用する場合はフォントサイズによってマークの位置等がズレてしまいますのでCSSを調整してください。
見出しデザインとCSSソースコード
下線
タイトルの下にボーダーを引いた見出しデザインです。
- SAMPLE
-
見出しデザイン
<h1>見出しデザイン</h1>h1 {
padding: 0 0 8px;
border-bottom: solid 1px #ccc;
}下線（破線）
タイトルの下に破線（点線）を引いた見出しデザインです。
- SAMPLE
-
見出しデザイン
<h1>見出しデザイン</h1>h1 {
padding: 0 0 8px;
border-bottom: dashed 1px #ccc;
}下線（二重線）
タイトルの下に二重線ボーダーを引いた見出しデザインです。
- SAMPLE
-
見出しデザイン
<h1>見出しデザイン</h1>h1 {
padding: 0 0 8px;
border-bottom: double 3px #ccc;
}下線（2トーンカラー）
タイトルの下にツートーンパターンを引いた見出しデザインです。
- SAMPLE
-
見出しデザイン
<h1>見出しデザイン</h1>
h1 {
position: relative;
padding: 0 0 5px;
border-bottom: 2px solid #ccc;
}
h1::after {
position: absolute;
content: " ";
border-bottom: solid 2px #D3BA2B;
bottom: -2px;
width: 10%;
display: block;
}
上下に線を引く
タイトルの上下に引いた見出しデザインです。
- SAMPLE
-
見出しデザイン
<h1>見出しデザイン</h1>
h1 {
padding: 8px 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
横線（縦ライン）
タイトルの先頭に縦ラインを入れた見出しデザインです。
- SAMPLE
-
見出しデザイン
<h1>見出しデザイン</h1>
h1 {
padding: 8px 4px 8px 12px;
border-left: 6px solid #ccc;
}
横線（縦ライン+下線）
タイトルの先頭に縦ラインと下線を入れた見出しデザインです。
- SAMPLE
-
見出しデザイン
<h1>見出しデザイン</h1>
h1 {
padding: 8px 4px 8px 12px;
border-left: 6px solid #E5410A;
border-bottom: solid 1px #ccc;
}
背景色
タイトル全体に背景色を入れた見出しデザインです。
- SAMPLE
-
見出しデザイン
<h1>見出しデザイン</h1>
h1 {
padding: 8px 4px 8px 12px;
background-color: #f6f6f6;
}
背景色（角丸）
タイトル全体に背景色（角丸）を入れた見出しデザインです。
- SAMPLE
-
見出しデザイン
<h1>見出しデザイン</h1>
h1 {
padding: 8px 4px 8px 12px;
background-color: #f6f6f6;
border-radius: 5px;
}
背景色（上下に線を引く）
タイトル全体に背景色に上下でボーダーを引いた見出しデザインです。
- SAMPLE
-
見出しデザイン
<h1>見出しデザイン</h1>
h1 {
padding: 8px 4px 8px 12px;
background-color: #f6f6f6;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
