• このエントリーをはてなブックマークに追加

h1にスタイルをつけるというサンプルで例を紹介しています。

あなたの作成する見出しで使用する際は、適宜都合の良い記述方法で、設定してくださいね。

太字にする

フォントを太字にするだけ。

HTML

<div class="heading-1-1">見出し見出し見出し見出し</div>

CSS

.heading-1-1{
font-weight: bold;
}

デモ

デモを見る

フォントを太字・大文字に

フォントを太字・大文字にした見出し。中くらいの見出しなどにこういったものを使用できるかも。

HTML

<div class="heading-2-1">見出し見出し見出し見出し</div>

CSS

.heading-2-1{
font-size: 1.5em;
font-weight: bold;
}

デモ

デモを見る

下線を引く

下線を引いた見出し。下線の色は、濃いとぱっと見つけやすくなるかもしれないが、調和が難しくなる。ページ全体の調和が取れる色にすること。文章内に登場する見出しがいくつもある場合は、薄めのグレー系を使うと良さげ。時と場合にはよるが。

単色の下線を引いた見出しはデフォルトの文字だけだとその範囲が見出しの領域という見た目に。
見出しの多くはブロック要素なので、幅いっぱいに色を付けたり、あるいはこの例のように線を引く事によって、前後のメリハリを高めます。背景をつけるよりも洗練されます。

どこが見出しだということが発見しやすくなります。

見出し=話が変わるポイント、違った内容を述べている項目のスタート地点ということです。

HTML

<div class="heading-3-1">見出し見出し見出し見出し</div>

CSS

.heading-3-1{
border-bottom: solid 1px rgba(200,200,200,1);
font-weight: bold;
}

HTML

<div class="heading-3-2">見出し見出し見出し見出し</div>

CSS

.heading-3-2{
border-bottom:solid 0.2vw rgba(90,90,90,1);
}

デモ

デモを見る

単色背景の見出し

単純に背景に色を付けて、視認性を高めた見出しのサンプルです。パディングなどは全く設定していません。背景が例えば赤いときは白い文字など可読性の高い色を選択する必要があります。黒のままだと滲んでしまい見づらくなります。

HTML

<div class="heading-color-background">見出し見出し見出し見出し</div>

CSS

.heading-color-background{
color: rgba(255,255,255,1);
background: rgba(255,0,0,1);
}

デモ

デモを見る

線を左に引く

左側に線を引いた見出し。行間も設定。ポイントとしては、左側に線を引く場合は、paddingで左に隙間を付けておくこと。ぴっちりひっつけてもいいが、少し空いていたほうがいいかも。

見出しや段落の始まりが左側に揃っていると、目線が、下にそのまま降りていくので、下線より見出しを発見しやすいのがメリット。

HTML

<div class="heading-border-left1">見出し見出し見出し見出し</div>

CSS

.heading-border-left1{
padding: 0.3em;
line-height: 1.2;
font-size: 1.5em;
font-weight: bold;
color: rgba(255,255,255,1);
background: rgba(0,30,150,1);
}

デモ

デモを見る

下線を少し太くして、色を指定

下線を少し太くしてみた見出し。色を付けてみた。

HTML

<div class="heading-5-1">見出し見出し見出し見出し</div>

CSS

.heading-5-1{
padding: 0 0 0.2em;
border-bottom: solid 0.2em rgba(230,100,100,1);
font-size: 1.5em;
font-weight: bold;
}

デモ

デモを見る

背景に色を付けた見出しの例 さらに

単色の背景にさらに補足の説明として。

背景に色を付けた見出しの例。濃い色の場合は白抜きの文字としたほうがいい。コントラストが低いと見づらくなる。

HTML

<div class="heading-color-background2">見出し見出し見出し見出し</div>

CSS

.heading-background2{
padding: 0.3em;
line-height: 1.2;
font-size: 1.5em;
font-weight: bold;
color: rgba(255,255,255,1);
background: rgba(0,30,150,1);
}

デモ

デモを見る

グラデーションを使った装飾

グラデーション(色階調)を使って立体感・質感を表現。

HTML

<div class="heading-background-gradient1">見出し見出し見出し見出し</div>

CSS

.heading-background-gradient1{
padding: 0.3em;
line-height: 1.2;
font-size: 1.5em;
font-weight: bold;
color: rgba(255,255,255,1);
background: linear-gradient(to right, rgba(255,0,0,1) 0%,rgba(100,0,255,1) 100%);
}

デモ

デモを見る

グラデーションな見出し:横

グラデーションを横に設定する。

HTML

<div class="heading-background-gradient1">見出し見出し見出し見出し</div>

CSS

.heading-background-gradient1{
padding: 0.3em;
line-height: 1.2;
font-size: 1.5em;
font-weight: bold;
color: rgba(255,255,255,1);
background: linear-gradient(to right, rgba(180,180,0,1) 0%,rgba(0,150,200,1) 100%);
}

デモ

デモを見る

虹色・レインボーな見出し

レインボーな見出し。程々にしないと失敗かも。色の階調は徐々に変化するのが吉。あまり色の階調が多いと、設定によっては格好悪くなるし、美しく色が表現できない。

HTML

<div class="heading-rainbow1">見出し見出し見出し見出し</div>

CSS

.heading-rainbow1{
padding: 0.3em;
line-height: 1.2;
font-size: 1.5em;
font-weight: bold;
color: rgba(255,255,255,1);
background: linear-gradient(to right, rgba(255,0,0,1) 0%,rgba(200,200,0,1) 20%,rgba(0,200,0,1) 40%,rgba(0,150,150,1) 60%,rgba(0,0,220,1) 80%,rgba(200,0,200,1) 100%);
}

デモ

デモを見る

二重線の見出し

二重の枠をつける。

HTML

<div class="heading-border-double1">見出し見出し見出し見出し</div>

CSS

.heading-border-double1{
padding: 0.3em;
border: double 3px rgba(200,200,200,1);
line-height: 1.2;
font-size: 1.5em;
font-weight: bold;
color: rgba(50,50,50,1);
}

デモ

デモを見る

二重下線

二重の下線をつける。

HTML

<div class="heading-border-double2">見出し見出し見出し見出し</div>

CSS

.heading-border-double2{
padding: 0.3em 0;
border-bottom: double 3px rgba(200,200,200,1);
line-height: 1.2;
font-size: 1.5em;
font-weight: bold;
color: rgba(50,50,50,1);
}

デモ

デモを見る

中央に配置する

見出しの文字を中央に配置する。

HTML

<div class="heading-center">見出し見出し見出し見出し</div>

CSS

.heading-center{
padding: 0.3em 0;
text-align: center;
line-height: 1.2;
font-size: 1.5em;
font-weight: bold;
color: rgba(50,50,50,1);
}

デモ

デモを見る

コンパクトな線

中央に配置して、下線を少しだけ引く。

HTML

<div class="heading-13-1">見出し見出し見出し見出し</div>

CSS

.heading-compact-border1{
padding: 0.3em 0;
text-align: center;
line-height: 1.2;
font-size: 1.5em;
font-weight: bold;
color: rgba(50,50,50,1);
}
.heading-compact-border1::after{
position: relative;
padding: 0.3em 0 0;
left: calc(50% - 2em);
width: 4em;
content: '';
display: block;
border-bottom: solid 1px rgba(250,50,50,1);
}

デモ

デモを見る

HTML

CSS

デモ

デモを見る

HTML

CSS

デモ

デモを見る

HTML

CSS

デモ

デモを見る

HTML

CSS

デモ

デモを見る

HTML

CSS

デモ

デモを見る

HTML

CSS

デモ

デモを見る

HTML

CSS

デモ

デモを見る

HTML

CSS

デモ

デモを見る

HTML

CSS

デモ

デモを見る

HTML

CSS

デモ

デモを見る

HTML

CSS

デモ

デモを見る

HTML

CSS

デモ

デモを見る

HTML

CSS

デモ

デモを見る

HTML

CSS

デモ

デモを見る

HTML

CSS

デモ

デモを見る

HTML

CSS

デモ

デモを見る

HTML

CSS

デモ

デモを見る