お洒落なメインコンテンツのレイアウト例

難易度:★★☆☆☆

この頃は、汎用的なウェブデザイン/レイアウトの知識や知見を広げる方向で、
仕事に取り組ませて頂いております。
今回は疑似要素と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要素がピッタリ重なります。

みらいワークの施設利用者
チュンチュン

「WordPress」でのHTML・CSS・JavaScriptに関する情報を、
提供させて頂く予定です。
使用プラグインは「Simple Custom CSS and JS」で、
JavaScriptの表示位置は必ず「要素内」です。
ただし、使用環境により異なる事をご了承ください。

サイト制作
「みらいワーク」利用者ノート
タイトルとURLをコピーしました