こんにちわ！ゆずのすけです。
今年は、暑すぎますね。
こんな日は冷たいモノが食べたくなります、皆さんはアイスクリームとソフトクリームどっち派でしょうか？
私は若干知覚過敏があるのでソフトクリームの方が食べやすくて好きですね。
さて、今回はCSSで作れる見出しを１０個まとめてみました。
コピペするだけで簡単に使えるようにしてありますので、ご活用ください。
もちろん、サンプルのコードをアレンジしてもらう事でさらに理解できると思いますので、是非チャレンジしてみてください。
シンプル系
See the Pen
eYZZLvy by yuzunosk (@yuzunosk)
on CodePen.
シンプルに下線だけを引いたモノ。特に解説はありませんがシンプルなモノが適切なことも多いです。
See the Pen
MWyyqEr by yuzunosk (@yuzunosk)
on CodePen.
下線の左端のみ色を変化させたバージョン。少しだけおしゃれしてみるとグッと良く見えますね。
See the Pen
rNeeZwd by yuzunosk (@yuzunosk)
on CodePen.
左端から少しだけ、下線を引いてみたデザインです。これでも見出しとして機能させられます。
かわいい系
See the Pen
poyyOpW by yuzunosk (@yuzunosk)
on CodePen.
付箋みたいでかわいいデザイン。たくさん並べるとノートみたいでいいかも知れないですね！
See the Pen
BaKKOxL by yuzunosk (@yuzunosk)
on CodePen.
こちらは、栞のようなデザイン。本などを参考にした記事などにいいかも知れませんね。
See the Pen
RwaaYYP by yuzunosk (@yuzunosk)
on CodePen.
文字の先頭に円を付けてみました。
おしゃれ系
See the Pen
KKzzxGy by yuzunosk (@yuzunosk)
on CodePen.
リボンを少し折込んだようなデザイン。立体感を出すとおしゃれに感じますね。
See the Pen
poyyOQa by yuzunosk (@yuzunosk)
on CodePen.
下線をグラデーションにしてみました。かなり目を引きますね。
おもしろ系
See the Pen
gOrrdqM by yuzunosk (@yuzunosk)
on CodePen.
高級感のただよう金文字。セレブ指向のサイトなんかにいいかもしれません。
See the Pen
RwaaYdr by yuzunosk (@yuzunosk)
on CodePen.
水玉模様を背景にしたデザイン。
まとめ
いかがでしたか？
今回は、見出しの色々なデザインをまとめてみました。
参考になるモノがあれば是非、使ってみてくださいね。
この記事が役に立ったなら嬉しいです。ではまた次の記事でお会いしましょう。
