概要
コンテンツの高さが可変する背景画像を利用した複雑な枠のスタイルの指定方法。用途
- CSSのみで表現できない複雑な枠のためスライス画像で対応する
- 中のコンテンツによって高さが伸縮する
検証ブラウザ
- Microsoft Edge(最新)
- IE11
- IE10
- Google Chrome(最新)
- Safari(最新)
- Firefox(最新)
実装方法
HTML
<div class="c-block">
<p class="c-block__txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
SCSS
.c-block {
position: relative;
box-sizing: border-box;
width: 25vw;//任意
padding: 0 3vw;//任意
background: url(https://konocode.jp/img/common/dummy_frame_middle.gif) center center / 100% auto repeat-y;
margin: 6vw auto;//画像サイズによって編集
&::before,
&::after {
content: "";
position: absolute;
left: 0;
display: block;
width: 100%;
height: 6vw;//画像サイズによって編集
background-position: center center;
background-repeat: no-repeat;
background-size: 100% auto;
}
&::before {
top: -5.9vw;//画像サイズによって編集
background-image: url(https://konocode.jp/img/common/dummy_frame_top.gif);
}
&::after {
bottom: -5.9vw;//画像サイズによって編集
background-image: url(https://konocode.jp/img/common/dummy_frame_bottom.gif);
}
}
CSS
.c-block {
position: relative;
box-sizing: border-box;
width: 25vw;
padding: 0 3vw;
background: url(https://konocode.jp/img/common/dummy_frame_middle.gif) center center / 100% auto repeat-y;
margin: 6vw auto;
}
.c-block::before,
.c-block::after {
content: "";
position: absolute;
left: 0;
display: block;
width: 100%;
height: 6vw;
background-position: center center;
background-repeat: no-repeat;
background-size: 100% auto;
}
.c-block:before {
top: -5.9vw;
background-image: url(https://konocode.jp/img/common/dummy_frame_top.gif);
}
.c-block:after {
bottom: -5.9vw;
background-image: url(https://konocode.jp/img/common/dummy_frame_bottom.gif);
}
.c-block__txt {
text-align: justify;
}
ローカル環境にコードを移設した際に動作しない場合はこちら。（トラブルシューティングページへ）
