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

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

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

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

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

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

photo by Andrew Mason

スポンサーリンク
レクタングル(大)広告

見出しジェネレーター

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

CSS見出しジェネレーター

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

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

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

見出しメーカー

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

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

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

見出しサンプル集

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

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

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

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

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

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

見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応)  賢威カスタマイズ研究所

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

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

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

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

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

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

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

デザインサンプルで学ぶCSSによるスタイリング~「見出し」編 (1-4):CodeZine

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

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

CSS でかっこいい h タグ

CSS でかっこいい h タグをつくろう  ショップハンター - 楽天ブログ

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

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

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

第6回 CSS3で作るWebパーツ  Think IT(シンクイット)

第6回 CSS3で作るWebパーツ

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

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

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

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

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

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

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

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

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

見出しの装飾4つ

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

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

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

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

CSSで作る見出しデザイン  Web’Notes

CSSで作る見出しデザイン

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

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

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

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

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

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

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

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

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

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

見出しデザインの参考にしたい CSSで作るhタグのサンプル集  日刊ウェブログ式

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

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

CSSで作る見出しサンプル

[CSSデザインの基本] H(見出し)の作り方  ty's empty flog  田中勇輔

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

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

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

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

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

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

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

【CSS3のみでの見出し】サンプル集からの抜粋 (吹出し - リボン)  こう@My-Note

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

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

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

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

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

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

画像不要の見出し

画像いらず!CSS3で作るおしゃれな見出しデザイン  Web制作会社スタイル

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

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

見出しサンプル21個

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

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

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

見出しサンプル16個

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

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

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

見出しサンプル11個

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

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

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

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

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

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

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

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

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

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

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

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

タイトルテンプレート(CSS版) - ネットマニア

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

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

見出しサンプル4つ

少し凝った見出し(左揃え) - スタイルシート・サンプル

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

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

アレっぽい見出し

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

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

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

デザインサンプル

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

見出しデザイン.com

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

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

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

カテゴリごとに見出しを閲覧

Croppy

見出し  Croppy

見出し | Croppy

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

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

見出しのブブンデザイン|Webデザインの“ブブン”を集めたブブンデザインアーカイブ 公式サイト

見出しのブブンデザイン

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

Elements of Design

Typography for Headlines Design Gallery  Elements of Design

Typography for Headlines Design Gallery | Elements of Design

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

まとめ

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

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

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

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

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

  1. 名前:ji 投稿日:2015/07/04(土) 22:28:54 ID:7bb671be9

    サンプルを出されただけでは具体的にどういじればいいか分からん

    こんなんそこらの情報をまとめただけや

  2. わいひら 名前:わいひら 投稿日:2015/07/04(土) 23:59:46 ID:6a0e82304

    タイトルにも書いてある通り、この記事はまとめ記事ですよ。
    CSSは、運営しているサイトによって、書き方も変わるので、全てのケースに対応した記事を書くのは不可能です。
    サンプルを参考に、自分のサイトにあった書き方に修正するのは運営者でないとできません。
    この記事は、CSSの書き方がわかっている方のためにサンプルをまとめたものです。

    やり方がわからない場合は、まずCSSの基本を憶えた方が良いかと思います。
    CSSの基本-HTMLクイックリファレンス
    でも、基本的な設定ならとても簡単なものなので、初心者の方でも勘の良い方ならすぐに自分のサイトに使用できておられるようです。