見出しデザインの参考にしたい CSSで作るhタグのサンプル集
ブログの記事タイトルやサイドバーのタイトルなどで使えるオーソドックスな見出し（hタグ）のデザインサンプル集です。見出しにはCSS3や画像を使っていないのでシンプルですが、一応よく使うので、メモとしてエントリーしておきました。
※追記6/24 HTMLのマークアップをpからh3に置き換えました。
見出し(Headline)のサンプル集
色やボーダーサイズ等の装飾部分は お好みで編集してください。
見出しサンプル01
見出しサンプル02
見出しサンプル03
見出しサンプル04
見出しサンプル05
見出しサンプル06
見出しサンプル07
見出しサンプル08
見出しサンプル09
見出しサンプル10
見出しサンプル11
HTML
CSS
見出しサンプル12見出しの補足説明など
HTML
CSS
参考になる見出しサンプル集
見出しを作る時に参考にしておきたいと思ったサイトを載せておきます。
Headline Elemente mit CSS stylen
画像を使ったシンプルな見出しサンプル
BJKit(BeautifulJapaneseKit)
フォントを読み込ませて、アンチエイリアスの効いた美しい文字を表示するスクリプト
10 Examples of Beautiful CSS Typography and how they did it…
10タイプのヘッドラインのCSS
スタイルシート見出しメーカー
色を指定するだけで、複数のタイプの見出しが生成される。こういうのは嬉しいですね。
Typography for Headlines
見出しギャラリー。アイデアの宝庫です。
タグ / CSS
tigpig
いつも拝読しております。
日本語でさえ誤字脱字が多く、
うっかりした性格で、
HTMLやCSSなどの記述は、かなり苦手なので、
自動生成してくれるツールは、
とても役に立ちそうです。
CSSの勉強にもなりそうです。
これからも楽しみにしています。
2010/08/30 Mon 09:24 | URL
ran ありがとうございます
とっても役に立ちました。ありがとうございます。
2011/02/22 Tue 23:59 | URL
承認待ちコメント
このコメントは管理者の承認待ちです
2011/04/26 Tue 23:50 | URL
アリス
そのまま使わせてもらってます
ありがとうございます
2017/03/22 Wed 20:08 | URL
この記事にトラックバックする(FC2ブログユーザー)
2011/05/29 | |
-
管理人の承認後に表示されます
2011/05/29 | html超初心者のための徹底解説ブログ |
簡単にできる見出しデザイン解説
今回は簡単にできる見出しをきれいに見せるcssテクニックをやっていきます。 サンプル .sample{ font-size:18px; font-weight:bold; border-left:6px #00CCFF solid; padding:10px; margin-top:10px; } 良く見かけるデザインですね。シンプルでおすすめ。 サンプル .sampl...
2012/02/17 | 山といえば川 |
見出しと引用のCSSカスタマイズ
BloggerからFC2に引っ越してきて２週間。 見出しと引用の見栄えをどうしても良くしたくて、CSSのカスタマイズを思い立ちました。 FC2ブログに『公式カスタマイズマニュアル』があるので、チェックして...