creatersnest

CSSのみで実装された今風のh1デザイン30選


余分なdivやspanは不要!
今回はhtmlのh1要素だけで、cssのグラデーション、
ボックスシャドウ、擬似要素を使った見出しアイデアをご紹介します。
cssを使ってどんどんかっこいい見出しを作成しちゃいましょう!

 

切り取り線タイプの見出し

サンプル
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-css-only/

要素にリボンが巻きついているような見出しです。

 

リボンタイプの見出しver.2

サンプルhttp://coliss.com/articles/build-websites/operation/css/css-single-element-pure-css3-double-fold-ribbon.html

上記のver.1とはまた違ったリボンタイプの見出しです。
可愛らしい感じのサイトにはぴったりだと思います。

 

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

サンプルhttp://plaza.rakuten.co.jp/shophunter/011003/

短いリボンをピンで留めたようなデザインです。

 

 

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

サンプル
http://plaza.rakuten.co.jp/shophunter/011003/

上記のリボンアレンジの上部を斗出させた感じのアレンジです。
リボンを半透明ににするところがポイントです。

 

リボンアレンジタイプの見出しver.3

サンプル
http://plaza.rakuten.co.jp/shophunter/011003/

こちらは上記のver.2をタイトルの背後に回したバージョンです。
ピンで留められているようなデザインになっています。

 

吹き出しタイプの見出しver.1

サンプル
http://squeeze.jp/blog/web-design/heading-design-css-only/

吹き出しタイプの見出しです。
ボックスシャドウを入れることで、少しアメコミちっくな感じがします。

 

吹き出しタイプの見出しver.2

サンプル
http://plaza.rakuten.co.jp/shophunter/011003/

ver.1の吹き出し口が逆になっています。
位置も自由にcssで変えれるので便利です。

 

吹き出しタイプの見出しver.3

サンプル
http://squeeze.jp/blog/web-design/heading-design-css-only/

上部と下部のみ区切り線を入れた吹き出しデザインです。

 

付箋タイプの見出しver.1

サンプル
http://squeeze.jp/blog/web-design/heading-design-css-only/

紙を折り曲げたような雰囲気のする見出しです。

 

付箋タイプの見出しver.2

サンプル
http://plaza.rakuten.co.jp/shophunter/011003/

付箋が何枚も積み重なったような感じのデザインです。

 

メタルタイプの見出し

サンプル
http://squeeze.jp/blog/web-design/heading-design-css-only/

灰色のグラデージョンで無機質な感じのする見出しです。
色のアレンジで、ゴールドなんかも挑戦できそうです。

 

モザイクタイプの見出しver.1

サンプル
http://squeeze.jp/blog/web-design/heading-design-css-only/

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

 

モザイクタイプの見出しver.2

サンプル
http://www.keni-customize.net/custom-midashi-design-555/
上記のver.2を少しアレンジしたバーションです。

 

旗タイプの見出し

サンプル
http://squeeze.jp/blog/web-design/heading-design-css-only/

旗を表現した見出しです。
画像は一切使用せず、beforeとafterで表現しています。

 

シンプルな2重線タイプの見出し

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

シンプルに上下に2重線を入れただけの見出しです。

 

ワンポイント入りの見出しver.1

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

四角い要素のワンポイントを入れた見出しです。
画像を使用せずbeforeとafterで作成しています。

 

ワンポイント入りの見出しver.2

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

ver.1とは違う四角い要素のワンポイントを入れた見出しです。
こちらも画像未使用です。

 

文字エフェクトとサイドバーを使った見出し

サンプル
http://plaza.rakuten.co.jp/shophunter/011003/

シャドウを使うことで立体的に見せることができます。

 

文字エフェクトとシャドウボックスを使った見出し

サンプル
http://plaza.rakuten.co.jp/shophunter/011003/

こちらもシャドウを使うことで立体的に見せることができます。
シャドウを少し工夫して
炎のようなエフェクトに挑戦してみても面白いかもしれません。

 

文字エフェクトとラウンドボックスを使った見出し

サンプル
http://plaza.rakuten.co.jp/shophunter/011003/

ネイルファイルタイプの見出し

サンプル
http://plaza.rakuten.co.jp/shophunter/011003/

左右違う角度で角を丸くしています。

 

フェルトぬいとりタイプの見出し

サンプル
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とは違って右下がりになっているタイプです。

 

ペーパータイプの見出し

サンプルhttp://plaza.rakuten.co.jp/shophunter/011003/

白を重ねることで紙っぽい雰囲気を表現しています。

 

フィルムタイプの見出し

サンプル
http://plaza.rakuten.co.jp/shophunter/011003/

フィルムを表現した見出しになります。

 

説明付きタイプの見出し

サンプル
http://tanaka-yusuke.com/2012/css_headline

シンプルですが、説明を追加できるので便利そうです。

 

真鍮ボタン付きの見出し

サンプル
http://plaza.rakuten.co.jp/shophunter/011003/

枠に真鍮ボタンを追加するだけでポイントになります。

 

まとめ

如何だったでしょうか。
画像を使用せずcssだけでここまで表現することができます。

 

ご紹介した中にはh1だけではなく、
h2やh3でサンプルコードが書かれてあるものもありますが、
フォントサイズの調整などでどのhタグにも使用可能です。

cssだと気軽に色やサイズ調整できるのも嬉しいですね!

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

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

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


Next Article【初心者向け】リセットCSSが必要なのはなぜか?どうやって使うのか?