グリッドシステムをa-blog cmsのユニットグループに使用する
グリッドシステムをa-blog cmsに使おうと思ったのは、会社でBootstrapのテーマを作るように言われた事がきっかけです。実はユニットグループではBootstrapのグリッドシステムを使う事ができなかったのですが、ここではBootstrapのテーマを作る上でとくに頑張ったユニットグループとグリッドシステムについて書きます。
さきほども書いたのですが、Bootstrapのグリッドシステムはa-blog cmsのユニットグループと考え方が違ったため、無理矢理使わず、自分で新しいものを作りました。
参考にしたグリッドシステム
Bootstrapのグリッドシステムが使えないとわかったとき、他のグリッドシステムを探す事から始めました。なかなかa-blog cmsと仲良くやってくれそうなグリッドシステムがなかったのですが、数多くあるグリッドシステムの中でもSimple Gridという違うグリッドシステムを参考に作りました。
Simple Grid
具体的な方法
Simple Grid はその名の通りとてもシンプルなグリッドシステムです。ソースコードを見てもとても簡単なので、参考にしやすかったです。本当は他にも必要なclassはあったのですが、私が参考にしたところはこの一部になります。
/* 参考にしたSimple gridのソースコードの一部 */
.col-6-12 {
width: 50%;
}
[class*='col-'] {
float: left;
padding-right: 20px;
}
*:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
他のフレームワークとSimple Gridの違うところ
大きいのは1つのボックスに左のパディングではなく、右にパディングを採用しているところです。
それのなにが良いのかというと、実はa-blog cmsのユニットグループでは右にマージンを逃がす方法を採用しています。
それに対してほとんどのグリッドシステムが使っている方法
- 左にマージンを逃がす方法を採用している
- :first-childを使って最初の要素のマージンを消している
右にマージンを逃がすことのできる方法の利点
- もともとa-blog cmsは右にマージンを逃がす方が扱いやすい
- 「:first-child」の役割は端っこのマージンを無くすためのものなので、右マージンを逃がす方法で「:first-child」は使わなくて済むようになる
最終的なソースコード
/* a-gridのソースコードの一部 */
[class*='a-grid'] {
float: left;
margin-bottom: 20px;
}
.row-fluid div.a-grid12 {
width: 100%;
}
.row-fluid div.a-grid6 {
width: 50%;
}
.row-fluid div.a-grid4 {
width: 33.33%;
}
.row-fluid div.a-grid3 {
width: 25%;
}
.row-fluid div.a-grid3 img,
.row-fluid div.a-grid4 img,
.row-fluid div.a-grid6 img,
.row-fluid div.a-grid12 img {
width: 100%;
max-width: 100%;
padding-right: 20px;
height: auto;
display: block;
}
.entry p,
.entry h2,
.entry h3,
.entry h4,
.entry h5,
.entry ul,
.entry ol,
.entry pre,
.entry blockquote,
.entry table {
margin-right: 20px;
}
class名は社内で検討し、「a-grid」になりました。a-gridがSimple Gridと違うところは、右マージンをdivにつけていないところです。divの代わりに各要素につけています。
最後に
はじめに作ろうとしたときにユニットグループがBootstrapのグリッドシステムと相性が悪くて焦った事もありましたが、なんとかここまで形にできてよかったです。大変だったところもありましたが、自分でどうしたらユニットグループでグリッドシステムが使えるようになるのかを考えて作業をしていくのがすごく楽しかったです。
試験的にですが、このブログでもBootstrapのテーマを使い始めました。実際に使い始めると気になるところが増えてきて、今日もちょこちょこ直したりしていました。とくにお気に入りなのがログインページなのですが、Bootstrapのフォントと入力欄をクリックしたときの色がとてもきれいです。Bootstrapのテーマを配布するかどうかはまだ決まっていませんが、気になる方は画面を縮めてみたり、ログインのエラーを出してみたり遊んでみてください！
森田かすみ
