Grid

グリッド

グリッドシステムのスタイルガイドです。 汎用性を考え本サイトでは１２グリッドを採用しております。 使用方法は以下のスタイルガイドをご参照ください。

※本ページのグリッドの「色」、「高さ」などのスタイルはインラインスタイルです。

1
<div class="g-rows">
        <div class="g-col__1" style="background: #2ECBA8;height:30px;text-align: center;">1</div>
    </div>
2
<div class="g-rows">
        <div class="g-col__2" style="background: #2ECBA8;height:30px;text-align: center;">2</div>
    </div>
3
<div class="g-rows">
        <div class="g-col__3" style="background: #2ECBA8;height:30px;text-align: center;">3</div>
    </div>
4
<div class="g-rows">
        <div class="g-col__4" style="background: #2ECBA8;height:30px;text-align: center;">4</div>
    </div>
5
<div class="g-rows">
        <div class="g-col__5" style="background: #2ECBA8;height:30px;text-align: center;">5</div>
    </div>
6
<div class="g-rows">
        <div class="g-col__6" style="background: #2ECBA8;height:30px;text-align: center;">6</div>
    </div>
7
<div class="g-rows">
        <div class="g-col__7" style="background: #2ECBA8;height:30px;text-align: center;">7</div>
    </div>
8
<div class="g-rows">
        <div class="g-col__8" style="background: #2ECBA8;height:30px;text-align: center;">8</div>
    </div>
9
<div class="g-rows">
        <div class="g-col__9" style="background: #2ECBA8;height:30px;text-align: center;">9</div>
    </div>
10
<div class="g-rows">
        <div class="g-col__10" style="background: #2ECBA8;height:30px;text-align: center;">10</div>
    </div>
11
<div class="g-rows">
        <div class="g-col__11" style="background: #2ECBA8;height:30px;text-align: center;">11</div>
    </div>
12
<div class="g-rows">
        <div class="g-col__12" style="background: #2ECBA8;height:30px;text-align: center;">12</div>
    </div>

その他組み合わせ例

2カラム
html_example <div class="g-rows"> <div class="g-col__1" style="background: #2ECBA8;height:30px;text-align: center;">1</div> <div class="g-col__11" style="background: #58EDCC;height:30px;text-align: center;">11</div> </div> html_example <div class="g-rows"> <div class="g-col__2" style="background: #2ECBA8;height:30px;text-align: center;">2</div> <div class="g-col__10" style="background: #58EDCC;height:30px;text-align: center;">10</div> </div>

9
3
<div class="g-rows">
        <div class="g-col__9" style="background: #2ECBA8;height:30px;text-align: center;">9</div>
        <div class="g-col__3" style="background: #58EDCC;height:30px;text-align: center;">3</div>
    </div>
4
8
<div class="g-rows">
        <div class="g-col__4" style="background: #2ECBA8;height:30px;text-align: center;">4</div>
        <div class="g-col__8" style="background: #58EDCC;height:30px;text-align: center;">8</div>
    </div>
5
7
<div class="g-rows">
        <div class="g-col__5" style="background: #2ECBA8;height:30px;text-align: center;">5</div>
        <div class="g-col__7" style="background: #58EDCC;height:30px;text-align: center;">7</div>
    </div>
6
6
<div class="g-rows">
        <div class="g-col__6" style="background: #2ECBA8;height:30px;text-align: center;">6</div>
        <div class="g-col__6" style="background: #58EDCC;height:30px;text-align: center;">6</div>
    </div>
7
5
<div class="g-rows">
        <div class="g-col__7" style="background: #2ECBA8;height:30px;text-align: center;">7</div>
        <div class="g-col__5" style="background: #58EDCC;height:30px;text-align: center;">5</div>
    </div>
8
4
<div class="g-rows">
        <div class="g-col__8" style="background: #2ECBA8;height:30px;text-align: center;">8</div>
        <div class="g-col__4" style="background: #58EDCC;height:30px;text-align: center;">4</div>
    </div>
9
3
<div class="g-rows">
        <div class="g-col__9" style="background: #2ECBA8;height:30px;text-align: center;">9</div>
        <div class="g-col__3" style="background: #58EDCC;height:30px;text-align: center;">3</div>
    </div>
10
2
<div class="g-rows">
        <div class="g-col__10" style="background: #2ECBA8;height:30px;text-align: center;">10</div>
        <div class="g-col__2" style="background: #58EDCC;height:30px;text-align: center;">2</div>
    </div>
11
1
<div class="g-rows">
        <div class="g-col__11" style="background: #2ECBA8;height:30px;text-align: center;">11</div>
        <div class="g-col__1" style="background: #58EDCC;height:30px;text-align: center;">1</div>
    </div>
4
4
4
<div class="g-rows">
        <div class="g-col__4" style="background: #2ECBA8;height:30px;text-align: center;">4</div>
        <div class="g-col__4" style="background: #58EDCC;height:30px;text-align: center;">4</div>
        <div class="g-col__4" style="background:#EFEFEF;height:30px;text-align: center;">4</div>
    </div>
3
5
4
<div class="g-rows">
        <div class="g-col__3" style="background: #2ECBA8;height:30px;text-align: center;">3</div>
        <div class="g-col__5" style="background: #58EDCC;height:30px;text-align: center;">5</div>
        <div class="g-col__4" style="background:#EFEFEF;height:30px;text-align: center;">4</div>
    </div>
2
5
2
<div class="g-rows">
        <div class="g-col__2" style="background: #2ECBA8;height:30px;text-align: center;">2</div>
        <div class="g-col__5" style="background: #58EDCC;height:30px;text-align: center;">5</div>
        <div class="g-col__5" style="background:#EFEFEF;height:30px;text-align: center;">2</div>
    </div>