見出しデザインのアイディアってこれでもかっていうくらいありますよね。
今日はそんな見出しデザインをしてくれてるサイトを集めました。
シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選
- 手書き風の見出しデザイン[01]
- サブタイトルを上部に表示する見出しデザイン[02]
- 内側にシャドウを入れた見出しデザイン[03]
- リボン風の見出しデザイン[04]
- すごくリボン風の見出しデザイン[05]
- サブタイトルを枠の上に表示する見出しデザイン[06]
- マーカー風の見出しデザイン[07]
- 消えていくボーダーを表示する見出しデザイン[08]
- 外にはみ出すボーダーの見出しデザイン[09]
- 内側にボーダーがある見出しデザイン[10]
- 文字にボーダーを加えた見出しデザイン[11]
- 右側にサブタイトルを表示する見出しデザイン[12]
- 文字の下だけボーダーカラーを変更する見出しデザイン[13]
- 様々な要素を組み合わせた見出しデザイン[14]
- グラデーションと内線を加えた見出しデザイン[15]
- マーク付きの見出しデザイン[16]
- ボックス風の見出しデザイン[17]
- 最初の文字だけ加工する見出しデザイン[18]
- グラデーションボーダーの見出しデザイン[19]
- グラデーションテキストの見出しデザイン[20]
【コピペで簡単】タイトル（見出し）CSSテンプレート 15選
- 1．下線
- 2．点線
- 3．上下線
- 4．背景枠
- 5．影付きボックス
- 6．グラデーション
- 7．先頭文字を大きく
- 8．左線
- 9．バイカラー下線
- 10．マーク
- 11．ドッグイヤー
- 12．ストライプ
- 13．点線で囲う
- 14．中間線
- 15．サブタイトル付き
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
- 下線付き
- 点線＋色を変える
- 二重線
- 上下に線
- 単純な背景色をつける
- 全体を線で囲む
- 背景色＋下線
- 左線
- 左に線＋塗り
- 立体感のあるバー
- シンプルなボックスシャドウ
- タグ風
- 吹き出し
- ステッチ風
- ステッチを白に
- 角がぺろっと剥がれるデザイン
- 帯（リボン）風
- 蛍光マーカー風
- 途中で色の変わる線
- 色を変えてみた場合
- 線先に矢印
- 先端が尖ったようなバー
- 両先端を尖らせた場合
- 背景をストライプで塗る
- 左に縦線が入ったバージョン
- ストライプ＋上下線
- ストライプの下線
- ストライプの吹き出し
- 両端に線を伸ばす
- 二重線バージョン
- 下側に小さく線をつける
- スラッシュで囲む
- 交差線
- 角がくるん
- 葉っぱ風
- 細カギカッコ
- 大括弧
- 点線バージョン大カッコ
- 立体的なボックス
- 一文字目だけ装飾を変える
- 消えていく下線
- 段々と色が変わっていくパターン
- 背景をグラデーションで塗る
- 影をつけてみた場合
- 上下のグラデーション
- 文字の反射
- シンプルなチェックマーク
- おしゃれなシェブロンマーク
- HTMLタグ風
- ふきだしアイコン
- フラットな見出し
- コードアイコンのマーカー
- タブ付き
- タブ付きその2
- 先頭にアイコンをつける例
- ひらめき
- 円にアイコンを入れてバーをつける
- 円のまわりに影を付けた場合
- さらに立体的にしてみた場合
- 点滅するカーソル
- 背景色＋角丸
- シンプルな円マーク
- 考えごと風
- 肉球マーカー
- 背景にカラフルな円
- ステッチ模様をつけた場合
- 先頭につけた場合
- 文字の背景を塗った場合
コメント