日本語
English
簡体字
한국어
Code Examples
.l-container .l-row .l-grid
sample text. sample text.
sample text. sample text.
sample text. sample text.
sample text. sample text.
<div class="l-container">
<div class="l-row">
<div class="l-grid-3">
sample text. sample text.
</div>
<div class="l-grid-3">
sample text. sample text.
</div>
<div class="l-grid-3">
sample text. sample text.
</div>
<div class="l-grid-3">
sample text. sample text.
</div>
</div>
</div>
// デフォのカラム数を指定
$maxcolumn: 12;
// 溝の幅を指定
$gutter: 30px;
// コンテナ幅を指定
$container-size: 1200px;
.l-container {
margin: 0 auto;
max-width: #{$container-size};
padding: 0;
@include max(767) {
max-width: calc(100%);
padding: 0;
}
}
.l-row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row;
flex-flow: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-left: calc( #{$gutter} / -2);
margin-right: calc( #{$gutter} / -2);
}
.l-grid-#{$i} {
flex-grow: 0;
flex-shrink: 0;
flex-basis: calc(( 100% / ( #{$maxcolumn} / #{$i})) - #{$gutter} - 0.1px);
margin: 0 calc( #{$gutter} / 2);
max-width: calc(( 100% / ( #{$maxcolumn} / #{$i})) - #{$gutter});
}
.lead
sample text. sample text. sample text. sample text. sample text. sample text.
<p class="lead">
sample text. sample text. sample text. sample text. sample text. sample text.
</p>
.lead {
display: block;
font-size: 1.4rem;
font-weight: normal;
letter-spacing: 0.05em;
line-height: 1.6;
text-align: left;
@include max(767) {
font-size: 1.6rem;
}
}
.wrapper
sample text. sample text. sample text. sample text. sample text. sample text.
<div class="wrapper">
sample text. sample text. sample text. sample text. sample text. sample text.
</div>
.wrapper {
position: relative;
top: 0;
left: 0;
width: 100%;
height: auto;
padding: 120px 0;
}
.flex
text sample 01.
text sample 02.
text sample 03.
text sample 04.
<div class="flex">
<div>sample text.</div>
<div>sample text.</div>
<div>sample text.</div>
<div>sample text.</div>
</div>
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.bg
<div class="bg" style="background-image: url('<?php echo get_template_directory_uri(); ?>/lib/images/sample_01.jpg')"></div>
.bg {
display: block;
position: relative;
width: 100%;
text-align: center;
margin: 0 auto;
padding-top: 56.25%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0);
}
}
.center
sample text. sample text.
<div class="wrapper">
<div class="center">
sample text. sample text.
</div>
</div>
.center {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%,0);
text-align: center;
margin: 0 auto;
}
.btn
sample text
<div class="btn">
sample text
</div>
.btn {
display: inline-block;
width: auto;
font-size: 1.4rem;
letter-spacing: 0.05em;
line-height: 1.6;
text-align: center;
color: $white;
padding: 10px 15px;
margin: 0 auto;
background-color: $black;
border: 2px solid $black;
transition: ease .3s;
cursor: pointer;
@include max(767) {
width: 100%;
}
&:hover {
transition: ease .2s;
color: $black;
background-color: $white;
}
}
.break-pc
sample text.sample text.sample text.sample text.sample text.
<div class="text">
sample text.sample text.sample text.<span class="break-pc">sample text.sample text.</span>
</div>
.break-pc {
display: block;
@include max(767) {
display: inline-block;
}
}
.break-sp
sample text.sample text.sample text.sample text.sample text.
<div class="text">
sample text.sample text.sample text.<span class="break-sp">sample text.sample text.</span>
</div>
.break-pc {
display: inline-block;
@include max(767) {
display: block;
}
}
.display-pc
sample text.sample text.sample text.sample text.sample text.
<div class="text">
<div class="display-pc">
sample text.sample text.sample text.sample text.sample text.
</div>
</div>
.display-pc {
display: block;
@include max(767) {
display: none;
}
}
.display-sp
sample text.sample text.sample text.sample text.sample text.
<div class="text">
<div class="display-sp">
sample text.sample text.sample text.sample text.sample text.
</div>
</div>
.display-sp {
display: none;
@include max(767) {
display: block;
}
}