ズラしデザイン03

デモ03

h3見出しテキスト

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

h3見出しテキスト

コード

セクションから紐付けしています。
セクションのclassは書き換えお願いします。
見出しや数字に関しては各自で装飾してください。
SP時画像とテキストを逆にしたい場合は要調整。

rowのclass名「title_row」「column2_row」「reverse」
colのclass名「text_col」「img_col」「num_text」「read_text」

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

編集画面対策なし

//ズラしデザイン02　編集画面用
&.demo03_sec {
.inner {
max-width: 100%;
padding: 20px 0;
.row {
&.title_row {
max-width: 1060px;
width: 100%;
margin: auto;
}
&.column2_row {
max-width: 85%;
width: 100%;
margin-left: auto;
@include breakpoint-sp {
max-width: 100%;
margin-top: 50px;
}
@include breakpoint-pro {
max-width: 95%;
}
.col {
&.img_col {
vertical-align: middle;
padding: 0;
@include breakpoint-sp {
padding: 0 0 0 20px;
margin-top: 20px;
}
}
&.text_col {
vertical-align: middle;
padding: 0 30px;
@include breakpoint-sp {
padding: 0 20px;
}
.component {
&.read_text {
ul {
margin: 20px 0 0 20px;
}
}
&.num_text {
margin-bottom: 20px;
color: #EDAE1C;
line-height: 1;
}
}
}
}
&.reverse {
margin-right: auto;
margin-left: 0;
.col {
&.img_col {
@include breakpoint-sp {
padding: 0 20px 0 0;
}
.component {
&.image {
@include breakpoint-sp {
margin-top: 0;
}
}
}
}
}
}
& + .column2_row {
margin-top: 60px;
margin-bottom: 50px;
}
}
}
}
}

CSSパーツ集