すべてのカテゴリ

本日は、Web制作でカードデザインに使用するリボン装飾をCSSだけで作成しました。一見シンプルなデザインですが、実際に作ってみると「こんな表現もCSSだけでできるんだ！」という発見がたくさんありました。---リボン本体を作るまずは長方形のリボン本体を作成しました。```css.reason-ribbon {  position: absolute;  top: -2px;  left: 12px;  width: 24px;  height: 30px;  background: var(--gold);}```カードの左上に配置し、背景色を設定することでリボンのベース部分が完成します。ここまでは比較的シンプルなコードです。---ポイントは擬似要素！今回一番勉強になったのが、この部分です。```css.reason-ribbon::after {  content: "";  position: absolute;  left: 0;  bottom: -7px;  border-left: 12px solid var(--gold);  border-right: 12px solid var(--gold);  border-bottom: 7px solid transparent;}```最初は「三角形の画像を使うのかな？」と思っていましたが、実は**border**だけで作られています。左右のborderに色を付け、下側だけ透明にすることで、リボンの先端がV字にカットされたような形を表現できます。画像を使わずにここまで表現できることに驚きました！CSSだけで装飾が作

本日は、Webサイト制作で使用した装飾パーツについてまとめます。今回は、CSSで平行四辺形のパーツを作成しました。まず、要素自体に `transform: skewX()` を指定することで、通常の四角形を斜めに変形させ、平行四辺形の形を作りました。ただし、そのままだと中の文字まで斜めになってしまうため、内側のテキストには逆方向の `skewX()` をかけて、文字が読みやすいように調整しています。さらに、右上と左下には `::before` や `::after` の擬似要素を使って、小さな三角形の装飾を追加することで作りたい六角形を完成させることができました。擬似要素を使うことで、HTML側に余計なタグを増やさずに、CSSだけでデザイン性のあるパーツを作ることができます。今回のような小さな装飾でも、サイト全体の雰囲気に合わせて形や色を調整することで、デザインの統一感を出しやすくなります。CSSだけで図形を作れるようになると、画像に頼らずに細かい装飾を表現できるので、今後の制作でも活用していきたいと思います。