この記事では、HTMLとCSSだけで色々な用途で使用可能な見出し（h1,h2など）のデザインをいくつか紹介します。ブログやHPで使って下さい。
HTMLとCSSをコピペするだけで反映されます。コピペした後に自分なりに編集してオリジナルのデザインにしてみて下さい。
- HTMLをbodyの好きな箇所にコピペ
- CSSをスタイルシートにコピペ
一つ一つに個別でclassを付けてHTMLに記述しています。基本的に被らなそうなクラス名にしていますが、classが重複してしまうとスタイルが崩れる場合があるのでご注意下さい。その場合はclass=”この部分“を任意のものにすれば解決します。
CSSの基本的な書き方は以下。
シンプル
まずはシンプルで簡単な王道デザインを紹介します。
黒で太文字
黒一色で太文字です。結局これが一番。
下記が実際の見え方です。以下省略。
シンプル1/これは見出しの見本です。
下記のHTMLをbody内に、CSSをスタイルシートにコピペして下さい。以下省略
HTML
<h5 class="titledesign1">シンプル1/これは見出しの見本です。</h5>CSS
.titledesign1 {
color: #111;
font-weight: 700;
}灰色中央
灰色にして中央揃え。どんなページでも見た目がまとまり、当サイトでも採用しているおすすめデザインです。
シンプル2/これは見出しの見本です。
HTML
<h5 class="titledesign2">シンプル2/これは見出しの見本です。</h5>CSS
.titledesign2 {
color: #777;
text-align: center;
}ボーダー線
シンプルな下線を付けてみました。
シンプル3/これは見出しの見本です。
HTML
<h5 class="titledesign3">シンプル3/これは見出しの見本です。</h5>CSS
.titledesign3 {
color: #111;
border-bottom: solid #111 2px;
padding: 0.2em;
}ボーダー線2本
シンプルな下線を2本付けてみました。
シンプル4/これは見出しの見本です。
HTML
<h5 class="titledesign4">シンプル4/これは見出しの見本です。</h5>CSS
.titledesign4 {
color: #111;
border-bottom: double #111 4px;
padding: 0.2em;
}ボーダー上下
ボーダー線を上下に2本入れました。
シンプル5/これは見出しの見本です。
HTML
<h5 class="titledesign5">シンプル5/これは見出しの見本です。</h5>CSS
.titledesign5 {
color: #111;
border-top: solid 3px #111;
border-bottom: solid 3px #111;
padding: 0.3em;
}
囲い
シンプルにボーダー線で囲っているだけのデザインです。
シンプル6/これは見出しの見本です。
HTML
<h5 class="titledesign6">シンプル6/これは見出しの見本です。</h5>CSS
.titledesign6 {
color: #111;
border: solid #111 2px;
padding: 0.3em;
}
丸み
ボーダー線で囲い丸みを付けました。
シンプル7/これは見出しの見本です。
HTML
<h5 class="titledesign7">シンプル7/これは見出しの見本です。</h5>CSS
.titledesign7 {
color: #111;
border: solid 3px #111;
border-radius: 0.5em;
padding: 0.2em;
}白黒反転
黒背景に白テキス。
シンプル8/これは見出しの見本です。
HTML
<h5 class="titledesign8">シンプル8/これは見出しの見本です。</h5>CSS
.titledesign8 {
background: #777;
color: #fff;
padding: 0.3em;
}点線
ボーダー線を点線に変えました。
シンプル9/これは見出しの見本です。
HTML
<h5 class="titledesign9">シンプル9/これは見出しの見本です。</h5>CSS
.titledesign9 {
color: #111!important;
border-bottom: dashed 2px #111;
padding: 0.2em;
}
立体的
背景色と下線に強弱を付けて立体的な見た目に。
シンプル10/これは見出しの見本です。
HTML
<h5 class="titledesign10">シンプル10/これは見出しの見本です。</h5>CSS
.titledesign10 {
color: #111;
background-color:rgba(230,230,230,0.5);
border-bottom: solid #dcdcdc 4px;
border-right: solid #dcdcdc 1px;
border-left: solid #dcdcdc 1px;
padding: 0.3em;
}色付きのデザイン
次は、色付きのデザインをいくつか紹介します。
背景色
背景色に色を追加。
色付き1/これは見出しの見本です。
HTML
<h5 class="titledesign_c1">色付き1/これは見出しの見本です。</h5>CSS
.titledesign_c1 {
background: rgba(189, 255, 189);
color:#555;
padding: 0.3em;
text-align: left;
}透明感
背景を透明感のある色合いに変更。
色付き2/これは見出しの見本です。
HTML
<h5 class="titledesign_c2">色付き2/これは見出しの見本です。</h5>CSS
.titledesign_c2 {
background: rgba(189, 255, 189, .3);
color:#555;
padding: 0.3em;
text-align: left;
}左に帯
左側に「│」の帯を付ける。
色付き3/これは見出しの見本です。
HTML
<h5 class="titledesign_c3">色付き3/これは見出しの見本です。</h5>CSS
.titledesign_c3 {
background: rgba(189, 255, 189, .3);
color:#555;
padding: 0.3em;
text-align: left;
border-left: solid 5px #008000;
}グラデーション
背景をグラデーションカラーに。
色付き4/これは見出しの見本です。
HTML
<h5 class="titledesign_c4">色付き4/これは見出しの見本です。</h5>CSS
.titledesign_c4 {
background: linear-gradient(90deg, #109e10, rgba(209, 255, 209, .7));
color:#555;
padding: 0.3em;
text-align: left;
}光沢感
グラデーションカラーを応用して光沢感のあるカラーに。
色付き5/これは見出しの見本です。
HTML
<h5 class="titledesign_c5">色付き5/これは見出しの見本です。</h5>CSS
.titledesign_c5 {
background-image: radial-gradient(at 250px 28px, rgba(34, 139, 34, .6), #134713);
color:#ffe045;
padding: 0.3em;
text-align: left;
}以上が『コピペで出来る見出しデザイン15選：CSSをそのまま使用可能』でした。
今後気が向けばどんどんいろんなデザインを追加していきます。コーティング作業やブログ運営、HP制作などに適当に使って下さい。（全部丸々コピペでいけます。）
デザイン見本まとめ
他のデザイン見本もいくつか用意しています。合わせてどうぞ。
