マルチレイアウト – 基本設定

https://www.rural-web.com/coding/2574

2019/10/17

はじめに

本記事について

本記事は、【レイアウト】に関する設定をまとめたものです。floatflexboxを用いてマルチレイアウトを実装するときに活用できます。レスポンシブ対応。
利用できる方は、お好きに活用してください。

当サイトで公開している「ruralweb.css（準備中）」をご自身のサイトに読み込ませておけば、各サンプルに指定されているクラスを挿入するだけで再現できることを目標にしています。もし個々に利用する場合は、各サンプルのソースをコピペしてご利用ください。

検証ブラウザ・OS

サンプル内容につきましては、最新ブラウザ・OS（IE/Chrome/Safari/FireFox/iOS/Android）で検証しております。基本的にIE9以下などのブラウザでは検証しておりませんが、たまに適用していたり説明してあるところは仕事でやむなく対応した時のものです。

注意事項

自身の仕事効率化を目的としていますので、表示・不具合等による損失につきまして一切の補償をいたしませんのでご理解ください。但し、公開しているサンプル内容の修正・改善はできる限りしていきますので、お気づきの点がございましたらTwitterよりご連絡ください。

コードサンプル

サンプルの要素について

サンプルでは、各要素を認識しやすいように色分けしているだけなので、実際は背景色・ボーダーはコードに含まれません。

基本設定

.rw-container

サンプルコンテンツ

クラス名

rw-container

説明

上記サンプルの背景色が.rw-containerの範囲
コンテンツ外枠用（サイトのコンテンツ最大幅に配置するイメージ）
サンプルではmax-width:900pxに設定。サイト構造に合わせて最大幅を設定する
::before::afterは.rw-containerの下層にある（.rw-col-*）がfloatで並ぶ時の対処

コードを表示

<div class="rw-container">サンプルコンテンツ</div>

.rw-container {
	width:100%;
	max-width:900px;/* サイトのメインコンテンツ幅に変更 */
	margin:0 auto;
}
.rw-container::before,
.rw-container::after {
	display:table;
	content:" ";
	clear:both;
}
.rw-container::after {
	clear:both;
}

最終更新：2019.10.16

.rw-row

サンプルコンテンツ

クラス名

rw-row

説明

上記サンプルのボーダーが.rw-rowの範囲
カラムの外枠用。子要素rw-col-*の外包の役目
.rw-containerの子要素に配置
::before::afterは.rw-rowの子要素にあたる（.rw-col-*）がfloatで並ぶ時の対処

コードを表示

<div class="rw-container">
	<div class="rw-row">サンプルコンテンツ</div>
</div>

.rw-container .rw-row {
	position:relative;
}
.rw-container .rw-row::before,
.rw-container .rw-row::after {
	display:table;
	content:" ";
	clear:both;
}

最終更新：2019.10.16

カラム設定

.rw-col-*

rw-col-12

rw-col-8

rw-col-4

rw-col-6

rw-col-4

rw-col-3

クラス名

rw-col-*

説明

色分け：.rw-col-12.rw-col-8.rw-col-6.rw-col-4.rw-col-3
カラム幅100%
.rw-row内のカラム数は.rw-col-[数字][数字]の合計が12になるようにする。（上記サンプル参考）
ブラウザ幅～767px以下になると全てwidth:100%display:blockになり1カラムに。

注意事項

各カラムがfloat仕様のため、高さが違うカラムが並ぶと表示崩れを起こしやすいので複数行には向いていない。その場合は「flexboxタイプ」を利用する

コードを表示

<div class="rw-container">
	<div class="rw-row bd-none">
		<div class="rw-col-12">rw-col-12</div>
	</div>
	<div class="rw-row bd-none">
		<div class="rw-col-8">rw-col-8</div>
		<div class="rw-col-4">rw-col-4</div>
	</div>
	<div class="rw-row bd-none">
		<div class="rw-col-6">rw-col-6</div>
		<div class="rw-col-6">rw-col-6</div>
	</div>
	<div class="rw-row bd-none">
		<div class="rw-col-4">rw-col-4</div>
		<div class="rw-col-4">rw-col-4</div>
		<div class="rw-col-4">rw-col-4</div>
	</div>
	<div class="rw-row bd-none">
		<div class="rw-col-3">rw-col-3</div>
		<div class="rw-col-3">rw-col-3</div>
		<div class="rw-col-3">rw-col-3</div>
		<div class="rw-col-3">rw-col-3</div>
	</div>
</div>

.rw-row .rw-col-12, .rw-row .rw-col-8, .rw-row .rw-col-6, .rw-row .rw-col-4, .rw-row .rw-col-3 {
	float:left;
	position:relative;
	min-height:1px;
}

.rw-row .rw-col-12 {width:100%;}
.rw-row .rw-col-8 {width:66.66666667%;}
.rw-row .rw-col-6 {width:50%;}
.rw-row .rw-col-4 {width:33.33333333%;}
.rw-row .rw-col-3 {width:25%;}

/* media query */
@media screen and (max-width: 767px){
.rw-row .rw-col-12, .rw-row .rw-col-8, .rw-row .rw-col-6, .rw-row .rw-col-4, .rw-row .rw-col-3 {
	float:none;
	width:100%;
}

}/* query end */

最終更新：2019.10.16

オプション

.rw-in

rw-col-6

クラス名

rw-in

説明

.rw-containerにclass="rw-container rw-in"と付与することで、paddingを発生させる。
初期値は左右15pxずつ
.rw-container以外にも.rw-row.rw-col-*に活用可能

コードを表示

<div class="rw-container rw-in">
	<div class="rw-row">
		<div class="rw-col-6">rw-col-6</div>
		<div class="rw-col-6">rw-col-6</div>
	</div>
</div>

.rw-in {
	padding:0 15px;
}

最終更新：2019.10.16

.rw-in-pc

rw-col-6

クラス名

rw-in-pc

説明

ブラウザ幅768px～の場合のみ。
.rw-containerにclass="rw-container rw-in-pc"と付与することで、PC表示768px～ならpaddingを発生させる。
初期値は左右15pxずつ
.rw-container以外にも.rw-row.rw-col-*に活用可能

コードを表示

<div class="rw-container rw-in-pc">
	<div class="rw-row">
		<div class="rw-col-6">rw-col-6</div>
		<div class="rw-col-6">rw-col-6</div>
	</div>
</div>

.rw-in-pc {
	padding:0 15px;
}

/* media query */
@media screen and (max-width: 767px){
.rw-in-pc {
	padding:0;
}

}/* query end */

最終更新：2019.10.16

.rw-in-sp

rw-col-6

クラス名

rw-in-sp

説明

ブラウザ幅～767pxの場合のみ。
.rw-containerにclass="rw-container rw-in-sp"と付与することで、SP表示～767pxならpaddingを発生させる。
初期値は左右15pxずつ
.rw-container以外にも.rw-row.rw-col-*に活用可能

コードを表示

<div class="rw-container rw-in-sp">
	<div class="rw-row">
		<div class="rw-col-6">rw-col-6</div>
		<div class="rw-col-6">rw-col-6</div>
	</div>
</div>

/* media query */
@media screen and (max-width: 767px){
.rw-in-sp {
	padding:0 15px;
}

}/* query end */

最終更新：2019.10.16

.rw-wide

rw-col-6

rw-wideで内包されたrw-col-6

クラス名

rw-wide

説明

.rw-inの効果をなくす。.rw-inを利用しているとき、子要素に対して.rw-wideを付与することでpaddingされた分を相殺させる。
上記サンプルでは2段目の.rw-rowに.rw-wide付与
初期値は左右-15pxずつ
親要素に.rw-inがないと作動しない

コードを表示

<div class="rw-container rw-in">
	<div class="rw-row">
		<div class="rw-col-6">rw-col-6</div>
		<div class="rw-col-6">rw-col-6</div>
	</div>
	<div class="rw-row rw-wide">
		<div class="rw-col-6">rw-wideで内包されたrw-col-6</div>
		<div class="rw-col-6">rw-wideで内包されたrw-col-6</div>
	</div>
</div>

.rw-in .rw-wide {
	margin:0 -15px;
}

最終更新：2019.10.16

.rw-wide-pc

rw-col-6

rw-wide-pcで内包されたrw-col-6

クラス名

rw-wide-pc

説明

ブラウザ幅768px～のみ作動
.rw-inの効果をなくす。.rw-inを利用しているとき、子要素に対して.rw-wide-pcを付与することでPC表示768px～のみpaddingされた分を相殺させる。
初期値は左右-15pxずつ
親要素に.rw-inがないと作動しない

コードを表示

<div class="rw-container rw-in">
	<div class="rw-row">
		<div class="rw-col-6">rw-col-6</div>
		<div class="rw-col-6">rw-col-6</div>
	</div>
	<div class="rw-row rw-wide-pc">
		<div class="rw-col-6">rw-wide-pcで内包されたrw-col-6</div>
		<div class="rw-col-6">rw-wide-pcで内包されたrw-col-6</div>
	</div>
</div>

.rw-in .rw-wide-pc {
	margin:0 -15px;
}

/* media query */
@media screen and (max-width: 767px){

.rw-in .rw-wide-pc {
	margin:0;
}

}/* query end */

最終更新：2019.10.16

.rw-wide-sp

rw-col-6

rw-wide-spで内包されたrw-col-6

クラス名

rw-wide-sp

説明

ブラウザ幅～767pxのみ作動
.rw-inの効果をなくす。.rw-inを利用しているとき、子要素に対して.rw-wide-spを付与することでSP表示～767pxのみpaddingされた分を相殺させる。
初期値は左右-15pxずつ
親要素に.rw-inがないと作動しない

コードを表示

<div class="rw-container rw-in">
	<div class="rw-row">
		<div class="rw-col-6">rw-col-6</div>
		<div class="rw-col-6">rw-col-6</div>
	</div>
	<div class="rw-row rw-wide-sp">
		<div class="rw-col-6">rw-wide-spで内包されたrw-col-6</div>
		<div class="rw-col-6">rw-wide-spで内包されたrw-col-6</div>
	</div>
</div>

/* media query */
@media screen and (max-width: 767px){

.rw-in .rw-wide-sp {
	margin:0 -15px;
}

}/* query end */

最終更新：2019.10.16

flexboxタイプ

.rw-row-flex

rw-col-6

rw-col-4

クラス名

rw-row-flex

説明

flexboxタイプのカラムレイアウト実装
rw-rowをrw-row-flexに変更するだけでflexboxタイプに変更される
rw-containerの子要素に配置
左右の高さを合わせてくれるため、複数行に強いのでリスト型に向いている。floatタイプと違い、一度rw-row-flexで囲ってしまえばrw-col-*をいくつでも挿入可能。ただし1行に対して数字合計12は守ること。
ブラウザ幅～767pxで1カラム

コードを表示

<div class="rw-container">
	<div class="rw-row-flex">
		<div class="rw-col-6">rw-col-6</div>
		<div class="rw-col-6">rw-col-6</div>
		<div class="rw-col-6">rw-col-6</div>
		<div class="rw-col-6">rw-col-6</div>
		<div class="rw-col-4">rw-col-4</div>
		<div class="rw-col-4">rw-col-4</div>
		<div class="rw-col-4">rw-col-4</div>
	</div>
</div>

.rw-row-flex{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.rw-row-flex .rw-col-12 {width:100%;}
.rw-row-flex .rw-col-8 {width:66.66666667%;}
.rw-row-flex .rw-col-6 {width:50%;}
.rw-row-flex .rw-col-4 {width:33.33333333%;}
.rw-row-flex .rw-col-3 {width:25%;}

/* media query */
@media screen and (max-width: 767px){
.rw-row-flex {
	display:block;
}
.rw-row-flex .rw-col-12, .rw-row-flex .rw-col-8, .rw-row-flex .rw-col-6, .rw-row-flex .rw-col-4, .rw-row-flex .rw-col-3 {
	width:100%;
}

}/* query end */

最終更新：2019.10.16

.rw-height-center

サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

サンプルテキスト

クラス名

rw-height-center

説明

左右の高さに合わせて上下中央配置
rw-row-flexにrw-height-centerを付与

コードを表示

<div class="rw-container">
	<div class="rw-row-flex rw-height-center">
		<div class="rw-col-6">サンプルテキストサンプルテキストサンプルテキスト（省略）</div>
		<div class="rw-col-6">サンプルテキスト</div>
		<div class="rw-col-6">サンプルテキスト</div>
		<div class="rw-col-6">サンプルテキストサンプルテキストサンプルテキスト（省略）</div>
	</div>
</div>

.rw-row-flex.rw-height-center > div{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

最終更新：2019.10.16

.rw-between

【1】rw-col-6：サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

【2】rw-col-4

【3】rw-col-3

【4】rw-col-8：サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

【5】rw-col-4

【6】rw-col-3：サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

【7】rw-col-3

クラス名

rw-between

説明

rw-containerの両端から均等に要素を配置する
rw-row-flexにrw-betweenを付与

コードを表示

<div class="rw-container">
	<div class="rw-row-flex rw-between">
		<div class="rw-col-6">【1】rw-col-6：サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</div>
		<div class="rw-col-4">【2】rw-col-4</div>
		<div class="rw-col-3">【3】rw-col-3</div>
		<div class="rw-col-8">【4】rw-col-8：サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</div>
		<div class="rw-col-4">【5】rw-col-4</div>
		<div class="rw-col-3">【6】rw-col-3：サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</div>
		<div class="rw-col-3">【7】rw-col-3</div>
	</div>
</div>

.rw-row-flex.rw-between {
	justify-content:space-between;
}

最終更新：2019.10.16

flexboxタイプ：固定+可変

.rw-l-box-layout

固定幅

可変幅

クラス名

rw-l-box-layout

説明

左固定、右可変
上記サンプルは、左固定300px右可変auto
rw-row-flexにrw-l-box-layoutを付与
ブラウザ幅～767pxで1カラム

コードを表示

<div class="rw-container">
	<div class="rw-row-flex rw-l-box-layout">
		<div>固定幅</div>
		<div>可変幅</div>
	</div>
</div>

.rw-row-flex.rw-l-box-layout > *:first-child {
	flex-basis:300px;
}
.rw-row-flex.rw-l-box-layout > *:last-child {
	flex-basis:auto;
	flex:1;
}

最終更新：2019.10.16

.rw-r-box-layout

可変幅

固定幅

クラス名

rw-r-box-layout

説明

左可変、右固定
上記サンプルは、左可変auto右固定300px
rw-row-flexにrw-r-box-layoutを付与
ブラウザ幅～767pxで1カラム

コードを表示

<div class="rw-container">
	<div class="rw-row-flex rw-r-box-layout">
		<div>可変幅</div>
		<div>固定幅</div>
	</div>
</div>

.rw-row-flex.rw-r-box-layout > *:first-child {
	flex-basis:auto;
	flex:1;
}
.rw-row-flex.rw-r-box-layout > *:last-child {
	flex-basis:300px;
}

最終更新：2019.10.16

.rw-reverse

1つ目のDIV

2つ目のDIV

クラス名

rw-reverse

説明

順番を逆転させる
rw-row-flexにrw-reverseを付与

コードを表示

<div class="rw-container">
	<div class="rw-row-flex rw-r-box-layout rw-reverse">
		<div>1つ目のDIV</div>
		<div>2つ目のDIV</div>
	</div>
</div>

.rw-row-flex.rw-reverse {
	flex-direction:row-reverse;
}

最終更新：2019.10.16

すべて

バージョン

1.0.1

説明

最終更新時点でのレイアウト用CSSをまとめたもの

コードを表示

.rw-container {
	width:100%;
	max-width:900px;
	margin:0 auto;
}
.rw-container .rw-row {
	position:relative;
}
.rw-row-flex{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}

.rw-row .rw-col-12, .rw-row .rw-col-8, .rw-row .rw-col-6, .rw-row .rw-col-4, .rw-row .rw-col-3 {
	float:left;
	position:relative;
	min-height:1px;
}
.rw-row .rw-col-12,.rw-row-flex .rw-col-12 {width:100%;}
.rw-row .rw-col-8,.rw-row-flex .rw-col-8 {width:66.66666667%;}
.rw-row .rw-col-6,.rw-row-flex .rw-col-6 {width:50%;}
.rw-row .rw-col-4,.rw-row-flex .rw-col-4 {width:33.33333333%;}
.rw-row .rw-col-3,.rw-row-flex .rw-col-3 {width:25%;}

.rw-in {padding:0 15px;}
.rw-in-pc {padding:0 15px;}

.rw-in .rw-wide {margin:0 -15px;}
.rw-in .rw-wide-pc {margin:0 -15px;}

.rw-row-flex.rw-height-center > div{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.rw-row-flex.rw-l-box-layout > *:first-child,
.rw-row-flex.rw-r-box-layout > *:last-child {
	flex-basis:300px;
}
.rw-row-flex.rw-l-box-layout > *:last-child,
.rw-row-flex.rw-r-box-layout > *:first-child {
	flex-basis:auto;
	flex:1;
}
.rw-row-flex.rw-reverse {
	flex-direction:row-reverse;
}
.rw-row-flex.rw-between {
	justify-content:space-between;
}

/* after:before */
.rw-container::before,
.rw-container .rw-row::before,
.rw-container::after,
.rw-container .rw-row::after {
	display:table;
	content:" ";
	clear:both;
}
.rw-container::after {
	clear:both;
}

/* media query */
@media screen and (max-width: 767px){
.rw-row .rw-col-12, .rw-row .rw-col-8, .rw-row .rw-col-6, .rw-row .rw-col-4, .rw-row .rw-col-3 {
	float:none;
	width:100%;
}
.rw-row-flex .rw-col-12, .rw-row-flex .rw-col-8, .rw-row-flex .rw-col-6, .rw-row-flex .rw-col-4, .rw-row-flex .rw-col-3 {
	width:100%;
}
.rw-row-flex {
	display:block;
}

.rw-in-pc {padding:0;}
.rw-in-sp {padding:0 15px;}
.rw-in .rw-wide-pc {margin:0;}
.rw-in .rw-wide-sp {margin:0 -15px;}

}/* query end */

最終更新：2019.10.17

補足説明

flexboxとは

CSS3から導入されたモジュール「Flexible Box Layout Module」です。フレキシブル・・・つまり「柔軟性」のあるレイアウトを実現できます。

flexboxの利点

今まではfloatやinline-blockを利用して左右レイアウトを構築するのが主流でしたが、近年flexboxは有名どころの最新ブラウザがサポートしたため、安心して利用できるようになりました。主な利点として、簡単なCSS設定で柔軟にカラムを扱えることです。今までは、カラム同士の左右の高さなどでバランスがおかしいとすぐに表示崩れを起こしていたり、横並びされたブロックのテキスト位置を上下中央にするのにも一苦労した方も多かったかと思います。flexboxではそういったムズムズしたところが解消されたので、今まで以上に使いやすくわかりやすいレイアウトデザインを考案できます。

「rw-row」と「rw-row-flex」の違い

今後レイアウト組みのスタンダードになりそうですが・・・個人で扱うレベルでしたらflexboxをメインにしても良いと思います。ですが、クライアントによっては昔のブラウザに対応せざるを得ないなんてこともあります。そういった観点から、現時点ではどちらにも柔軟に対応できるよう設定しています。

実際に、floatで横並びさせるrw-rowと、flexを利用したrw-row-flexとの大きな違いを見ていきます。

rw-rowの場合

【左】rw-col-6

【右】rw-col-6

rw-row-flexの場合

【左】rw-col-6

【右】rw-col-6

※ブラウザ幅～767pxでは1カラムになります。

ご覧のように、見た目が同じになっています。

ソースはクラス名rw-rowもしくはrw-row-flexが違うだけで、すべて共通です。

<div class="rw-container">
	<div class="【rw-row】または【rw-row-flex】">
		<div class="rw-col-6">【左】rw-col-6</div>
		<div class="rw-col-6">【右】rw-col-6</div>
	</div>
</div>

それでは各パターンの左側rw-col-6に対して、高さを出したいと思います。

rw-rowの場合

【左】rw-col-6：サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

【右】rw-col-6

rw-row-flexの場合

【左】rw-col-6：サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

【右】rw-col-6

※ブラウザ幅～767pxでは1カラムになります。

rw-rowの右カラムだけが出現しました。は一番外枠になるrw-containerです。つまり、右カラムは左カラムの高さを保持せず単独のブロックになるため、右カラムの高さは要素内の高さを優先します。それに対しrw-row-flexは左右の高さに追従するため、右カラムが左カラムの高さ分まで延長します。

この現象が何を意味するのか？
今度はrw-col-6を複数行にしてみます。

rw-rowの場合

【左】rw-col-6：サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

【右】rw-col-6

【左】rw-col-6

【右】rw-col-6：サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

rw-row-flexの場合

【左】rw-col-6：サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

【右】rw-col-6

【左】rw-col-6

【右】rw-col-6：サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

※ブラウザ幅～767pxでは1カラムになります。

上記ソースもrw-col-6を増やしただけです。

<div class="rw-container">
	<div class="【rw-row】または【rw-row-flex】">
		<div class="rw-col-6">【左】rw-col-6：サンプルテキストサンプルテキスト・・・（省略）</div>
		<div class="rw-col-6">【右】rw-col-6</div>
		<div class="rw-col-6">【左】rw-col-6</div>
		<div class="rw-col-6">【右】rw-col-6：サンプルテキストサンプルテキスト・・・（省略）</div>
	</div>
</div>

rw-rowが左右1カラムずつにならなくなりました。
floatの仕組みからすれば当然の動きなのですが、表示崩れ扱いされて一番悩まされる例の代表格がこの現象ですね。

それに比べるとrw-row-flexは安心です。並んだカラムの一番高さを持つ要素に高さを合わせるので、何も考えず量産できるようになります。隣に隙間があれば入りますし、入らなければ次の行に回り込む形になりますので、仮に各要素が幅も高さもバラバラであってもrw-rowよりかだいぶマシに整列してくれます。

【1】rw-col-6：サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

【2】rw-col-4

【3】rw-col-3

【4】rw-col-8：サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

【5】rw-col-4

【6】rw-col-3：サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

【7】rw-col-3

※ブラウザ幅～767pxでは1カラムになります。

さらにrw-betweenを付与してあげれば、外枠rw-containerに合わせて均等配置しますので、レイアウトバランスも簡単に調整可能です。

【1】rw-col-6：サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

【2】rw-col-4

【3】rw-col-3

【4】rw-col-8：サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

【5】rw-col-4

【6】rw-col-3：サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

【7】rw-col-3

※ブラウザ幅～767pxでは1カラムになります。

<div class="rw-container">
	<div class="rw-row-flex rw-between">
		<div class="rw-col-6">【1】rw-col-6：サンプルテキストサンプルテキスト・・・（省略）</div>
		<div class="rw-col-4">【2】rw-col-4</div>
		<div class="rw-col-3">【3】rw-col-3</div>
		<div class="rw-col-8">【4】rw-col-8：サンプルテキストサンプルテキスト・・・（省略）</div>
		<div class="rw-col-4">【5】rw-col-4</div>
		<div class="rw-col-3">【6】rw-col-3：サンプルテキストサンプルテキスト・・・（省略）</div>
		<div class="rw-col-3">【7】rw-col-3</div>
	</div>
</div>

float:leftの捉え方

float:left（左回り込み）について細かく説明するのが面倒なので・・・ざっくりイメージするならば、

（右）隣に入る余裕があるなら、（右）隣に配置されます。
もし入らないなら、直前のブロックの高さで行ける範囲の左に回り込みます。

ですので、先ほどの例にもう一つrw-col-6を増やしてみましょう。

【1】rw-col-6：サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

【2】rw-col-6

【3】rw-col-6

【4】rw-col-6：サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

5個目のrw-col-6

※ブラウザ幅～767pxでは1カラムになります。

新しく挿入した5個目のrw-col-6が直前の要素【4】の高さから見て一番左を目指す動きをしました。

以上のことから、floatによるレイアウトは左右の高さが1px異なるだけでキレイに配置されないデメリットを持ち合わせています。高さがしっかり揃う条件下であれば心配いりませんが。

少し面倒ではありますが「1行で1セットだぞ！」としてあげればレイアウトできます。

【1】rw-col-6：サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

【2】rw-col-6

【3】rw-col-6：サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

【4】rw-col-6

※ブラウザ幅～767pxでは1カラムになります。

<div class="rw-container">
	<div class="rw-row">
		<div class="rw-col-6">【1】rw-col-6：サンプルテキストサンプルテキスト・・・（省略）</div>
		<div class="rw-col-6">【2】rw-col-6</div>
	</div>
	<div class="rw-row">
		<div class="rw-col-6">【3】rw-col-6：サンプルテキストサンプルテキスト・・・（省略）</div>
		<div class="rw-col-6">【4】rw-col-6</div>
	</div>
</div>

更新履歴

更新日時	更新内容
2019.10.17	コードサンプル：全部入りCSSを挿入
2019.10.16	記事を作成