難易度:★★☆☆☆
この頃は、汎用的なウェブデザイン/レイアウトの知識や知見を広げる方向で、
仕事に取り組ませて頂いております。
今回は疑似要素とz-index,opacityプロパティを変更する事で、
従来では2カラム仕切る所を、仕切らずに奥行きを持たせる方法をご紹介します。
サンプル
Content1
コンテント1
ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。
ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。
ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。
ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。
Content2
コンテント2
ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。
ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。
ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。
ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。
疑似要素で画像コンテンツを追加
幸い、疑似要素のルールに関しては5月20日の記事で解説しております。
right:0;を指定するとpaddingを含む要素の右端に位置を合わせます。
.mid-section{
position: relative;
color: #000;
line-height: 1.75;
}
.mid-section.mid-section-1::before {
background-image: url(https://mf-ken.com/note/wp-content/uploads/2024/05/picture-1.jpg);
}
.mid-section::before {
content: "";
position: absolute;
width: 448px;
height: 336px;
background-size: cover;
opacity: 0.7;
z-index: -1;
}
バックグラウンド画像のみに
不透明度(opacity)および奥行き(z-index)を指定する事は出来ないので、
個別のコンテンツとして挿入します。
入れ方としては、5月20日の記事で紹介したやり方と同じです。
z-ndex: -1;を指定していますが、これは、
ここではコンテンツの最も後ろに来る事を意味しています。
バックグラウンドと要素の透過
親となるmid-section要素が初期値で
background:color: transparent;となっているので、
親要素に隠れる事なく、親要素を透過する事が出来ます。
バックグラウンドカラーを透過させる
最後に本文コンテントエリアのプロパティを解説します。
.mid-section .text-wrap{
border-radius: 20px;
background: rgba(255, 255, 255, 0.5);
padding: 20px;
font-size: 16px;
margin-top: 30px;
}
background-colorの指定方法にはrgba()関数を用いる方法もあります。
rgbaは10進法(0-255)の赤、緑、青の値と不透明度の4つの引数からなり、
0から1の値で不透明度を設定します。
HTML(WordPress)/CSS全文
HTML(WordPress)
<!-- wp:columns {"className":"mid-section mid-section-1 right"} -->
<div class="wp-block-columns mid-section mid-section-1 right"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"className":"sub-title"} -->
<p class="sub-title">Content1</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"mid-title"} -->
<p class="mid-title">コンテント1</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"text-wrap"} -->
<p class="text-wrap">ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。<br>ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。<br><br>ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。<br>ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:columns {"className":"mid-section mid-section-2 left"} -->
<div class="wp-block-columns mid-section mid-section-2 left"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"className":"sub-title"} -->
<p class="sub-title">Content2</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"mid-title"} -->
<p class="mid-title">コンテント2</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"text-wrap"} -->
<p class="text-wrap">ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。<br>ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。<br><br>ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。<br>ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
CSS
.mid-section{
color:#000;
line-height:1.75;
position:relative;
}
.mid-section::before{
content:"";
position:absolute;
width:448px;
height:336px;
background-size:cover;
opacity:0.7;
z-index:-1;
}
.mid-section.mid-section-1::before{
background-image:url(https://mf-ken.com/note/wp-content/uploads/2024/05/picture-1.jpg);
}
.mid-section.mid-section-2::before{
right:0;
background-image:url(https://mf-ken.com/note/wp-content/uploads/2024/05/picture-2.jpg);
}
.mid-section p{
width:70%;
}
.mid-section.right p{
margin-left:30%;
}
.mid-section .sub-title,
.mid-section .mid-title{
font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo, serif;
text-shadow: rgb(255, 255, 255) 5px 2px 10px;
}
.mid-section.right .sub-title,
.mid-section.right .mid-title{
text-align:right;
}
.mid-section .sub-title{
font-size:40px;
line-height:40px;
margin-bottom:15px;
padding-bottom:10px;
border-bottom: solid 4px #696969;
position:relative;
}
.mid-section.right .sub-title::before,
.mid-section.left .sub-title::before{
content: '';
width: 100px;
height: 4px;
background-color: #cd5c5c;
position: absolute;
bottom: -4px;
}
.mid-section.right .sub-title::before{
right:0;
}
.mid-section.left .sub-title::before{
left:0;
}
.sub-title.grow:hover::before{
width: 100%;
}
.mid-section .mid-title{
font-size:26px;
margin-bottom:0;
}
.mid-section .text-wrap{
border-radius: 20px;
background: rgba(255, 255, 255, 0.5);
padding: 20px;
font-size: 16px;
margin-top:30px;
}
ボーダーラインの応用
これは少し応用です。
borderはpaddingの外側、marginの内側に配置され、
border-bottomプロパティであれば、要素の下が始点となります。
◆ マウスをかざすと、ボーダーラインが伸びます
HTML
<p class="sub-title grow">◆ マウスをかざすと、ボーダーラインが伸びます</p>
CSS
.sub-title.grow{
font-size:20px;
line-height:20px;
border-bottom: double 4px #696969;
position:relative;
}
.sub-title.grow::before{
content: '';
width: 100px;
height: 4px;
background-color: yellow;
position: absolute;
bottom: -4px;
transition: width .5s;
}
.sub-title.grow:hover::before{
width: 100%;
}
::before要素のbottomプロパティは、要素の下を視点に↑方向の距離を指定します。
したがって、親要素がborder: 4px;であれば、
::before要素の位置をbottom: -4px;を指定する事で、
要素のボーダーと::before要素がピッタリ重なります。