web屋の備忘録

ホームページ制作、webマーケティング、技術資料など

*

自分で作るグリッドシステム、「Gridpak」

   

webサイトをレスポンシブ対応にする場合、グリッドシステム(グリッドレイアウト)を導入すると作成しやすい。
CSSフレームワークとしては有名な「Bootstrap」がありますが、少しこだわったデザインにしたいときには、邪魔となるスタイリング記述もあります。
そんなときは、自分で定義できる「Gridpak」がおすすめ!

gridpak_com

作成したCSSの例

/*!
* Gridpak Beta CSS
*
* Generator - http://gridpak.com/
* Created by @erskinedesign
*/

/* Reusable column setup */
.col {
border:0px solid rgba(0,0,0,0);
float:left;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
-moz-background-clip:padding-box !important;
-webkit-background-clip:padding-box !important;
background-clip:padding-box !important;
}

/* 1. 4 Column Grid 0px - Infinity
-----------------------------------------------------------------------------

Span 1: 23.5%
Span 2: 49.0%
Span 3: 74.5%
Span 4: 100%

----------------------------------------------------------------------------- */

@media screen and (min-width: 0px) {

.col {
margin-left:2%;
padding:0 1.5%;
}

.row .col:first-child {
margin-left:0;
}

/*
Add your semantic classnames in alongside their corresponding spans here. e.g.

.span_3,
.my_semantic_class_name {
...
}
*/

.span_1 {
width:23.5%;
}
.span_2 {
width:49.0%;
}
.span_3 {
width:74.5%;
}
.span_4 {
margin-left:0;
width:100%;
}
}

 - 新着情報