display: flex;を使ったグリッドなどが特長のCSSフレームワーク「Frow CSS」を使ってみます。
使い方
GitHubからダウンロードを行います。
ダウンロードしたファイルを解凍して、cssディレクトリ内にあるfrow.min.cssを以下のように読み込みます。
<link rel="stylesheet" href="./frow.min.css" />
これで準備完了なので、簡単に使ってみます。
HTML
<div class="frow"> <div class="box-sample">sample</div> <div class="box-sample">sample</div> <div class="box-sample">sample</div> </div>
分かりやすいように.box-sampleというclassを付けて、背景色などを設定します。
CSS
.box-sample {
margin: 5px;
padding: 30px 10px;
background: #999999;
}
.frowはdisplay: flex;で、子要素を横並びにします。
Frow CSSのデモページ
Grid System
グリッドの設定方法についてみてみます。
グリッドの分割
グリッドの分割は1,2,3,4,5,6,12のパターンが用意されています。
HTML
<h3>.col-md-1-1</h3>
<div class="frow">
<div class="col-md-1-1">
<div class="box-sample">.col-md-1-1</div>
</div>
</div>
<h3>.col-md-1-2</h3>
<div class="frow">
<div class="col-md-1-2">
<div class="box-sample">.col-md-1-2</div>
</div>
<div class="col-md-1-2">
<div class="box-sample">.col-md-1-2</div>
</div>
</div>
<h3>.col-md-1-3</h3>
<div class="frow">
<div class="col-md-1-3">
<div class="box-sample">.col-md-1-3</div>
</div>
<div class="col-md-1-3">
<div class="box-sample">.col-md-1-3</div>
</div>
<div class="col-md-1-3">
<div class="box-sample">.col-md-1-3</div>
</div>
</div>
<h3>.col-md-1-4</h3>
<div class="frow">
<div class="col-md-1-4">
<div class="box-sample">.col-md-1-4</div>
</div>
<div class="col-md-1-4">
<div class="box-sample">.col-md-1-4</div>
</div>
<div class="col-md-1-4">
<div class="box-sample">.col-md-1-4</div>
</div>
<div class="col-md-1-4">
<div class="box-sample">.col-md-1-4</div>
</div>
</div>
<h3>.col-md-1-5</h3>
<div class="frow">
<div class="col-md-1-5">
<div class="box-sample">.col-md-1-5</div>
</div>
<div class="col-md-1-5">
<div class="box-sample">.col-md-1-5</div>
</div>
<div class="col-md-1-5">
<div class="box-sample">.col-md-1-5</div>
</div>
<div class="col-md-1-5">
<div class="box-sample">.col-md-1-5</div>
</div>
<div class="col-md-1-5">
<div class="box-sample">.col-md-1-5</div>
</div>
</div>
<h3>.col-md-1-6</h3>
<div class="frow">
<div class="col-md-1-6">
<div class="box-sample">.col-md-1-6</div>
</div>
<div class="col-md-1-6">
<div class="box-sample">.col-md-1-6</div>
</div>
<div class="col-md-1-6">
<div class="box-sample">.col-md-1-6</div>
</div>
<div class="col-md-1-6">
<div class="box-sample">.col-md-1-6</div>
</div>
<div class="col-md-1-6">
<div class="box-sample">.col-md-1-6</div>
</div>
<div class="col-md-1-6">
<div class="box-sample">.col-md-1-6</div>
</div>
</div>
<h3>.col-md-1-12</h3>
<div class="frow">
<div class="col-md-1-12">
<div class="box-sample">.col-md-1-12</div>
</div>
<div class="col-md-1-12">
<div class="box-sample">.col-md-1-12</div>
</div>
<div class="col-md-1-12">
<div class="box-sample">.col-md-1-12</div>
</div>
<div class="col-md-1-12">
<div class="box-sample">.col-md-1-12</div>
</div>
<div class="col-md-1-12">
<div class="box-sample">.col-md-1-12</div>
</div>
<div class="col-md-1-12">
<div class="box-sample">.col-md-1-12</div>
</div>
<div class="col-md-1-12">
<div class="box-sample">.col-md-1-12</div>
</div>
<div class="col-md-1-12">
<div class="box-sample">.col-md-1-12</div>
</div>
<div class="col-md-1-12">
<div class="box-sample">.col-md-1-12</div>
</div>
<div class="col-md-1-12">
<div class="box-sample">.col-md-1-12</div>
</div>
<div class="col-md-1-12">
<div class="box-sample">.col-md-1-12</div>
</div>
<div class="col-md-1-12">
<div class="box-sample">.col-md-1-12</div>
</div>
</div>
.col-md-XX の「md」の部分を変更することで、指定したブレークポイントでグリッドのサイズを変更できます。
Frow CSSではxs,sm,md,lgの4種類が用意されています。
HTML
<div class="frow">
<div class="col-xs-1-2 col-sm-1-1 col-md-1-2 col-lg-1-1">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-2 col-sm-1-2 col-md-1-2 col-lg-1-1">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-2 col-sm-1-2 col-md-1-2 col-lg-1-5">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-2 col-sm-1-3 col-md-1-2 col-lg-1-5">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-2 col-sm-1-3 col-md-1-4 col-lg-1-5">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-2 col-sm-1-3 col-md-1-4 col-lg-1-5">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-2 col-sm-1-3 col-md-1-4 col-lg-1-5">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-2 col-sm-1-3 col-md-1-4 col-lg-1-5">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-2 col-sm-1-3 col-md-1-4 col-lg-1-5">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-2 col-sm-1-3 col-md-1-4 col-lg-1-5">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-2 col-sm-1-3 col-md-1-4 col-lg-1-5">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-2 col-sm-1-3 col-md-1-4 col-lg-1-5">
<div class="box-sample">sample</div>
</div>
</div>
ブレークポイント毎でのグリッドサイズ変更のデモページ
各ブレークポイントのサイズは以下のようになっています。
| xs | 0px～767pxでスマートフォン向け。 |
|---|---|
| sm | 768px～991pxでタブレット向け。 |
| md | 992px～1199pxでPCや横長のタブレット向け。 |
| lg | 1200px～でワイドスクリーンのPC向け。 |
Frowに合わせて個別にブレークポイントを設定する場合、以下のように設定します。
CSS
/* XS */
@media (max-width: 767px) {
}
/* XS, SM */
@media (max-width: 991px) {
}
/* SM */
@media (min-width: 768px) and (max-width: 991px) {
}
/* MD */
@media (min-width: 992px) and (max-width: 1199px) {
}
/* MD, LG */
@media (min-width: 992px) {
}
/* LG */
@media (min-width: 1200px) {
}
アイテムの表示・非表示
.visible-XXで指定したブレークポイントだけ表示、.hidden-XXで指定したブレークポイントだけ非表示にできます。
HTML
<div class="frow">
<div class="col-xs-1-4 visible-xs">
<div class="box-sample">.visible-xs</div>
</div>
<div class="col-xs-1-4">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-4 hidden-md">
<div class="box-sample">.hidden-md</div>
</div>
<div class="col-xs-1-4">
<div class="box-sample">sample</div>
</div>
</div>
.visible-xsは0px～767pxで表示、hidden-mdは992px～1199pxで非表示になります。
グリッドの表示・非表示のデモページ
コンテナ
.frow-containerで括ることで、ブレークポイント毎でコンテンツ幅を100%ではなく、丁度よい幅になります。
HTML
<div class="frow-container">
<div class="frow">
<div class="col-md-1-3">
<div class="box-sample">sample</div>
</div>
<div class="col-md-1-3">
<div class="box-sample">sample</div>
</div>
<div class="col-md-1-3">
<div class="box-sample">sample</div>
</div>
</div>
</div>
Frow
.frowに合わせて使用できるclassをみてみます。
.gutters
アイテム間に幅30pxの間隔を空けます。
HTML
<div class="frow gutters">
<div class="col-xs-1-3">
<div class="box-sample">.col-xs-1-3</div>
</div>
<div class="col-xs-1-3">
<div class="box-sample">.col-xs-1-3</div>
</div>
<div class="col-xs-1-3">
<div class="box-sample">.col-xs-1-3</div>
</div>
</div>
.row-center
水平方向の配置が中央に集める形で、垂直方向の配置が中央揃えになります。
justify-content: center; + align-items: center;です。
HTML
<div class="frow row-center"> <div class="box-sample">sample</div> <div class="box-sample">sample</div> <div class="box-sample">sample</div> </div>
.row-start
水平方向の配置が始端に集める形で、垂直方向の配置が中央揃えになります。
justify-content: flex-start; + align-items: center;です。
HTML
<div class="frow row-start"> <div class="box-sample">sample</div> <div class="box-sample">sample</div> <div class="box-sample">sample</div> </div>
.row-end
水平方向の配置が終端に集める形で、垂直方向の配置が中央揃えになります。
justify-content: flex-end; + align-items: center;です。
HTML
<div class="frow row-end"> <div class="box-sample">sample</div> <div class="box-sample">sample</div> <div class="box-sample">sample</div> </div>
.row-between
水平方向の配置が均等配置(先頭と最後のアイテムは始端と終端に寄る)で、垂直方向の配置が中央揃えになります。
justify-content: space-between; + align-items: center;です。
HTML
<div class="frow row-between"> <div class="box-sample">sample</div> <div class="box-sample">sample</div> <div class="box-sample">sample</div> </div>
.row-around
水平方向の配置が均等配置(先頭と最後のアイテムは端からスペースを取る)で、垂直方向の配置が中央揃えになります。
justify-content: space-around; + align-items: center;です。
HTML
<div class="frow row-around"> <div class="box-sample">sample</div> <div class="box-sample">sample</div> <div class="box-sample">sample</div> </div>
.column-center
縦積みのグリッドになり、垂直方向の配置が始端に集める形で、水平方向の配置が中央揃えになります。
flex-direction: column; + justify-content: flex-start; + align-items: center;です。
HTML
<div class="frow column-center"> <div class="box-sample">sample</div> <div class="box-sample">sample</div> <div class="box-sample">sample</div> </div>
.column-start
縦積みのグリッドになり、垂直方向の配置が始端に集める形で、水平方向の配置も始端に揃える形になります。
flex-direction: column; + justify-content: flex-start; + align-items: flex-start;です。
HTML
<div class="frow column-start"> <div class="box-sample">sample</div> <div class="box-sample">sample</div> <div class="box-sample">sample</div> </div>
.column-end
縦積みのグリッドになり、垂直方向の配置が始端に集める形で、水平方向の配置は終端に揃える形になります。
flex-direction: column; + justify-content: flex-start; + align-items: flex-end;です。
HTML
<div class="frow column-end"> <div class="box-sample">sample</div> <div class="box-sample">sample</div> <div class="box-sample">sample</div> </div>
.centered
水平方向、垂直方向共に中央揃えの配置になります。
.row-centerと違い、.frowにheight:100%;も合わせて追加されます。
HTML
<div class="frow centered"> <div class="box-sample">sample</div> <div class="box-sample">sample</div> <div class="box-sample">sample</div> </div>
.centered-column
.centeredの縦積みバージョンです。
HTML
<div class="frow centered-column"> <div class="box-sample">sample</div> <div class="box-sample">sample</div> <div class="box-sample">sample</div> </div>
.direction-row
flex-direction: row;で水平に並びます。
HTML
<div class="frow direction-row"> <div class="box-sample">sample1</div> <div class="box-sample">sample2</div> <div class="box-sample">sample3</div> </div>
.direction-reverse
flex-direction: row-reverse;で.direction-rowとは逆向きに並びます。
HTML
<div class="frow direction-reverse"> <div class="box-sample">sample1</div> <div class="box-sample">sample2</div> <div class="box-sample">sample3</div> </div>
.direction-column
flex-direction: column;で垂直に並びます。
HTML
<div class="frow direction-column"> <div class="box-sample">sample1</div> <div class="box-sample">sample2</div> <div class="box-sample">sample3</div> </div>
.direction-column-reverse
flex-direction: column-reverse;で.direction-columnとは逆向きに並びます。
HTML
<div class="frow direction-column-reverse"> <div class="box-sample">sample1</div> <div class="box-sample">sample2</div> <div class="box-sample">sample3</div> </div>
.direction-column-reverseのデモページ
.justify-start
水平方向の配置を始端に集める形になります。
justify-content: flex-start;です。
HTML
<div class="frow justify-start"> <div class="box-sample">sample</div> <div class="box-sample">sample</div> <div class="box-sample">sample</div> </div>
.justify-end
水平方向の配置を終端に集める形になります。
justify-content: flex-end;です。
HTML
<div class="frow justify-end"> <div class="box-sample">sample</div> <div class="box-sample">sample</div> <div class="box-sample">sample</div> </div>
.justify-center
水平方向の配置を中央に集める形になります。
justify-content: center;です。
HTML
<div class="frow justify-center"> <div class="box-sample">sample</div> <div class="box-sample">sample</div> <div class="box-sample">sample</div> </div>
.justify-between
水平方向の配置を均等配置(先頭と最後のアイテムは始端と終端に寄る)にします。
justify-content: space-between;です。
HTML
<div class="frow justify-between"> <div class="box-sample">sample</div> <div class="box-sample">sample</div> <div class="box-sample">sample</div> </div>
.justify-around
水平方向の配置を均等配置(先頭と最後のアイテムは端からスペースを取る)にします。
justify-content: space-around;です。
HTML
<div class="frow justify-around"> <div class="box-sample">sample</div> <div class="box-sample">sample</div> <div class="box-sample">sample</div> </div>
.items-start
垂直方向の配置を始端に集める形になります。
align-items: flex-start;です。
HTML
<div class="frow items-start"> <div class="box-sample">sample</div> <div class="box-sample">sample</div> <div class="box-sample">sample</div> </div>
.items-end
垂直方向の配置を終端に集める形になります。
align-items: flex-end;です。
HTML
<div class="frow items-end"> <div class="box-sample">sample</div> <div class="box-sample">sample</div> <div class="box-sample">sample</div> </div>
.items-center
垂直方向の配置を中央に集める形になります。
align-items: center;です。
HTML
<div class="frow items-center"> <div class="box-sample">sample</div> <div class="box-sample">sample</div> <div class="box-sample">sample</div> </div>
.items-stretch
各要素の垂直方向の高さを揃える形になります。
align-items: stretch;です。
HTML
<div class="frow items-stretch"> <div class="box-sample">sample</div> <div class="box-sample">sample</div> <div class="box-sample">sample</div> </div>
.items-baseline
垂直方向の配置をベースライン(テキストの1行目)を揃える形になります。
align-items: baseline;です。
HTML
<div class="frow items-baseline"> <div class="box-sample">sample</div> <div class="box-sample">sample</div> <div class="box-sample">sample</div> </div>
.content-start
.frowに余分なスペースがある場合に、アイテムを始端に詰めます。
align-content: flex-start;です。
HTML
<div class="frow content-start">
<div class="col-xs-1-4">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-4">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-4">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-3">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-3">
<div class="box-sample">sample</div>
</div>
</div>
.content-end
.frowに余分なスペースがある場合に、アイテムを終端に詰めます。
align-content: flex-end;です。
HTML
<div class="frow content-end">
<div class="col-xs-1-4">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-4">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-4">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-3">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-3">
<div class="box-sample">sample</div>
</div>
</div>
.content-center
.frowに余分なスペースがある場合に、アイテムを中央に詰めます。
align-content: center;です。
HTML
<div class="frow content-center">
<div class="col-xs-1-4">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-4">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-4">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-3">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-3">
<div class="box-sample">sample</div>
</div>
</div>
.content-between
.frowに余分なスペースがある場合に、均等配置(先頭と最後のアイテムは始端と終端に寄る)にします。
align-content: space-between;です。
HTML
<div class="frow content-between">
<div class="col-xs-1-4">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-4">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-4">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-3">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-3">
<div class="box-sample">sample</div>
</div>
</div>
.content-around
.frowに余分なスペースがある場合に、均等配置(先頭と最後のアイテムは端からスペースを取る)にします。
align-content: space-around;です。
HTML
<div class="frow content-around">
<div class="col-xs-1-4">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-4">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-4">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-3">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-3">
<div class="box-sample">sample</div>
</div>
</div>
.wrap
アイテムが多い場合に、1行に収めないで改行します。
flex-wrap: wrap;です。
HTML
<div class="frow wrap">
<div class="col-xs-1-4">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-4">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-4">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-3">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-3">
<div class="box-sample">sample</div>
</div>
</div>
.wrap-reverse
.wrapと同じですが、並び順が逆になります。
flex-wrap: wrap-reverse;です。
HTML
<div class="frow wrap-reverse">
<div class="col-xs-1-4">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-4">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-4">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-3">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-3">
<div class="box-sample">sample</div>
</div>
</div>
.nowrap
アイテムが多い場合に、改行しないで1行に収めます。
flex-wrap: nowrap;です。
HTML
<div class="frow nowrap">
<div class="col-xs-1-4">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-4">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-4">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-4">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-4">
<div class="box-sample">sample</div>
</div>
<div class="col-xs-1-4">
<div class="box-sample">sample</div>
</div>
</div>
.inline
.frowがインライン要素になります。
display: inline-flex;です。
HTML
<span>inline element</span> <div class="frow inline"> <div class="box-sample">sample</div> <div class="box-sample">sample</div> <div class="box-sample">sample</div> </div> <span>inline element</span>
Form
Form関連で使用できるレイアウトをみてみます。
HTML
<label>
Name
<input type="text" placeholder="Placeholder Text">
</label>
<label>
Zipcode
<input type="tel" maxlength="5">
</label>
<label class="column-center">
Label pattern2
<input type="text">
</label>
<label class="row-start">
Label pattern3
<input type="text">
</label>
<label>
Dropdown
<select>
<optgroup label="Group 1">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</optgroup>
</select>
</label>
<label class="row-start">
<input type="checkbox">
Option 1
</label>
<label class="row-start">
<input type="checkbox">
Option 2
</label>
<label class="row-start">
<input type="checkbox" disabled>
Option 3
</label>
<label class="row-start">
<input type="radio" name="group-one" checked>
Option 1
</label>
<label class="row-start">
<input type="radio" name="group-one">
Option 2
</label>
<label class="row-start">
<input type="radio" name="group-one" disabled>
Option 3
</label>
<label>
File
<input type="file">
</label>
<label>
Range
<input type="range">
</label>
<label>
textarea
<textarea></textarea>
</label>
<div class="frow justify-around">
<button class="col-xs-3-10">Regular</button>
<button class="col-xs-3-10" disabled>Disabled</button>
<a type="button" class="col-xs-3-10">Anchor</a>
</div>
カスタマイズする場合はclassを別途付与して上書きすればOKです。
HTML
<label>
Name
<input type="text" placeholder="Placeholder Text" class="input-custom">
</label>
<label>
Dropdown
<select class="select-custom">
<optgroup label="Group 1">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</optgroup>
</select>
</label>
<div class="frow justify-around">
<button class="col-xs-3-10 btn-custom">Regular</button>
</div>
CSS
.input-custom {
border-bottom-color: #E74C3C;
}
.select-custom {
color: #ffffff;
background-color: #E74C3C;
}
.btn-custom {
border-color: #E74C3C;
color: #ffffff;
background-color: #E74C3C;
}
その他
GridとForm以外で用意されているclassをみてみます。
Clickable/Not-Clickable
要素をクリッカブルにしたり、リンクを非クリッカブルにします。
onclick属性のついている要素は自動でクリッカブルになります。
HTML
<span class="clickable">clickable</span> <span onclick="">onclick</span> <a href="http://frowcss.com" class="not-clickable">not-clickable</a>
Full Height
高さを100%にします。
画面いっぱいの高さにしたい場合、htmlとbodyにも.height-100を指定します。
HTML
<html class="height-100"> <body class="height-100"> <div class="height-100"></div> </body> </html>
Full Width
幅を100%にします。
HTML
<div class="width-100">Full Width</div>
Drop Shadow
ドロップ車道を追加します。
明るい背景用と暗い背景用の2種類が用意されています。
HTML
<div class="frow"> <div class="shadow-sample card-shadow">.card-shadow</div> </div> <div class="frow"> <div class="shadow-sample dark-card-shadow">.dark-card-shadow</div> </div>
Text Transform
テキストの大文字・小文字を変換します。
HTML
<div class="uppercase">Hello world</div> <div class="lowercase">Hello world</div> <div class="capitalize">Hello world</div>
Clearfix
Frow内ではdisplay: flex;を使用していますが、float用にclearfixも用意されています。
HTML
<div class="clearfix"> <div style="float: left;">float text</div> </div> <p>After float</p>
【参考サイト】
コメントが承認されるまで時間がかかります。