CSSで出来る!LP制作で使えそうな装飾系パーツ

こんにちは!フロントエンドエンジニアの市川です。
LPサイトのデザインって、吹き出しや見出しのあしらいなど、細かい装飾系のパーツが多いですよね。
ですが、これらのパーツを画像にしてしまうと、サイトが重くなったり、更新性も悪くなります…。
できればCSSでなんとかしたいものです!
今回は、LP制作で使えそうな装飾パーツを、CSSのみで作る方法をご紹介したいと思います。

目次

見出し

リボン

  • 強調したい見出しに。

縁取り文字

  • 強調したい見出しや、セクションの見出しに。

角括弧ボックス

  • セクションの見出しに。

じゃじゃーん

  • 強調したい文章に。(「じゃじゃーん」は私が勝手に命名しました。笑 )

その他

丸いタグ

  • ランキングやステップ、目立たせたい補足情報に。

吹き出しボックス

  • お客様の声やQAに。

おわりに

いかがでしたでしょうか。
もし気に入ったパーツがありましたら、コピペしてご自由にお使いください!
今回は以上になります。最後までお読み頂きありがとうございました!

この記事を書いた人 ichikawa 2014年新卒入社のフロントエンドエンジニア。CSSが得意です。
TOP