Webサイト制作で使用した装飾パーツ

本日は、Webサイト制作で使用した装飾パーツについてまとめます。

今回は、CSSで平行四辺形のパーツを作成しました。

まず、要素自体に `transform: skewX()` を指定することで、通常の四角形を斜めに変形させ、平行四辺形の形を作りました。

ただし、そのままだと中の文字まで斜めになってしまうため、内側のテキストには逆方向の `skewX()` をかけて、文字が読みやすいように調整しています。

さらに、右上と左下には `::before` や `::after` の擬似要素を使って、小さな三角形の装飾を追加することで作りたい六角形を完成させることができました。

擬似要素を使うことで、HTML側に余計なタグを増やさずに、CSSだけでデザイン性のあるパーツを作ることができます。

今回のような小さな装飾でも、サイト全体の雰囲気に合わせて形や色を調整することで、デザインの統一感を出しやすくなります。

CSSだけで図形を作れるようになると、画像に頼らずに細かい装飾を表現できるので、今後の制作でも活用していきたいと思います。