始めに
枠のあるデザインで以下のような枠線を一部消して文字を置くような実装をしたいときのやり方を記事にしました。
See the Pen 枠の上に文字を乗せる by wintyo (@wintyo) on CodePen.
実装方法
やり方は単純で、以下のようなことをしているだけです。
- 1px分の白線を上に被せて消しているように見せる
- ラベルを所定の位置に移動する
この2つのことをそれぞれの要素で行ってもいいですが、ラベル要素から絶対パスで線を引いておくと消す長さを考えなくてもよくなります。
html
<divclass="area"><divclass="area__label">ラベル</div><divclass="area__content">コンテンツ</div></div>scss
.area{position:relative;width:300px;height:100px;border:solid1px#f00;border-radius:5px;background-color:#fee;&__label{position:absolute;top:0;left:20px;font-weight:600;padding:010px;// paddingを左右にいれて消す線の長さを延ばすtransform:translateY(-50%);&::before{position:absolute;z-index:-1;// 何もしないと線が上に来ていたので-1して後ろに回り込ませるleft:0;bottom:50%;// top: 50%だと1pxずれていたのでbottomから計算するwidth:100%;// 親要素の幅を参照するため必ず文字分は消せるheight:1px;background-color:#fff;content:'';}}&__content{padding:20px;}}終わりに
初めてこういったデザインを見るとどうやって実装するのか悩みそうですが、意外と背景色を上に被せて消すというやり方はあります（フキダシとか）。このような実装は知っていると便利なので誰かの役に立てたなら幸いです。