【コピペで簡単！】CSSファイル書き換え不要！HTMLのみで作る見出し（タイトル）デザイン！
以前、ボックスデザイン（囲み枠）をご紹介しましたので、今回はサブタイトルなどに用いる【見出し】のデザインをご紹介します。一般的にはHTMLとは別にCSSファイルを用意して記述するのですが、ワードプレスなどで記事を作成する場合、装飾の度にCSSファイルを開いて追加するのがちょっと面倒だったりって事もありますよね。
そこで、CSSファイルを一切触らずに、ワードプレスのカスタムHTMLにコピペで利用できる【見出し】デザインをいくつかご紹介します。
また、以下のサンプルのHTMLでは便宜上divタグで記述していますが、特にdivタグにする必要もないので自由なHTMLタグに変更して下さい。
- シンプル見出しデザイン
シンプル見出しデザイン
線を使った見出しデザイン
先ずはシンプルに下線や左横線を利用した見出しのご紹介♪
ここに見出しのタイトル
HTMLはこちら↓
<div style="border-bottom: 3px solid #263f1f; font-size: 20px;">ここに見出しのタイトル</div>ここに見出しのタイトル
HTMLはこちら↓
<div style="border-bottom: 6px double #263f1f; font-size: 20px;">ここに見出しのタイトル</div>ここに見出しのタイトル
HTMLはこちら↓
<div style="border-bottom: 3px dotted #263f1f; font-size: 20px;">ここに見出しのタイトル</div>ここに見出しのタイトル
HTMLはこちら↓
<div style="padding: 1rem; border-left: 5px solid #263f1f; font-size: 20px;">ここに見出しのタイトル</div>ここに見出しのタイトル
HTMLはこちら↓
<div style="padding: 1rem; border-left: 6px double #263f1f; font-size: 20px;">ここに見出しのタイトル</div>ここに見出しのタイトル
HTMLはこちら↓
<div style="padding: 1rem; border-left: 4px dotted #263f1f; font-size: 20px;">ここに見出しのタイトル</div>ここに見出しのタイトル
HTMLはこちら↓
<div style="padding: 1rem; border-top: 3px solid #263f1f; border-bottom: 3px solid #263f1f; font-size: 20px;">ここに見出しのタイトル</div>ここに見出しのタイトル
HTMLはこちら↓
<div style="padding: 1rem; border-top: 6px double #263f1f; border-bottom: 6px double #263f1f; font-size: 20px;">ここに見出しのタイトル</div>ここに見出しのタイトル
HTMLはこちら↓
<div style="padding: 1rem; border-top: 4px dotted #263f1f; border-bottom: 4px dotted #263f1f; font-size: 20px;">ここに見出しのタイトル</div>背景色を付けた見出しデザイン
次は、見出しを目立たせるように背景色を付けたパターンです。
ここに見出しのタイトル
HTMLはこちら↓
<div style="padding: 1rem; border-left: 8px solid #263f1f; background: #d8e3d5; font-size: 20px;">ここに見出しのタイトル</div>ここに見出しのタイトル
HTMLはこちら↓
<div style="padding: 1rem; border-left: 10px double #263f1f; background: #d8e3d5; font-size: 20px;">ここに見出しのタイトル</div>ちょっと工夫した見出しデザイン
通常、CSSの疑似要素を使って表現するようなデザインをHTMLのみで書いてみました。
ここに見出しのタイトル
HTMLはこちら↓
<div style="position: relative; padding: 1rem 2rem calc(1rem + 10px); background: #d8e3d5; font-size:20px;">
<span style="position: absolute; top: -7px; left: -7px; width: 100%; height: 100%; border: 4px solid #263f1f;"></span>
ここに見出しのタイトル</div>
ここに見出しのタイトル
HTMLはこちら↓
<div style="position: relative; padding: 1em 2em; background-color: #d8e3d5; font-size: 20px;">
<span style="position: absolute; top: 100%; border-style: solid; border-color: transparent; left: 0; border-width: 0 15px 15px 0; border-right-color: #263f1f;"></span>
ここに見出しのタイトル
<span style="position: absolute; top: 100%; border-style: solid; border-color: transparent; right: 0; border-style: solid; border-width: 15px 15px 0 0; border-top-color: #263f1f;"></span></div>
ここに見出しのタイトル
HTMLはこちら↓
<div style="position: relative; display: inline-block; padding: 1rem 2rem 1rem 3rem; color: #263f1f; border-radius: 50px 0 0 50px; background: #d8e3d5; font-size: 20px;">
<span style="position: absolute; top: calc(50% - 10px); left: 10px; width: 15px; height: 15px; border-radius: 50%; background: #ffffff;"></span>
ここに見出しのタイトル</div>ここに見出しのタイトル
HTMLはこちら↓
<div style="border-left:13px solid #263f1f; border-bottom:3px solid #263f1f; padding-left:12px; font-size: 20px;">ここに見出しのタイトル</div>まとめ
今回ご紹介した見出しデザインは、シンプルなものばかりなので使いやすいかと思います。色を変更したりなど、サイトの雰囲気に合わせてご活用ください。