ズラしデザイン06

・ SPでは中央から左に線が移動
・ある程度のデザインの変更は可能
・左右どちらから始めても問題ないです。

デモ06

過去

1888年

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。

文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

1900年

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

2023年

現在

コード

幅は壊してないのでrowからの紐付けとなります

rowのclass名「demo06_row」

※編集画面が壊れるので注意が必要です。

.theme-fo-base .wrapper .contents {
section {
&.demo06_sec {
--set-color: var(--fo-main-color);
.inner {
.row {
&.demo06_row {
position: relative;
@include breakpoint-pc {
padding: 0 20px;
}
@include breakpoint-sp {
padding: 20px 0 20px 20px;
}
&::before {
content: "";
width: 2px;
height: 100%;
background-color: var(--set-color);
position: absolute;
top: 0;
left: 50%;
z-index: -1;
transform: translate(-50%, 0);
@include breakpoint-sp {
left: 0;
transform: none;
}
}
.col {
&:nth-child(1) {
@include breakpoint-pc {
padding-right: 20px;
}
.component {
&.heading {
:is(h1,h2,h3,h4,h5) {
&::after {
@include breakpoint-pc {
content: "";
margin-right: -20px;
margin-left: 20px;
}
}
}
}
}
}
&:nth-child(2) {
@include breakpoint-pc {
padding-left: 20px;
}
.component {
&.heading {
:is(h1,h2,h3,h4,h5) {
&::before {
@include breakpoint-pc {
content: "";
margin-right: 20px;
margin-left: -20px;
}
}
}
}
}
}
@include breakpoint-sp {
padding-left: 20px;
}
.component {
&.heading {
:is(h1,h2,h3,h4,h5) {
&::before {
@include breakpoint-sp {
content: "";
margin-right: 20px;
margin-left: -20px;
}
}
}
}
}
.component {
&.heading {
:is(h1,h2,h3,h4,h5) {
display: flex;
align-items: center;
position: relative;
&::before,
&::after {
background-color: var(--set-color);
height: 2px;
flex: 1;
}
}
}
}
}
}
&:nth-child(1 of .demo06_row) {
padding-top: 40px;
}
&:nth-last-child(1 of .demo06_row) {
padding-bottom: 40px;
}
}
}
}
}
}

CSSパーツ集