カラムレイアウト一覧

CSSはスタイルシート・responsive.cssの一番下にコピペ。

2カラム


レフトカラムコンテンツ

ライトカラムコンテンツ

HTML

<div class="flex_row">
<div class="column_2 column_1">
レフトカラムコンテンツ
</div>

<div class="column_2 column_1">
ライトカラムコンテンツ
</div></div>

スタイルシート (style.css)

.home .flex_row, .page .flex_row, .archive .flex_row, .single .flex_row, .flex_row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.column_2 {
    width: -webkit-calc(50% - 20px);
    width: calc(50% - 20px);
    box-sizing: border-box;
    margin: 0 0 24px;
}

responsive.css (css/responsive.css)

@media screen and (max-width:768px) {
.column_1 {
    width: 100%;
}
}

3カラム


レフトカラムコンテンツ

センターカラムコンテンツ

ライトカラムコンテンツ

HTML

<div class="flex_row">
<div class="column_3 column_1">
レフトカラムコンテンツ
</div>
<div class="column_3 column_1">
センターカラムコンテンツ
</div>
<div class="column_3 column_1">
ライトカラムコンテンツ
</div></div>

スタイルシート (style.css)

.home .flex_row, .page .flex_row, .archive .flex_row, .single .flex_row, .flex_row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.column_3 {
    width: -webkit-calc(33.33% - 26.6px);
    width: calc(33.33% - 26.6px);
    box-sizing: border-box;
    margin: 0 0 24px;
}

responsive.css (css/responsive.css)

@media screen and (max-width:768px) {
.column_1 {
    width: 100%;
}
}

4カラムリスト

下に24pxの余白


  • 4カラムリスト
    SP2カラムリスト

  • 4カラムリスト
    SP2カラムリスト

  • 4カラムリスト
    SP2カラムリスト

  • 4カラムリスト
    SP2カラムリスト

HTML

<ul class="ul_4c flex_ul">
<li>4カラムリスト
SP2カラムリスト</li>
<li>4カラムリスト
SP2カラムリスト</li>
<li>4カラムリスト
SP2カラムリスト</li>
<li>4カラムリスト
SP2カラムリスト</li>
</ul>

スタイルシート (style.css)

.home .flex_ul, .page .flex_ul, .archive .flex_ul, .single .flex_ul, .flex_ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0 -10px;
    list-style: none;
}
.flex_ul li {
    padding: 0 10px;
    box-sizing: border-box;
    line-height: 2;
}
.ul_4c li {
    width: 25%;
    margin: 0 0 24px;
}

responsive.css (css/responsive.css)

@media screen and (max-width:768px) {
.ul_4c li {
    width: 50%;
}
}

レスポンシブ(iPad以下)1カラムにするには
width: 50%;　⇒　width: 100%;
とするとよい。

5カラムリスト

下に24pxの余白


  • 5カラムリスト
    SP2カラムリスト

  • 5カラムリスト
    SP2カラムリスト

  • 5カラムリスト
    SP2カラムリスト

  • 5カラムリスト
    SP2カラムリスト

  • 5カラムリスト
    SP2カラムリスト

HTML

<ul class="ul_5c flex_ul">
<li>5カラムリスト
SP2カラムリスト</li>
<li>5カラムリスト
SP2カラムリスト</li>
<li>5カラムリスト
SP2カラムリスト</li>
<li>5カラムリスト
SP2カラムリスト</li>
<li>5カラムリスト
SP2カラムリスト</li>
</ul>

スタイルシート (style.css)

.home .flex_ul, .page .flex_ul, .archive .flex_ul, .single .flex_ul, .flex_ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0 -10px;
    list-style: none;
}
.flex_ul li {
    padding: 0 10px;
    box-sizing: border-box;
    line-height: 2;
}
.ul_5c li {
    width: 20%;
    margin: 0 0 24px;
}

responsive.css (css/responsive.css)

@media screen and (max-width:768px) {
.ul_5c li {
    width: 50%;
}
}

レスポンシブ(iPad以下)1カラムにするには
width: 50%;　⇒　width: 100%;
とするとよい。

6カラムリスト

下に24pxの余白


  • 6カラムリスト
    SP2カラムリスト

  • 6カラムリスト
    SP2カラムリスト

  • 6カラムリスト
    SP2カラムリスト

  • 6カラムリスト
    SP2カラムリスト

  • 6カラムリスト
    SP2カラムリスト

  • 6カラムリスト
    SP2カラムリスト

HTML

<ul class="ul_6c flex_ul">
<li>6カラムリスト
SP2カラムリスト</li>
<li>6カラムリスト
SP2カラムリスト</li>
<li>6カラムリスト
SP2カラムリスト</li>
<li>6カラムリスト
SP2カラムリスト</li>
<li>6カラムリスト
SP2カラムリスト</li>
<li>6カラムリスト
SP2カラムリスト</li>
</ul>

スタイルシート (style.css)

.home .flex_ul, .page .flex_ul, .archive .flex_ul, .single .flex_ul, .flex_ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0 -10px;
    list-style: none;
}
.flex_ul li {
    padding: 0 10px;
    box-sizing: border-box;
    line-height: 2;
}
.ul_6c li {
    width: 16.66%;
    margin: 0 0 24px;
}

responsive.css (css/responsive.css)

@media screen and (max-width:768px) {
.ul_6c li {
    width: 50%;
}
}

レスポンシブ(iPad以下)1カラムにするには
width: 50%;　⇒　width: 100%;
とするとよい。

TOP