creatersnest

ぜひ参考にしたい!CSSで作られた見出しアイデア40選


見出しはデザインの印象を決める大事な要素の一つです。
筆者はお洒落、カッコイイデザインの見出しを見ると、
「このサイトやるな…」と思ってしまいます!
そこで今日はcssのみを使って作成した見出しアイディアを紹介します。

 

チェックマークを付けた見出し

サンプル
http://webnonotes.com/css/heading_sample/
チェックマークをポイントにした見出しです。

 

矢印マークを付けた見出し

サンプルhttp://webnonotes.com/css/heading_sample/
矢印を使った見出しです。画像は使用していません。

 

円を重ね合わせた見出し

サンプルhttp://webnonotes.com/css/heading_sample/
こちらも画像は使用せず、擬似要素で表現しています。

タイトルに下線を加えた見出し

サンプルhttp://webnonotes.com/css/heading_sample/
太めの下線を加えるとより見出しっぽくなります。

 

四角を重ね合わせた見出し

サンプル
http://kinomemo.info/create/1839/
四角い要素のワンポイントを入れた見出しです。
画像を使用せずbeforeとafterで作成しています。

 

四角をワンポイントに加えた見出し

サンプル
http://www.keni-customize.net/custom-midashi-design-555/

こちらも画像を使用せずbeforeとafterで作成しています。

 

丸をワンポイントに加えた見出しver.1

サンプル

http://weboook.blog22.fc2.com/blog-entry-348.html
擬似要素を使えば丸を重ねることもできます。

 

丸をワンポイントに加えた見出しver.2

サンプル

http://weboook.blog22.fc2.com/blog-entry-348.html
丸でくり抜いたようなデザインになっています。

 

グラデーションを使った見出しver.1

サンプルhttp://thinkit.co.jp/story/2011/11/16/2298
グラデーションだけでカッコイイ見出しが作れてしまいます。

 

グラデーションを使った見出しver.2

サンプル

http://blog.zius.jp/wordpress/124/
こちらもグラデーションのみです。
グラデーション次第でド派手にもシンプルにも調整できます。

 

タイトルの両脇に記号を配置した見出し

サンプル

http://www.find-job.net/startup/css3-sample
細いフォントに使用すると高級感があるように見えます。

 

影を使った見出しver.1

サンプル
http://www.find-job.net/startup/css3-sample
シャドウのみですがインパクトのある見出しです。
太文字に使用すると力強さを表現できます。

 

影を使った見出しver.2

サンプル

http://blog.zius.jp/wordpress/124/
シンプルですがシャドウを使うだけでかなり見出しっぽくなります。
見易やの調整を意識して使うように心がけましょう。

 

ネオンのような見出し

サンプル

http://www.find-job.net/startup/css3-sample
シャドウを使ってネオンを表現しています。
文字だけでかなりのインパクトがあります。

 

ロングシャドウちっくな見出し

サンプル

http://www.find-job.net/startup/css3-sample
フラットデザインでアクセントに使えそうなデザインです。

 

切り取り線の見出し

サンプル
http://squeeze.jp/blog/web-design/heading-design-css-only/
紙を切り取ったようなデザインをドット線で表現しています。

 

テープの見出し

サンプル
http://squeeze.jp/blog/web-design/heading-design-css-only/
まるでテープを貼ったようなタイプの見出しです。
真っ直ぐするよりも少し斜めにするほうがよりテープっぽい感じがでます。

 

リボンの見出しver.1

サンプル
http://squeeze.jp/blog/web-design/heading-design-border-css/
要素にリボンが巻きついているような見出しです。

 

リボンの見出しver.2

サンプル
http://squeeze.jp/blog/web-design/heading-design-css-only/
ver.1に傾きを加えたデザインです。よりリボンっぽく見えます。

 

リボンの見出しver.3

サンプル
http://coliss.com/articles/build-websites/operation/css/css-single-element-pure-css3-double-fold-ribbon.html
上記のver.1とはまた違ったリボンタイプの見出しです。
可愛らしい感じのサイトにはぴったりだと思います。

 

リボンの見出しver.4

サンプル

http://squeeze.jp/blog/web-design/heading-design-border-css/
リボンの右側が切りっぱなしのようなデザインになっています。

 

リボンアレンジの見出しver.1

サンプル
http://plaza.rakuten.co.jp/shophunter/011003/
リボンの上部を斗出させた感じのアレンジです。
半透明ににするところがポイントです。

 

リボンアレンジの見出しver.2

サンプル

http://plaza.rakuten.co.jp/shophunter/011003/
こちらは上記のver.1をタイトルの背後に回したバージョンです。
ピンで留められているようなデザインになっています。

 

インデックス型の見出し

サンプル

http://squeeze.jp/blog/web-design/heading-design-border-css/
リボンとは違う面白さがあって活用できそうです。

 

吹き出し型の見出しver.1
サンプル

http://squeeze.jp/blog/web-design/heading-design-css-only/
吹き出しタイプの見出しです。
ボックスシャドウを入れることで、少しアメコミちっくな感じがします。

 

吹き出し型の見出しver.2
サンプル

http://st.s44.me/2013/11/20/my-note/636
シャドウを使って凹みを表現しています。

 

吹き出し型の見出しver.3

サンプル
http://squeeze.jp/blog/web-design/heading-design-css-only/
上部と下部のみ区切り線を入れた吹き出しデザインです。

 

メタルっぽい見出し

サンプル

http://squeeze.jp/blog/web-design/heading-design-css-only/
灰色のグラデージョンで無機質な感じのする見出しです。
色のアレンジで、ゴールドなんかも挑戦できそうです。

 

モザイクタイプの見出し

サンプル

http://squeeze.jp/blog/web-design/heading-design-css-only/

モザイクもグラデーションで作成できてしまいます。

 

旗の見出し

サンプル
http://squeeze.jp/blog/web-design/heading-design-css-only/
旗を表現した見出しです。
画像は一切使用せず、beforeとafterで表現しています。

 

付箋っぽい見出し

サンプル
http://squeeze.jp/blog/web-design/heading-design-css-only/
紙を折り曲げたような雰囲気のする見出しです。

 

フィルムっぽい見出し

サンプル
http://plaza.rakuten.co.jp/shophunter/011003/
映画のフィルムを表現した見出しになります。

 

フェルト生地っぽい見出し

サンプル

http://blog.zius.jp/wordpress/124/
フェルト生地っぽい温かみのあるデザインです。

 

ネイルファイル型の見出し

サンプル
http://plaza.rakuten.co.jp/shophunter/011003/
左右違う角度で角を丸くしています。

 

文字を傾けるタイプの見出しver.1

サンプル
http://plaza.rakuten.co.jp/shophunter/011003/
文字の傾きもcssで表現することができます。

 

文字を傾けるタイプの見出しver.2

サンプル
http://plaza.rakuten.co.jp/shophunter/011003/
ver.1とは違って右下がりになっているタイプです。

 

箱型の見出しver.1

サンプル

http://squeeze.jp/blog/web-design/heading-design-border-css/
前に飛び出しているような立体感を表現しています。

 

箱型の見出しver.2

サンプル

http://squeeze.jp/blog/web-design/heading-design-border-css/
こちらはver.1の上部を無くしてみえるデザインです。

 

矢印型の見出し


サンプル

http://squeeze.jp/blog/web-design/heading-design-border-css/

矢印をモチーフにした見出しです。
右側から飛び出してきたような躍動感があります。

 

グラデーションラインを使った見出し


サンプル

http://qiita.com/aktuehr/items/0a92a28269116701ded7
グラデーションを重ねて線が消えるようなデザインになっています。

 

まとめ

如何だったでしょうか。
画像を使用せず、cssだけでここまで表現することができます。
cssだと色の調整や文字の大きさなどすぐに調整できて便利ですね。
みなさんもお洒落でカッコイイ見出しを作成してみてください!

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Article人物の切り抜きをPhotoshopでするときに使えるテクニックまとめ