midashi01

Date: 2019/01/06

コピペで使える!CSSとHTMLだけで作るシンプルな見出し12個

こんにちは!新年明けましておめでとうございます。 ANDSPACE コーダーの足立です。

見出し一つでサイトの印象はガラリと変わります。
今回はCSSとHTMLのみを使った、HTML・CSS初心者でもコピペで使用できる見出しデザインを掲載していきたいと思います。

共通スタイル

全ての見出しで使用しているスタイルです。
フォントのサイズ、上下の余白感じはこれを調整してください

1.アンダーライン

見出しデザイン

HTML css

2.アンダーライン(点線)

見出しデザイン

HTML css

3.アンダーライン(グラデーション)

見出しデザイン

HTML css

4.上下線

見出しデザイン

HTML css

5.縦ライン

見出しデザイン

HTML css

5.マーカー

見出しデザイン

HTML css

6.四角

見出しデザイン

HTML css

7.ひし形

見出しデザイン

HTML css

8.丸

見出しデザイン

HTML css

8.罫線

見出しデザイン

HTML css

9.背景色

見出しデザイン

HTML css

10.吹き出し

見出しデザイン

HTML css

11.吹き出し2

見出しデザイン

HTML css

12.中央線

見出しデザイン

HTML css

いかがでしたでしょうか?
短めのCSSでも、いろいろな見出しを作ることができます。今回ご紹介した見出しは、全てCSSとHTMLのみで再現できます。
慣れてきた方は一度自分でオリジナルの見出しを作ったりしてみてはいかがでしょうか。
以上、実家から帰ってきて早速飼い猫が恋しい足立でした。

足立

この記事を書いた人

2017年に成人したてながら、家族を支える鳥取出身の家族大好き娘。なんとなくふんわりと情報系の仕事に興味があった為、デザイン専門学校にてWebデザインを専攻する。講師の谷川から、真面目ぶりが買われてスカウトされ、インターンを経験後、入社を決める。コミュニケーションに対する苦手意識はあるものの、コーディング作業は楽しく、学べる事を嬉しく思っている。実家を離れてからは、趣味のTRPGを思う存分堪能している。