ブログ用見出しテンプレート[アクセント2]
(2016/02/01)
HOME
CSS でかっこいい h タグをつくろう
> [フラット系1]
> [フラット系2]
> [アクセント1]
>
[アクセント2] > [立体系]
> [インパクト系]
> [ペーパー系]
> [フィルム系]
> [ふきだし系]
> [真鍮ボタン]
> [真鍮ボタン2]
> [セロファンリボン 1]
> [セロファンリボン 2]
> [ピン留めリボン]
フラットタイプの応用編です。見出しの前にアクセントカラーをつけ、4 種類のラインバリエーションをそろえてみました。
カラーパターンは以下のサイトでご覧になれます。
WEB色見本 和色大辞典
[外部リンク]
丸抜きタイプ（上下ライン）
上下にラインが入ることでシャープなイメージになります。また、アクセントカラーが読者の目をひきつけます。
のしめはないろ
<div style="width: 15px;height: 15px;border-radius: 50%;border: 3px solid #426579;background: #fff;"></div><h3 style="margin-top: -27px;border-top: 1px solid #426579;border-bottom: 1px solid #426579;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>もえぎ色
<div style="width: 15px;height: 15px;border-radius: 50%;border: 3px solid #006e54;background: #fff;"></div><h3 style="margin-top: -27px;border-top: 1px solid #006e54;border-bottom: 1px solid #006e54;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>うぐいす茶
<div style="width: 15px;height: 15px;border-radius: 50%;border: 3px solid #715c1f;background: #fff;"></div><h3 style="margin-top: -27px;border-top: 1px solid #715c1f;border-bottom: 1px solid #715c1f;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>なかべに
<div style="width: 15px;height: 15px;border-radius: 50%;border: 3px solid #c85179;background: #fff;"></div><h3 style="margin-top: -27px;border-top: 1px solid #c85179;border-bottom: 1px solid #c85179;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>うすねず
<div style="width: 15px;height: 15px;border-radius: 50%;border: 3px solid #9790a4;background: #fff;"></div><h3 style="margin-top: -27px;border-top: 1px solid #9790a4;border-bottom: 1px solid #9790a4;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>きくじん
<div style="width: 15px;height: 15px;border-radius: 50%;border: 3px solid #6e7955;background: #fff;"></div><h3 style="margin-top: -27px;border-top: 1px solid #6e7955;border-bottom: 1px solid #6e7955;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>うつぶしいろ
<div style="width: 15px;height: 15px;border-radius: 50%;border: 3px solid #9d896c;background: #fff;"></div><h3 style="margin-top: -27px;border-top: 1px solid #9d896c;border-bottom: 1px solid #9d896c;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>かえちかえし
<div style="width: 15px;height: 15px;border-radius: 50%;border: 3px solid #203744;background: #fff;"></div><h3 style="margin-top: -27px;border-top: 1px solid #203744;border-bottom: 1px solid #203744;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>きつねいろ
<div style="width: 15px;height: 15px;border-radius: 50%;border: 3px solid #c38743;background: #fff;"></div><h3 style="margin-top: -27px;border-top: 1px solid #c38743;border-bottom: 1px solid #c38743;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>からすばいろ
<div style="width: 15px;height: 15px;border-radius: 50%;border: 3px solid #180614;background: #fff;"></div><h3 style="margin-top: -27px;border-top: 1px solid #180614;border-bottom: 1px solid #180614;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>ぬりつぶし丸タイプ（上下ダブルライン）
二重線のラインはシックな雰囲気になります。
のしめはないろ
<div style="width: 18px;height: 18px;border-radius: 50%;background: #426579;"></div><h3 style="margin-top: -27px;border-top: 3px double #426579;border-bottom: 3px double #426579;height: 30px;padding-left: 1.85em;padding-top: 4px;">ここにテキストを入力します</h3>もえぎいろ
<div style="width: 18px;height: 18px;border-radius: 50%;background: #006e54;"></div><h3 style="margin-top: -27px;border-top: 3px double #006e54;border-bottom: 3px double #006e54;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>うぐいす茶
<div style="width: 18px;height: 18px;border-radius: 50%;background: #715c1f;"></div><h3 style="margin-top: -27px;border-top: 3px double #715c1f;border-bottom: 3px double #715c1f;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>なかべに
<div style="width: 18px;height: 18px;border-radius: 50%;background: #c85179;"></div><h3 style="margin-top: -27px;border-top: 3px double #c85179;border-bottom: 3px double #c85179;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>うすねず
<div style="width: 18px;height: 18px;border-radius: 50%;background: #9790a4;"></div><h3 style="margin-top: -27px;border-top: 3px double #9790a4;border-bottom: 3px double #9790a4;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>きくじん
<div style="width: 18px;height: 18px;border-radius: 50%;background: #6e7955;"></div><h3 style="margin-top: -27px;border-top: 3px double #6e7955;border-bottom: 3px double #6e7955;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>うつぶしいろ
<div style="width: 18px;height: 18px;border-radius: 50%;background: #9d896c;"></div><h3 style="margin-top: -27px;border-top: 3px double #9d896c;border-bottom: 3px double #9d896c;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>かちかえし
<div style="width: 18px;height: 18px;border-radius: 50%;background: #203744;"></div><h3 style="margin-top: -27px;border-top: 3px double #203744;border-bottom: 3px double #203744;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>きつねいろ
<div style="width: 18px;height: 18px;border-radius: 50%;background: #c38743;"></div><h3 style="margin-top: -27px;border-top: 3px double #c38743;border-bottom: 3px double #c38743;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>からすばいろ
<div style="width: 18px;height: 18px;border-radius: 50%;background: #180614;"></div><h3 style="margin-top: -27px;border-top: 3px double #180614;border-bottom: 3px double #180614;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>四角抜きタイプ（点線）
下線を点線にすると、主張が抑えられますので、文章系サイトにもおすすめですね。
ねずみいろ
<div style="width: 15px;height: 15px;border: 3px solid #808080;background: #fff;"></div><h3 style="margin-top: -25px;border-bottom: 1px dotted #808080;height: 30px;padding-left: 1.75em;">ここにテキストを入力します</h3>オリーブいろ
<div style="width: 15px;height: 15px;border: 3px solid #72640c;background: #fff;"></div><h3 style="margin-top: -25px;border-bottom: 1px dotted #72640c;height: 30px;padding-left: 1.75em;">ここにテキストを入力します</h3>マルーンいろ
<div style="width: 15px;height: 15px;border: 3px solid #6a1917;background: #fff;;"></div><h3 style="margin-top: -25px;border-bottom: 1px dotted #6a1917;height: 30px;padding-left: 1.75em;">ここにテキストを入力します</h3>アンティックゴールドいろ
<div style="width: 15px;height: 15px;border: 3px solid #c1ab05;background: #fff;"></div><h3 style="margin-top: -25px;border-bottom: 1px dotted #c1ab05;height: 30px;padding-left: 1.75em;">ここにテキストを入力します</h3>クロムグリーンいろ
<div style="width: 15px;height: 15px;border: 3px solid #00533f;background: #fff;"></div><h3 style="margin-top: -25px;border-bottom: 1px dotted #00533f;height: 30px;padding-left: 1.75em;">ここにテキストを入力します</h3>ラズベリーレッドいろ
<div style="width: 15px;height: 15px;border: 3px solid #9f166a;background: #fff;"></div><h3 style="margin-top: -25px;border-bottom: 1px dotted #9f166a;height: 30px;padding-left: 1.75em;">ここにテキストを入力します</h3>くろいろ
<div style="width: 15px;height: 15px;border: 3px solid #000;background: #fff;"></div><h3 style="margin-top: -25px;border-bottom: 1px dotted #000;height: 30px;padding-left: 1.75em;">ここにテキストを入力します</h3>やまぶきいろ
<div style="width: 15px;height: 15px;border: 3px solid #f8b500;background: #fff;"></div><h3 style="margin-top: -25px;border-bottom: 1px dotted #f8b500;height: 30px;padding-left: 1.75em;">ここにテキストを入力します</h3>ひいろ
<div style="width: 15px;height: 15px;border: 3px solid #d3381c;background: #fff;"></div><h3 style="margin-top: -25px;border-bottom: 1px dotted #d3381c;height: 30px;padding-left: 1.75em;">ここにテキストを入力します</h3>セルリアンブルーいろ
<div style="width: 15px;height: 15px;border: 3px solid #00a0de;background: #fff;"></div><h3 style="margin-top: -25px;border-bottom: 1px dotted #00a0de;height: 30px;padding-left: 1.75em;">ここにテキストを入力します</h3>ぬりつぶし四角タイプ（枠線）
枠を入れることによって、ページの文章構成が引き締まります。
ねずみいろ
<div style="width: 18px;height: 18px;margin-left: 5px;background: #808080;"></div><h3 style="margin-top: -27px;border: 1px solid #808080;height: 30px;padding-top: 4px;padding-left: 1.75em;">ここにテキストを入力します</h3>オリーブいろ
<div style="width: 18px;height: 18px;margin-left: 5px;background: #72640c;"></div><h3 style="margin-top: -27px;border: 1px solid #72640c;height: 30px;padding-top: 4px;padding-left: 1.75em;">ここにテキストを入力します</h3>マルーンいろ
<div style="width: 18px;height: 18px;margin-left: 5px;background: #6a1917;"></div><h3 style="margin-top: -27px;border: 1px solid #6a1917;height: 30px;padding-top: 4px;padding-left: 1.75em;">ここにテキストを入力します</h3>アンティックゴールドいろ
<div style="width: 18px;height: 18px;margin-left: 5px;background: #c1ab05;"></div><h3 style="margin-top: -27px;border: 1px solid #c1ab05;height: 30px;padding-top: 4px;padding-left: 1.75em;">ここにテキストを入力します</h3>クロームグリーンいろ
<div style="width: 18px;height: 18px;margin-left: 5px;background: #00533f;"></div><h3 style="margin-top: -27px;border: 1px solid #00533f;height: 30px;padding-top: 4px;padding-left: 1.75em;">ここにテキストを入力します</h3>ラズベリーレッドいろ
<div style="width: 18px;height: 18px;margin-left: 5px;background: #9f166a;"></div><h3 style="margin-top: -27px;border: 1px solid #9f166a;height: 30px;padding-top: 4px;padding-left: 1.75em;">ここにテキストを入力します</h3>くろいろ
<div style="width: 18px;height: 18px;margin-left: 5px;background: #000;"></div><h3 style="margin-top: -27px;border: 1px solid #000;height: 30px;padding-top: 4px;padding-left: 1.75em;">ここにテキストを入力します</h3>やまぶきいろ
<div style="width: 18px;height: 18px;margin-left: 5px;background: #f8b500;"></div><h3 style="margin-top: -27px;border: 1px solid #f8b500;height: 30px;padding-top: 4px;padding-left: 1.75em;">ここにテキストを入力します</h3>ひいろ
<div style="width: 18px;height: 18px;margin-left: 5px;background: #d3381c;"></div><h3 style="margin-top: -27px;border: 1px solid #d3381c;height: 30px;padding-top: 4px;padding-left: 1.75em;">ここにテキストを入力します</h3>セルリアンブルーいろ
<div style="width: 18px;height: 18px;margin-left: 5px;background: #00a0de;"></div><h3 style="margin-top: -27px;border: 1px solid #00a0de;height: 30px;padding-top: 4px;padding-left: 1.75em;">ここにテキストを入力します</h3>使用上の注意：
配布コードは改変自由となっております。 詳細な使用条件につきましてはこちらのページをご覧ください。
配布コード使用上の注意
テンプレートコードの改変についてはサポートを提供しておりませんが、リンクの張り方がわからない、見出しの付け方がわからないなどといった、基本的な操作方法についてご質問のある方は、以下の拍手タグからお願いします。
質問をされる場合は、質問者を識別するために、ニックネームの入力にご協力ください。
![できるホームページHTML＆CSS入門 [ 佐藤和人 ]](https://hbb.afl.rakuten.co.jp/hgb/?pc=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fbook%2fcabinet%2f9664%2f9784844329664.jpg%3f_ex%3d400x400&m=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fbook%2fcabinet%2f9664%2f9784844329664.jpg%3f_ex%3d80x80)
できるホームページHTML＆CSS入門 [ 佐藤和人 ]
価格：1,706円（税込、送料込）
ジャンル別一覧
人気のクチコミテーマ
-
-
- みんなのレビュー
- 内勤です。⛅️（8度）寒い秋模様🍂
- (2025-11-18 17:12:55)
-
-
-
- 楽天写真館
- おやまへゴ～(*^o^)／＼(^-^*)
- (2025-11-19 06:38:54)
-
-
-
- 気になるニュース＆話題(Infoseekニ…
- Satsukiyama DAYZOO ウォンバットラ…
- (2025-11-19 12:44:10)
-
© Rakuten Group, Inc.
