「はこむすび」のサポートは、
単なるお相手紹介にとどまらず、大切な未来を一緒に見つめ、
共に歩んでいきます。
左画像と背景画枠いっぱいに固定
レスポンシブで動いても画像と背景が左右いっぱいに表示される
カラムごとに高度な設定でクラスを追加
frame01、frame02、frame03
カラムの横幅やカスタムパディングなども設定している。
追加CSSへ記入
/* トップ重なり、上の画像（ベース） */
.frame01 {
position: relative;
z-index: 1;
}
/* 下の画像02（上に重ねる） */
.frame02 {
position: absolute;
top: 110px;
right: 60%;
left: auto;
z-index: 2;
}
/* 下の画像03（上に重ねる） */
.frame03 {
position: absolute;
top: 0;
right: 0;
left: auto;
z-index: 2;
}
/* トップ重なり、上の画像（ベース） */
.frame06 {
position: relative;
z-index: 1;
}
婚活はしたいけど、自信が持てない…
そんなあなたへ――
センス抜群のプロたちが、
あなたの魅力を引き上げ、
新たな出会いを増やします。
右画像と背景画枠いっぱいに固定
レスポンシブで動いても画像と背景が左右いっぱいに表示される
カラムごとに高度な設定でクラスを追加
frame04、frame05、frame06
カラムの横幅やカスタムパディングなども設定している。
追加CSSへ記入
/* トップ重なり、上の画像（ベース） */
.frame06 {
position: relative;
z-index: 1;
}
/* 下の画像05（上に重ねる） - 文章 */
.frame05 {
position: absolute;
top: 0; /* 任意で調整可能な上方向の位置 */
left: 10vw; /* 左端から固定位置に配置 */
z-index: 3;
max-width: 40%; /* 幅を調整（必要に応じて変更） */
padding: 20px;
box-sizing: border-box;
}
/* 下の画像04（上に重ねる） - 写真 */
.frame04 {
position: absolute;
top: 110px;
/* 右側に固定 */
right: 0;
left: auto;
z-index: 2;
/* 最大幅1000px、高さ固定で延長 */
max-width: 1000px;
width: auto;
height: auto; /* 高さ固定が必要な場合は具体的な値を指定 */
/* 画像のアスペクト比を維持 */
object-fit: contain;
}