KuzLog

KuzLog
2017/01/23 2018/01/13 Web制作

コピペで簡単!見出しの装飾に使えるCSSを16個作っといた

ブログのデザインをいじっていると、地味に悩むのが見出しの装飾。派手すぎるのはダサいですが、何も装飾しないのも味気ないですよね。

今回は、画像を使わずにCSSのみですぐに実装できる見出しの装飾パターンを16個紹介します。作るの大変だった。

一応コピペでもすぐに使えるとは思いますが、色やサイズ、余白などは自分のブログに合わせて変更してほうがいいです。あとベンダープレフィックスは付けていないので、古いブラウザにも対応させたいなら各自で対応してください。

あと、それぞれ表示サンプルも作ったんですが、h要素を使いまくるとアレなのでp要素を使っています。色は#333でフォントサイズは22px、ウェイトはノーマルです。ここらへんもお好みで変えちゃってください。

下にボーダー

Dummy text

左にボーダー

Dummy text

左と下にボーダー

Dummy text

背景色

Dummy text

背景色+左にボーダー

Dummy text

角丸

Dummy text

Dummy text

めくれ効果

Dummy text

リボン

Dummy text

吹き出し

Dummy text

ストライプ

Dummy text

グラデーション

Dummy text

1文字目を大きく

Dummy text

左右にグラデーションボーダー

Dummy text

四角2つ

Dummy text

丸2つ

Dummy text


本当はもう少し紹介するつもりだったんですが、この記事書くのめっっっちゃ時間掛かったのでギブアップ…気が向いたらもっと追加するかもしれませんが、とりあえず紹介は以上です。
てかこれ以上凝ったものを作るとなると、画像使ったほうが早いし楽なんだよね。