少しの労力でサイトをかっこよく！見出しのCSSデザインに役立つジェネレーター＆サンプル集30個まとめ

昨日は、グローバルナビメニューについて書きましたが、今日はH見出しのサンプル集です。

ナビメニューと違って、見出しは比較的簡単にCSS設定ができてしまいます。

ただ、簡単に設定できることと良いデザインになることはまた別の話です。僕のような素人は、現在進行形で、さんざん悩んで自分で考えた結果、酷いデザインになることも結構あります。

そんなことがないように、今回は、素晴らしい見出しデザインのサンプルとなるようなページをまとめてみました。

CSSの書き方がわからない場合は、以下などを参照してください。

photo by Andrew Mason

見出しジェネレーター

外観や色を選んでCSSを生成するジェネレータータイプ。

CSS見出しジェネレーター

CSS見出し-ジェネレーター | WEB道

吹き出しやリボン、背景色、ボーダー色、文字色、影、ぼかしなどを選択して見出し用のCSSを生成するジェネレータ。

見出しメーカー

好きな色でCSS見出しが作れます | スタイルシート見出しメーカー

好きな色を選んでボタンを押すだけでシンプルな見出しが作れる見出しメーカー。

見出しサンプル集

見出しデザインと、HTML・CSSがセットになったデモサンプル集。

CSS見出しデザインのアイデア9個

H1一つでここまで出来るCSS見出しデザインのアイデア9個

切り取り線、テープ、リボン、吹き出し、アメリカンな吹き出し、付箋、メタルプレート、モザイク、旗、のような見出しをCSSのみで実現しています。ポイント解説などもあってわかりやすいです。

CSSのみでカスタマイズする見出しデザイン17個

見出しのデザインをCSSのみでカスタマイズする（一部CSS3対応）

シンプルなものから、かなり凝ったものまである、見出しデザインのサンプル集です。

擬似要素を使った立体的な見出し

アクセントに使えるCSSのborderと擬似要素を使った立体的な見出しデザイン

CSSのみで立体的な見出しデザインをする方法です。ポイント解説もあってわかりやすいです。

シンプルな見出しデザインサンプル50個

シンプルなHTMLとCSSコピペで実装できるタイトルのデザインサンプル 50

非常にシンプルな見出しのサンプルが50個紹介してあります。

なんだかんだで、シンプルなデザインは、見やすいですし、飽きがきづらいです。

CSSによるスタイリング見出し

デザインサンプルで学ぶCSSによるスタイリング～「見出し」編

ボーダーや背景、擬似要素を使ってCSSで見出しをスタイリングする方法。詳しい解説付きです。

CSS でかっこいい h タグ

CSS でかっこいい h タグをつくろう

フラット系、立体系、インパクト系、ペーパー型、フィルム系、吹き出し系、真鍮ボタン、セロファンリボン、ピンどめリボンタイプの見出しサンプルが豊富です。

グラデーションの見出し4つ

第6回 CSS3で作るWebパーツ

縦横斜めの、グラデーションを用いた見出しのサンプル。

〇〇っぽい表現ができる「CSS3」サンプル集

●●っぽい表現ができる「CSS3」サンプル集

「○○っぽい見出し」をテーマにしたサンプル集。高級フレンチメニューっぽい、リボンっぽい、映画のタイトルっぽい、ネオンきらめく繁華街っぽい、ロングシャドウっぽいなど、一風変わった見出しがあります。

先頭に四角形が入った見出しのデザイン6つ

【CSS】先頭に四角形が入った見出しのデザインを真似してみました

大手サイトを参考に、先頭に四角形のワンポイントが入った見出しのサンプル集。

見出しの装飾4つ

Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える

グラデーションや英語同時表記サンプルなどがあります。

CSSで作る見出しデザイン10個

CSSで作る見出しデザイン

CSSのみで見出し手前にワンポイントマークが入ったサンプルが豊富です。

擬似要素を使ったシンプルな見出し8つ

CSSの擬似要素を使った見出しデザイン

CSSの「:before」や「:after」など擬似要素を使ったシンプルな見出し。

コピペで出来るCSS3で見出し9つ

コピペで出来るCSS3で見出しスタイリング

塗りつぶしタイプの見出し。影、グラデーション、リボン、吹き出しタイプもあります。

CSSで作るhタグのサンプル12個

見出しデザインの参考にしたい CSSで作るhタグのサンプル集

オーソドックスな見出しサンプル。

CSSで作る見出しサンプル

[CSSデザインの基本] H(見出し)の作り方

ボーダーと背景色を使ったシンプルなものから、説明付き見出し、画像使ったサンプルもあります。

見出し要素をスタイルするテクニック4つ

[CSS]見出し要素をシンプルなHTMLで美しくスタイルするテクニックのまとめ

白色系のサイトに合いそうな見出しデザイン。

見出しサンプル集からの抜粋18個

【CSS3のみでの見出し】サンプル集からの抜粋 (吹出し / リボン)

いろいろなタイプのサンプルを見ることができます。

CSS の border プロパティを使って見出し

CSS の border プロパティを使って見出しを装飾しよう

ボーダーを使ったカラフルな見出し集です。有名サイトの見出しサンプルなどもあります。

画像不要の見出し

画像いらず！CSS3で作るおしゃれな見出しデザイン

リボン、吹き出し、ボックスなど。

見出しサンプル21個

デザインに役立つCSSで作成する見出しタグのサンプル集

ボーダー、背景色、グラデーション、ワンポイント、説明文つき、画像背景の見出しがあります。

見出しサンプル16個

CSSで作る見出し(hタグ)サンプルデザイン

実用的な見出しサンプル。

見出しサンプル11個

スタイルシートで見出しを設定する

シンプルな見出しサンプル集。

CSSだけでカッコよく作る見出しデザイン9つ

CSSだけでカッコよく作る見出し（hタグ）デザイン(サンプル付き)

見出しサンプルで一覧で見れます。

画像を用いた見出しサンプル

見出し用画像 | WEBデザイナーが作った超シンプル素材集

画像を用いたカラフルな見出しサンプル。

タイトルテンプレート(CSS版)

タイトルテンプレート(CSS版)

付箋タイプのシンプルなデザイン。

見出しサンプル4つ

少し凝った見出し（左揃え） – スタイルシート・サンプル

CSSのプロパティーに関するコメント付き。

アレっぽい見出し

[CSS]GoodDesign賞にノミネートされて落選すること間違い無しのすごくアレっぽい見出しスタイルを作成した

もう完全にアレ。アダルトサイトには良いかも。

デザインサンプル

ソースコードは不要で、見た目さえわかれば、CSSが書ける、もしくは開発ツールなどでソースコードを検証できるという人向け。デザイン参考に。

見出しデザイン.com

見出しデザイン.com -Webデザインの“見出し”を集めたサイト-

見出しデザインばかりを集めたサイト。カテゴリごとに見出しを閲覧することができます。

Croppy

見出し | Croppy

見出しデザインのスクラップ。

ブブンデザインアーカイブ

見出しのブブンデザイン

見出し部分のデザインたくさん。

Elements of Design

Typography for Headlines Design Gallery | Elements of Design

こちらは海外サイトです。日本では見かけないタイプのデザインが豊富です。

まとめ

これらのページを参考に、手軽に見出しのカスタマイズが行えます。

自分のサイトに合いそうな見出しを探して、調節すれば良いだけなので、これまで悩んでいた時間などを短縮できます。

もちろん、WEBデザインをする人にとって、自分でいろいろ考える時間も大事ではあると思います。

ただ、「デザインが苦手だけどカスタマイズしたい」、「悩む時間がないけどカスタマイズしたい」なんて場合には、ちょうど良いかもしれません。