こんにちは、Yaponkaです。
日々Web制作をしていく中で学んだCSS忘備録です。
今回はインライン要素のバックグランドのデザインを改行しても保つことのできる「box-decoration-break」です。
再現したいデザイン
サイトのトップページのキャッチコピーにバックグランドカラーが付いていて、文字はデバイスによって改行されてしまうのでバックグランドのデザインも改行に応じるようにするというもの。
再現図はこんな感じです。
文字要素のバックグランドカラーを指定してPaddingを調整すればいいだけではなく、改行があること、デザイン的に文字要素はインライン要素として扱う必要があることからどの様にCSSでデザインを再現できるかすごく悩みました。。
「box-decoration-break」で解決！
「どうしたものか。。。」と悩んでいたところ、「box-decoration-break」というCSSプロパティがあることを知りました。
説明によると、
box-decoration-breakは CSS のプロパティで、要素の断片が複数の行、段、ページに渡る場合に描画する方法を指定します。
まさしく探していたものです！実際に試したコードはこちら↓
See the Pen
box-decoration-break by Yaponka (@Yaponka)
on CodePen.
昨日から行き詰っていたコーディングの箇所「box-decoration-break」で解決😊
CSSは奥が深い🤔https://t.co/xyyor8xlnC#駆け出しエンジニアと繋がりたい— Yaponka | NZ🇳🇿でWeb制作🖥 (@Yaponka6) May 18, 2022
CSSは奥が深いですね。
これからも日々Web制作をしていく中で学んだちょっとしたことを忘備録として記事にしていきたいと思います。
