背景画像のデザインで使える！透けるボックスのレスポンシブルデザインCSS【コピペ用コード】

2019年10月18日2019年12月19日ページに使える機能・デザイン

透ける色を使って、背景画像の上でも綺麗に文字が見えるボックスができます。

パララックスで使える透けるボックスのサンプルサイト

透けるボックスの基本のデザインCSS

ボックスの形を変えたり傾けたりしてユニークなサイトデザインを作ります。

基本のデザインはすべての形で共通しています。

/* 透ける色のボックス */
div.column-color{
display:table;
position:relative;
background-color:rgba(255,103,152,0.7);
color:#fff;
width:50%;
height:490px;
margin-left:50%;
padding-right:1em;
}
/* 透けるボックスの中身文 */
.content-box{
display:table-cell;
position:relative;
vertical-align:middle;
}
/* 透けるボックスの中身の見出し */
.content-box h2{
background-color:transparent;
border-top:2px solid #fff;
border-bottom:2px solid #fff;
padding:0.5em 0;
}
/* 色のボックスに形をつける */
.column-color:before{
content:'';
width:0;
height:0;
position:absolute;
}

外側のボックスdiv.column-colorに色と形を付けます。傾けるデザインなどもあるので、中身はさらにdiv.content-boxで囲んでいます。

もしこのボックスの大きさで文章が入りきらない場合は、それぞれのボックスを調整してください。

#wide-wrap-about1 div.column-color{
width:50%;
height:490px;
margin-left:50%;
}

widthとmargin-leftは合計で100％になるようにします。

どのボックスも少しの文字数の違いですぐにボックスから文字がはみ出してしまうので、デベロッパーツールで様々な画面サイズで確認しながら微調整をしてください。

透ける色の指定の仕方

色の指定はrgbaを使うことで、透けさせることが出来ます。

通常の色コードとの変換は、こちらのサイトで出来ます。

RGBと16進数カラーコードの相互変換ツール – PEKO STEP

最初の３つの数値がRGBの色コード

４つめの数値で(0.5の部分)で色の濃さを調整してください。

旗のような形の透けるボックスCSS

１つめのパララックスで使われています。

旗のような形の透けるボックスサンプル

/* ボックスに三角をつける */
.column-color.sankaku:before{
top:0;
left:-490px;
border-right:240px solid rgba(255,103,152,0.7);
border-bottom:250px solid transparent;
border-top:240px solid transparent;
border-left:250px solid transparent;
}
@media screen and (max-width:698px){
/* 三角の色のボックスを縦に */
div.column-color.sankaku:before{
top:-240px;
left:calc(50% - 120px);
border-right:120px solid transparent;
border-bottom:120px solid rgba(255,103,152,0.7);
border-top:120px solid transparent;
border-left:120px solid transparent;
}
}

四角いボックスの前に三角の疑似要素を付けることで、旗のような形を作っています。

斜めにボックスが入るデザインの透けるボックス

２つめのパララックスで使われています。

斜めにボックスが入るデザインの透けるボックスサンプル

/* 斜めにカットされた色のボックス */
div.column-color.naname{
background-color:transparent;
width:60%;
margin-left:40%;
}
div.column-color.naname:before{
position:absolute;
content:'';
width:400%;
height:100%; /*ここを文字数によって調整 */
top:-70px; /*高さに合わせて位置も調整 */
left:140%;
background: rgba(255,103,152,0.7);
-webkit-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
-webkit-transform: rotate(60deg);
-ms-transform: rotate(160deg);
transform: rotate(160deg);
}
/* 斜めにカットされたボックスの中身 */
.naname .content-box{
vertical-align:bottom;
text-align:right;
padding-right:2em;
}
/* 斜めにカットされたボックスでは見出しをシンプルに */
.naname .content-box h2{
border:none;
padding-bottom:0;
}
@media screen and (max-width:992px){
/* 斜めにカットされた色のボックス */
div.column-color.naname{
width:75%;
margin-left:25%;
height:350px;
margin-top:3em;
padding-right:1em;
padding-top:6em;
}
/* 斜めにカットされた色のボックスの中身 */
.naname .content-box{
padding-right:0;
}
/* 斜めにカットされたボックス */
div.column-color.naname:before{
top:-50px; /*高さに合わせて位置も調整 */
left:140%;
width: 300%;
height: 100%; /*ここを文字数によって調整 */
background: rgba(255,103,152,0.7);
-webkit-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
-webkit-transform: rotate(150deg);
-ms-transform: rotate(140deg);
transform: rotate(165deg);
}
}
@media screen and (max-width:698px){
/* 斜めにカットされた色のボックスを縦に */
div.column-color.naname:before{
top:-90px !important;
left:135% !important;
height:100%;
transform-origin: left center;
-webkit-transform: rotate(160deg);
-ms-transform: rotate(160deg);
transform: rotate(160deg);
}
/* 斜めにカットされた色のボックスを縦長用に */
div.column-color.naname{
width:100%;
margin-left:0;
margin-top:-30px;
}
}

これが一番難易度が高いです。

中身の文字数によってははみ出してしまうため、プレビューを見ながら数値を調整してください。

楕円形の透けるボックス

２つめのパララックスで使われています。

楕円形の透けるボックスサンプル

/* 楕円形のボックス */
.column-color.maru{
width:60%;
padding:6em;
margin-top:1em;
margin-left:45%;
margin-bottom:-5em;
border-radius:50%;
}
@media screen and (max-width:992px){
/* 楕円形のボックス */
div.column-color.maru{
width:80%;
margin-left:25%;
}
}
@media screen and (max-width:698px){
/* 楕円形のボックス */
div.column-color.maru{
width:120%;
margin-left:-10%;
margin-top:-5em;
padding:6em 15%;
}
}
@media screen and (max-width:419px){
/* 楕円形のボックスの位置を調整 */
div.column-color.maru{
padding-top:7em;
}
}
}

ひし形の透けるボックス

４つめのパララックスで使われています。

ひし形のボックスサンプル

/* ひし型のボックス */
div.column-color.cube{
background-color:transparent;
margin-left:auto;
margin-right:auto;
padding-right:0;
padding-top:3em;
text-align:center;
height:500px;/*ここを文字数に応じて調整*/
width:500px;/*ここを文字数に応じて調整*/
}
div.column-color.cube:before{
position:absolute;
content:'';
width:600px;/*ここを文字数に応じで調整*/
height:600px;/*ここを文字数に応じで調整*/
top:calc(25% - 50px);
left:250px;
background-color:rgba(255,103,152,0.7);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
@media screen and (max-width:419px){
/* ひし形の位置を整える */
div.column-color.cube{
width:100%;
padding-right:1em;
}
div.column-color.cube:before{
width:500px;
height:500px;
left:50%;
top:calc(25% - 30px);
}
}