コピペで実装出来る、HTMLとCSSのタイトル見出しデザインサンプル30

◼︎iPhone6sに乗り換えて3万円以上のMNPキャッシュバックを貰う5つの方法
◼︎ソフトバンク「スマ放題」の料金を3000円安くする5つの方法
◼︎iPhone6sに機種変更するなら絶対公式サイトを利用すべき理由８選

Webサイトを閲覧する人の目に最初に飛び込んでくるもの。それは見出しです。

キャッチーな言葉選びも大事ですが、視覚情報としての価値も大きい見出しでは、そのデザイン性も良い物を要求されます。

しかし、サイトに合わせてひとつひとつ見出しをデザインするのは、アイディアを出すのもコードを書くのも大変……。

そこで、今回は10秒で使える！コピー＆ペーストで簡単に、あなたのサイトの見出しを美しくするコードを紹介します！

見出しで、実用的にとにかく使えるコード

 

まずは一番大きな見出しである<h1>で使えるコードを紹介します。応用次第で他のサイズの見出しにも使えますが、時間が無い時はそのまま<h1>で使うのがいいでしょう。

基本となるHTMLコードはこちらです。

<h1>iPhoneの神様</h1>

簡単ですね。ですが、単純すぎるだけあってこのままだとこんな格好悪い見た目になってしまいます。

ですがこれにちょっとしたCSSを付けるだけで、味気ない見出しがとてもきれいなものになります。

※本文中に出てくる参考画像のうち、小さくて見づらいものはクリックすると大きくなります。ご了承ください。

NO.1：シンプルな下ボーダー

最初のサンプル画像のフォントはCSSで指定していないデフォルトのものですが、ここからはHG丸ゴシックM-PROを使っていきます。さて、どのような見た目になるのでしょう。

まだ少しさびしいですが、フォントや配置を工夫すればこれだけでも十分印象が変わります。肝心のコードは

h1{
padding-bottom: .5em;
border-bottom: 1px solid #ccc;
}

です。では、次はもっとおしゃれなボーダーを入れてみましょう。

No.2　上下にボーダー

行間が狭くて分かりづらいかもしれませんが、2つの見出しの上下それぞれに細いボーダーが入っています。見出しと見出しの間に<p>で文書を入れれば、かなり様になりますね。

コードは

h1 {
padding: .75em 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}

です。では、これをもっと工夫してみましょう。

No.3　先頭の文字を大きくしてみる

先ほどの2本ボーダーの見出しはそのままに、先頭の文字を大きくしてみました。英語の文章だったりするとさらに見栄えします。洋書の飾り文字を彷彿とさせますね。コードはNo.2の下に以下のコードを書き加えます。

h1:first-letter {
margin-right: .1em;
font-size: 1.5em;
}

No.4　定番の左ボーダー

これはよく見掛ける見出しなのではないでしょうか。初心者には一見面倒くさそうに思えますが、実はたったこれだけのコードで作れるんです。

h1 {
padding: .25em 0 .25em .75em;
border-left: 6px solid #ccc;
}

とっても簡単ですね。

No.5　ボーダーで囲む　アクセントもつけられる！

見出しが分かりやすくなるよう四角いボーダーで囲んでいます。

h1 {
padding: .5em .75em;
border: 1px solid #ccc;
}

コードを書き加えれば、角丸にしたり手書き風にすることも可能です。さらに、ボーダーの中の見出しにアクセントを付けたければこうしましょう。

h1 {
position: relative;
padding: .75em 1em .75em 1.5em;
border: 1px solid #ccc;
}
h1::after {
position: absolute;
top: .5em;
left: .5em;
content: ”;
width: 6px;
height: -webkit-calc(100% – 1em);
height: calc(100% – 1em);
background-color: #3498db;
border-radius: 4px;
}

ここまで来ると結構工夫し甲斐のあるコードになってきたのでは？

まだまだ物足りないとおっしゃるそこのあなた！ここからは中級編です！とはいってもコピペなので、肩の力を抜いて見ていってください。

No.6　補足やサブタイトルを入れてみる

この場合はHTMLを少々書き換える必要があります。HTMLのサンプルコードはこのようになります。

<h1>
<span>もっとプログラミングに詳しくなる！</span>
iPhoneの神様
</h1>

<h1>
<span>今日のテーマはこれ！</span>
見栄えのいい見出しを作ろう！
</h1>

補足の文章を<span>で挿入しています。これにCSSをくっつけるとどうなるのか。

とっても分かりやすくなりましたね。色や文字のサイズも工夫次第で変えられます。基本のCSSはこちら。

h1 {
padding-bottom: .5em;
border-bottom: 1px solid #ccc;
}
h1 span {
display: block;
margin-bottom: .2em;
color: #aaa;
font-size: .7em;
}

ちょっとずつ長くなっていきますが、慣れていけば応用にも使えるので損はありません。

No.7　見出しの両端にボーダー

ボーダーの種類を変えたりする余地はありますが、このままでも十分使えますね。HTMLも書き換えます。

<h1>
<span>iPhoneの神様</span>
</h1>

<h1>
<span>見栄えのいい見出しを作ろう！</span>
</h1>

となり、CSSは
h1 {
position: relative;
text-align: center;
}
h1 span {
position: relative;
z-index: 2;
display: inline-block;
margin: 0 2.5em;
padding: 0 1em;
background-color: #fff;
text-align: left;
}
h1::before {
position: absolute;
top: 50%;
z-index: 1;
content: ”;
display: block;
width: 100%;
height: 1px;
background-color: #ccc;
}

です。

No.8　吹き出し風見出し

 

形を吹き出し型に変形させた見出しを、画像を使わずCSSだけで作ることができます。HTMLはいじらなくてOK！CSSはこちら。

h1 {
position: relative;
padding: .5em .75em;
background-color: #f0f0f0;
border-radius: 6px;
}
h1::after {
position: absolute;
top: 100%;
left: 30px;
content: ”;
width: 0;
height: 0;
border: 10px solid transparent;
border-top: 15px solid #f0f0f0;
}

カラーコードを変えるだけで、サイトの雰囲気にもっとぴったりな吹き出しを作れます。

No.9　リボン風見出し

今度は女性らしいリボンの形をした見出しです。これもCSSだけで作ることができます。

コードはこちら。
h1 {
position: relative;
padding: .75em 1em;
background-color: #f0f0f0;
}
h1::before,
h1::after {
content: ”;
position: absolute;
top: 100%;
border-style: solid;
border-color: transparent;
}
h1::before {
left: 0;
border-width: 0 15px 15px 0;
border-right-color: #ccc;
}
h1::after {
right: 0;
border-style: solid;
border-width: 15px 15px 0 0;
border-top-color: #ccc;
}

吹き出し風より少し難しくなっていますね。

No.10　背景にグラデーション

パッと見て目に鮮やかなグラデーションで、閲覧者の興味を引き付けましょう。

h1 {
padding: .5em .75em;
background: -webkit-linear-gradient(top, #69b4e6 0%, #3498db 100%);
background: linear-gradient(to bottom, #69b4e6 0%, #3498db 100%);
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
}

文字色とグラデーションの色の組み合わせで、さらに見栄えがよくなります。

ここまでは、一番大きな<h1>の見出しで使えるコードを紹介してきました。次は、小ぶりで扱いやすい<h3>見出しのコードをご紹介します。

ここまでこだわりたい、小見出しで使えるコード

基本になるコードと、それだけを使った飾り気のない見出しがこちらです。

<h3>コピペ見出しBEST30</h3>

No.11　下ボーダー＋左ボーダー

このような簡単な見出しならCSSを直接HTMLに書き込むだけで大丈夫です。

<h3 style=”border-bottom: 1px solid #426579;border-left: 10px solid #426579;padding: 7px;”>コピペ見出しBEST30</h3>

No.12　ボックス

これもHTMLに直接書きこめばOK。

<h3 style=”border-left: 15px solid #8491c3;padding: 7px;background: #ccd6ff;”>コピペ見出しBEST30</h3>

左の太いボーダーの色と、背景の色の組み合わせで遊べそうです。

No.13　上下にボーダー

シンプルですが、そのおかげでどんなデザインのサイトにもマッチする便利な見出しです。

<h3 style=”border-top: 1px solid #000;border-bottom: 1px solid #000;padding: 7px;”>コピペ見出しBEST30</h3>

No.14　上下にダブルボーダー

おしゃれでシンプル、場所を選ばない、No.13の進化系です。

<h3 style=”border-top: 3px double #000;border-bottom: 3px double #000;padding: 7px;”>コピペ見出しBEST30</h3>

No.15　映画フィルム風見出し

なんと、こんなにおしゃれな見出しまで、HTMLに書き込むCSSだけで作れちゃうんです。これは知らなかった人も多いのでは？

<h3 style=”background:#000;color:#fff;font-size:18pt;width:80%;border-top:13px dashed #fff;border-bottom:13px dashed #fff;box-shadow: 0 0 3px 8px #000;text-shadow: 0 0 5px;padding:20px;margin-left:10px;”>コピペ見出しBEST30</h3>

色や文字の大きさも変えられます。上級者ならさらに応用をきかせてみたいですね。

No.16　白背景の吹き出し見出し

<h1>見出しにも吹き出しはありましたが、<h3>にももちろんあります。しかも今回は2種類ご紹介。ひとつは白い背景で文字が見やすいこちらのコード。

<h3 style=”width:80%;padding:10px;border: 2px solid #0d0015;border-radius:12px;background:#fff;color:#0d0015;font-size:16pt;margin-bottom:0px;”>コピペ見出しBEST30</h3><div style=”width:0px;height:0px;border-style: solid;border-width: 20px 5px 0 26px;border-color: #0d0015 transparent transparent transparent;margin-left:21px;”></div><div style=”width:0px;height:0px;border-style: solid;border-width: 18px 5px 0 25px;border-color: #fff transparent transparent transparent;margin-left:21px;margin-top:-22px;margin-bottom:20px;”></div>

ポップで親しみやすいところに好感が持てます。

No.17　塗りつぶし背景の吹き出し見出し

もうひとつは、背景を塗りつぶしたさらに可愛らしい見出しです。色の組み合わせで文字が見づらくならないよう注意しましょう。

<h3 style=”width:80%;padding:10px;border-radius:12px;background:#aacf53;color:#007b43;font-size:16pt;margin-bottom:0px;”>コピペ見出しBEST30</h3><div style=”width:0px;height:0px;border-style: solid;border-width: 20px 5px 0 26px;border-color: #aacf53 transparent transparent transparent;margin-left:21px;margin-bottom:20px;”></div>

 No.18　サブタイトルの入った見出し

これはHTMLとCSSに分けて書く必要があります。

HTML

<h3 class=”midashi”>コピペ見出しBEST30
<span class=”hosoku”>こじゃれたページはまかせて！</span></h3>
</body>

CSS

.midashi{
border-left:7px solid #ccc;
padding:.8em .9em;
}

.hosoku{
display:block;
padding-top:.2em;
font-size:.8em;
color:#ccc;
}

そんなに長いコードではないので、アレンジも簡単です。

高度なCSSを利用した見栄えが目を引く、見出しで使えるコード

さてここからは上級編。<h2>見出しを例に、かなり高度なCSSを見ていきましょう。とはいえ、コピペですが。

No.19　黄色いテープ

画面横幅一杯にテープが引かれるコードです。かなり目を惹きますね。

HTML

<h2><div id=”heading”>ここまで来れば達人級</div></h2>

CSS

#heading{
position:relative;
margin:0 -1px;
font:bold 30px/1.6 Arial, Helvetica, sans-serif;
text-align:center;
color:#333;
background:#f0e800;
-webkit-transform: rotate(-3deg) skew(-3deg);
-moz-transform: rotate(-3deg) skew(-3deg);
-o-transform: rotate(-3deg) skew(-3deg);
-ms-transform: rotate(-3deg) skew(-3deg);
transform: rotate(-3deg) skew(-3deg);
text-shadow:1px 1px 0 rgba(255,255,255,1);
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2),
30px 0 0 0 #f0e800,
-30px 0 0 0 #f0e800;
}

No.20　ピンクのリボン

端で折り返してあるのが可愛いピンクのリボン。これも画面一杯に表示されます。HTMLコードはNo.19と同じで、CSSは、

#heading{
position:relative;
margin:0 -10px;
padding:5px;
font:normal 28px/1.6 “Times New Roman”, Times, serif;
text-align:center;
color:#ffe8e8;
background:#f99;
-webkit-transform: rotate(-3deg) skew(-3deg);
-moz-transform: rotate(-3deg) skew(-3deg);
-o-transform: rotate(-3deg) skew(-3deg);
transform: rotate(-3deg) skew(-3deg);
box-shadow:0 1px 2px 0 rgba(0,0,0,0.2);
background-image: -webkit-gradient(linear, left top, left bottom,
from( rgba(0, 0, 0, 0.0)),
color-stop(0.08, rgba(255, 255, 255, 0.5)),
color-stop(0.12, rgba(255, 255, 255, 0.5)),
color-stop(0.12, rgba(0, 0, 0, 0.0)),
color-stop(0.88, rgba(0, 0, 0, 0.0)),
color-stop(0.88, rgba(255, 255, 255, 0.5)),
color-stop(0.92, rgba(255, 255, 255, 0.5)),
color-stop(0.92, rgba(0, 0, 0, 0.0)),
to( rgba(0, 0, 0, 0.0))
);
background-image: -moz-linear-gradient(top,
transparent 8%,
rgba(255, 255, 255, 0.5) 8%,
rgba(255, 255, 255, 0.5) 12%,
transparent 12%,
transparent 88%,
rgba(255, 255, 255, 0.5) 88%,
rgba(255, 255, 255, 0.5) 92%,
transparent 92%
);
background-image: -o-linear-gradient(top,
transparent 8%,
rgba(255, 255, 255, 0.5) 8%,
rgba(255, 255, 255, 0.5) 12%,
transparent 12%,
transparent 88%,
rgba(255, 255, 255, 0.5) 88%,
rgba(255, 255, 255, 0.5) 92%,
transparent 92%
);
background-image: linear-gradient(to bottom,
transparent 8%,
rgba(255, 255, 255, 0.5) 8%,
rgba(255, 255, 255, 0.5) 12%,
transparent 12%,
transparent 88%,
rgba(255, 255, 255, 0.5) 88%,
rgba(255, 255, 255, 0.5) 92%,
transparent 92%
);
}
#heading:before{
content:” “;
position:absolute;
top:-5px;
left:0;
width:0;
height:0;
border-width:0 0 5px 10px;
border-style:solid;
border-color:transparent;
border-bottom-color:#c66;
}
#heading:after{
content:” “;
position:absolute;
top:100%;
right:0;
width:0;
height:0;
border-width:5px 10px 0 0;
border-style:solid;
border-color:transparent;
border-top-color:#c66;
}

少し長いですね。ですが、使う価値は確実にあると思います。

No.21　付箋風見出し

デザイン的には使いやすいですが、コードはとても長いです。アレンジするときは気を付けてください。

#heading{
position:relative;
margin:0 10px;
padding:0 10px 0 55px;
font:bold 22px/40px Arial, Helvetica, sans-serif;
color:#666;
background:#f3f3f3;
z-index:1;
}
#heading:before{
content:” “;
position:absolute;
top:0;
left:0;
width:40px;
height:40px;
border-right:#fff solid 2px;
background:#f60;
background-image: -webkit-gradient(linear, left top, left bottom,
from( rgba(255, 255, 255, 0.0)),
color-stop(0.20, rgba(255, 255, 255, 0.0)),
color-stop(0.20, rgba(255, 255, 255, 0.1)),
color-stop(0.40, rgba(255, 255, 255, 0.1)),
color-stop(0.40, rgba(255, 255, 255, 0.3)),
color-stop(0.60, rgba(255, 255, 255, 0.3)),
color-stop(0.60, rgba(255, 255, 255, 0.5)),
color-stop(0.80, rgba(255, 255, 255, 0.5)),
color-stop(0.80, rgba(255, 255, 255, 0.6)),
to( rgba(255, 255, 255, 0.6))
);
background-image: -webkit-linear-gradient(top,
transparent 20%,
rgba(255, 255, 255, 0.1) 20%,
rgba(255, 255, 255, 0.1) 40%,
rgba(255, 255, 255, 0.3) 40%,
rgba(255, 255, 255, 0.3) 60%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0.6) 80%,
rgba(255, 255, 255, 0.6) 100%
);
background-image: -moz-linear-gradient(top,
transparent 20%,
rgba(255, 255, 255, 0.1) 20%,
rgba(255, 255, 255, 0.1) 40%,
rgba(255, 255, 255, 0.3) 40%,
rgba(255, 255, 255, 0.3) 60%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0.6) 80%,
rgba(255, 255, 255, 0.6) 100%
);
background-image: -o-linear-gradient(top,
transparent 20%,
rgba(255, 255, 255, 0.1) 20%,
rgba(255, 255, 255, 0.1) 40%,
rgba(255, 255, 255, 0.3) 40%,
rgba(255, 255, 255, 0.3) 60%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0.6) 80%,
rgba(255, 255, 255, 0.6) 100%
);
background-image: linear-gradient(to bottom,
transparent 20%,
rgba(255, 255, 255, 0.1) 20%,
rgba(255, 255, 255, 0.1) 40%,
rgba(255, 255, 255, 0.3) 40%,
rgba(255, 255, 255, 0.3) 60%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0.6) 80%,
rgba(255, 255, 255, 0.6) 100%
);
z-index:-1;
}
#heading:after{
content:” “;
position:absolute;
top:0;
left:0;
width:40px;
height:40px;
background-image: -webkit-gradient(linear, left top, right top,
from( rgba(255, 255, 255, 0.0)),
color-stop(0.20, rgba(255, 255, 255, 0.0)),
color-stop(0.20, rgba(255, 255, 255, 0.1)),
color-stop(0.40, rgba(255, 255, 255, 0.1)),
color-stop(0.40, rgba(255, 255, 255, 0.3)),
color-stop(0.60, rgba(255, 255, 255, 0.3)),
color-stop(0.60, rgba(255, 255, 255, 0.5)),
color-stop(0.80, rgba(255, 255, 255, 0.5)),
color-stop(0.80, rgba(255, 255, 255, 0.6)),
to( rgba(255, 255, 255, 0.6))
);
background-image: -webkit-linear-gradient(left,
transparent 20%,
rgba(255, 255, 255, 0.1) 20%,
rgba(255, 255, 255, 0.1) 40%,
rgba(255, 255, 255, 0.3) 40%,
rgba(255, 255, 255, 0.3) 60%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0.6) 80%,
rgba(255, 255, 255, 0.6) 100%
);
background-image: -moz-linear-gradient(left,
transparent 20%,
rgba(255, 255, 255, 0.1) 20%,
rgba(255, 255, 255, 0.1) 40%,
rgba(255, 255, 255, 0.3) 40%,
rgba(255, 255, 255, 0.3) 60%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0.6) 80%,
rgba(255, 255, 255, 0.6) 100%
);
background-image: -o-linear-gradient(left,
transparent 20%,
rgba(255, 255, 255, 0.1) 20%,
rgba(255, 255, 255, 0.1) 40%,
rgba(255, 255, 255, 0.3) 40%,
rgba(255, 255, 255, 0.3) 60%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0.6) 80%,
rgba(255, 255, 255, 0.6) 100%
);
background-image: linear-gradient(to right,
transparent 20%,
rgba(255, 255, 255, 0.1) 20%,
rgba(255, 255, 255, 0.1) 40%,
rgba(255, 255, 255, 0.3) 40%,
rgba(255, 255, 255, 0.3) 60%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0.6) 80%,
rgba(255, 255, 255, 0.6) 100%
);
z-index:-1;
}

No.22　ソリッドな吹き出し