お客様と共に創り、育て、稼ぐホームページ制作
WithStyle(ウィズスタイル)

CSSだけで作れる見出しのサンプル集まとめ

2015年10月22日
nonaka
未分類
にほんブログ村 デザインブログ Webデザインへ
CSSだけで作れる見出しのサンプル集まとめ

今回は、hタグ見出しデザインを考えるときに参考になるサンプル集をまとめました。

見出しってCSSで簡単に設定できますが、ゼロからデザインを考えるとなるとなかなか悩ましいものです。サイトのデザインにあった素晴らしい見出しデザインが出来るように、日々お勉強です。ブックマークしてあった順にまとめています。

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

シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル

FireShot Capture 115 - シンプルなHTMLとCSSコピペで実_ - http___www.nxworld.net_tips_50-css-heading-styling.html
シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル

全50種類!シンプルですが、使いやすいし色がいい感じです。counter-incrementを使って見出し横にカウントが表示されるようにする方法や、立体的なダサくないドッグイヤーはいいですよね。あの商品的な見出し、いつか使いたい。

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

FireShot Capture 110 - 見出しのデザインをCSSのみでカス_ - http___www.keni-customize.net_custom-midashi-design-555_
見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応)

シンプルめですが、17パターンあります。確かに、ブログの見出しとかって、定期的に変えるとイメージが変わっていいですよね。

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

FireShot Capture 109 - ブログ用見出しテンプレート[インパクト系] I ショップ_ - http___plaza.rakuten.co.jp_shophunter_009009_
CSS でかっこいい h タグをつくろう

見出しサンプルが豊富。ピン止めリボンとか、セロファン、真鍮ボタンなどなどあります。斜めの見出し楽しいですよね。

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

FireShot Capture 108 - コピペで出来るCSS3で見出しスタイリ_ - http___blog.3streamer.net_html5-css3_css3-styling-231_
コピペで出来るCSS3で見出しスタイリング

オーソドックスなリボンやふきだしなど。

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

FireShot Capture 111 - 【CSS3のみでの見出し】サンプル集からの抜粋 (吹出し _ リボン_ - http___st.s44.me_2013_11_20_my-note_636
【CSS3のみでの見出し】サンプル集からの抜粋 (吹出し / リボン)

二段見出し!面白いですよね。補足説明の小さい見出しが一緒につくっていう。

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

FireShot Capture 112 - H1一つでここまで出来るCSS_ - http___squeeze.jp_blog_web-design_heading-design-css-only_
H1一つでここまで出来るCSS見出しデザインのアイデア9個

CSSの「border」や「box-shadow」「transform」「linear-gradient」、擬似要素の「:before」や「:after」を使った見出しデザインが紹介されています。説明が丁寧。あと、ヘッダーが可愛いですね。

見出しhタグをCSS(スタイルシート)でデザインする方法

FireShot Capture 114 - 見出しhタグをCSS(スタイルシート)でデザインする方法 I ポ_ - http___pointsite-net.info_css-design-tag_
見出しhタグをCSS(スタイルシート)でデザインする方法

CSS3で作るグラデーションの見出し

FireShot Capture 116 - 第6回 CSS3で作るWebパーツ I Think IT(シン_ - http___thinkit.co.jp_story_2011_11_16_2298
CSS3で作るグラデーションの見出し
グラデーションの見出しタグって、たまに使いたくなります。

終わりに

諸先輩方から学んで、自分でいろいろと出来るようになってみましょう。
時間がない時はこちら。
FireShot Capture 117 - 好きな色でCSS見出しが作れます I スタイルシート見出しメーカー - http___midashi-maker.v-colors.com_
スタイルシート見出しメーカー

好きな色でシンプルなスタイルシートの見出しを作成するときに便利。自動でHTMLとCSSを作ってくれます。かんたんなやつでいいんだよ。という時もありますね。

にほんブログ村 デザインブログ Webデザインへ
トップページへのバナー
この記事を書いた人
nonaka

福岡県出身、沖縄育ち。デザイン担当をやっています。