この記事では、セクション間の区切りを曲線図形と装飾文字を重ねて実装する方法を紹介します。
この記事で紹介するセクション区切りの見本CODE-PENを下に載せておきますので、表示やコードをご確認下さい。
See the Pen セクション区切り｜曲線＋文字装飾重ねがけ by s sim (@s-sim) on CodePen.
目次
コーディングのポイント
この曲線と装飾文字を重ねがけするセクション区切り実装方法のポイントは下記のとおりです。
- 曲線図形はHTMLで画像ファイルとして読み込ませます。
- 装飾文字（この記事ではABOUT）はCSS擬似要素で画像として読み込ませます。
注意点としては、レスポンシブのブレークポイントごとに見栄えするようにサイズ等を適宜変更する必要があります。
HTML
以下、セクション区切りのHTML全文です。
<!DOCTYPE html>
<html lang="ja">
<head>
<!--headタグの内容は省略 -->
<!-- このサイトのCSS -->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<main class="l-main">
<!-- セクション１ -->
<section class="l-section --beige1">
セクション01
</section>
<!-- セクション区切り -->
<div class="home-inter-section02"></div> <!-- 上部マージン微調整用タグ -->
<div class="home-inter-section02_02">
<img src="https://shimizu-create.com/wp-content/uploads/2024/09/inter-sec02.png" alt="" class="home-inter-sec02_img">
</div>
<!-- セクション２ -->
<section class="l-section --beige2">
セクション02
</section>
</main>
</body>補足説明
「class=”home-inter-section02″」のタグが曲線読み込み用のタグの上にありますが、この「class=”home-inter-section02″」のタグは無くても構いません。ここで使っている理由は曲線図形読み込み用タグの上部マージンの微調整のためです。
CSS
@charset "UTF-8";
body {
font-family: "Noto Sans JP", "メイリオ", "Meiryo", "ＭＳ ゴシック",
"Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", sans-serif;
line-height: 1.8;
font-size: 16px;
background-color: #E5DBD3;
}
.l-main{
height: 200vh;
}
.l-section{
height: 50vh;
display: grid;
place-items: center;
font-size: 20px;
}
.l-section.--beige1{
background-color: #F7F4EF;
}
.l-section.--beige2{
background-color: #E5DBD3;
}
/* --------------------------------------------------------------- */
/* セクション間エリア(section01-02) */
/* --------------------------------------------------------------- */
/* fvセクション下エリア */
.home-inter-section02 {
height: 20px;
background-color: #F7F4EF;
}
/* セクション上端エリア装飾 */
/* 無くても良い */
.home-inter-section02_02 {
position: relative;
height: 76px;
width: 100%;
background-color: #E5DBD3;
}
/* 文字装飾（ABOUT） */
.home-inter-section02_02::before {
content: "";
position: absolute;
background-image: url(https://shimizu-create.com/wp-content/uploads/2024/09/about.png);
top: -6px;
width: 100%;
height: 110px; /* 高さを指定 */
background-repeat: repeat-x; /* 背景画像の繰り返しを防ぐ */
background-size: auto 100%;
}
/* 曲線図形 */
.home-inter-sec02_img {
width: 100%;
height: 76px;
}文字装飾については今回は上のCSSようにシンプルな配置としましたが、下記のように文字増殖は少し左側にズラして配置しても構いせん。
/* 文字装飾（ABOUT） */
.home-inter-section02_02::before {
content: "";
position: absolute;
background-image: url(https://shimizu-create.com/wp-content/uploads/2024/09/about.png);
top: -6px;
left: -0.5em; /* 左に0.5文字ズラす */
width: calc(100% + 1em); /* 上記ズレを相殺するため措置 */
height: 110px;
background-repeat: repeat-x;
background-size: auto 100%;
}今回、文字装飾をズラして配置しなかった理由はCODE-PENでそうすると表示がバグるためです。実際にサイトに実装した時には表示バグは生じませんでしたので、ご興味のある方は必要に応じてお試し下さい。
