cssnitelp39 morita 04 · //** number of columns in the grid. @grid-columns: 12; //** padding...
TRANSCRIPT
![Page 1: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/1.jpg)
![Page 2: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/2.jpg)
わたしの理想は ...わたしの
理想は…
![Page 3: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/3.jpg)
![Page 5: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/5.jpg)
![Page 6: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/6.jpg)
![Page 7: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/7.jpg)
![Page 8: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/8.jpg)
![Page 9: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/9.jpg)
![Page 10: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/10.jpg)
![Page 11: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/11.jpg)
![Page 12: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/12.jpg)
![Page 13: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/13.jpg)
![Page 14: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/14.jpg)
![Page 15: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/15.jpg)
<div class="row"> <div class="col-xs-12 col-sm-6 col-md-4">カラム</div> </div>
![Page 16: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/16.jpg)
<div class="row"> <div class="col-sm-9 col-sm-push-3">メイン</div> <div class="col-sm-3 col-sm-pull-9">サブ</div> </div>
![Page 17: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/17.jpg)
//** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;
![Page 18: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/18.jpg)
//** Number of columns in the grid. @grid-columns: 12;
![Page 19: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/19.jpg)
//** Number of columns in the grid. @grid-columns: 16;
![Page 20: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/20.jpg)
![Page 21: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/21.jpg)
![Page 22: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/22.jpg)
![Page 23: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/23.jpg)
.form { width: 60%; } .btn { width: 40%; }
![Page 24: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/24.jpg)
.parent { display: table; width: 100%; } .form { display: table-cell; width: 100%; } .btn { display: table-cell; width: 1%; white-space: nowrap; }
![Page 25: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/25.jpg)
![Page 26: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/26.jpg)
.parent { display: table; width: 100%; } .form { display: table-cell; width: 100%; } .btn { display: table-cell; width: 1%; }
![Page 27: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/27.jpg)
.parent { display: table; width: 100%; } .form { display: table-cell; width: 100%; } .btn { display: table-cell; width: 1%; white-space: nowrap; }
![Page 28: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/28.jpg)
![Page 29: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/29.jpg)
<div class="row"> <div class="hidden-xs">サブ</div> </div>
![Page 30: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/30.jpg)
![Page 31: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/31.jpg)
.parent { position: relative; padding-bottom: 56.25%; display: block; height: 0; padding: 0; overflow: hidden; } iframe { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; }
![Page 32: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/32.jpg)
![Page 33: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/33.jpg)
.parent { position: relative; padding-bottom: 56.25%; display: block; height: 0; padding: 0; overflow: hidden; } iframe { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; }
![Page 34: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/34.jpg)
.parent { position: relative; padding-bottom: 56.25%; display: block; height: 0; padding: 0; overflow: hidden; } iframe { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; }
![Page 35: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/35.jpg)
![Page 36: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/36.jpg)
![Page 37: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/37.jpg)
![Page 38: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/38.jpg)
![Page 39: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/39.jpg)
![Page 40: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/40.jpg)
![Page 41: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/41.jpg)
![Page 42: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/42.jpg)
![Page 43: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/43.jpg)
.btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent;
![Page 44: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/44.jpg)
![Page 45: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/45.jpg)
<div class="col-md-8"> …
</div>
.main { …
}
….….….….….….….….
….….….….….….….….
….….….….….….….….
….….….….….….….….
….….….….….….….….
![Page 46: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/46.jpg)
![Page 47: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/47.jpg)
![Page 48: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/48.jpg)
![Page 49: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/49.jpg)
![Page 50: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/50.jpg)
![Page 51: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/51.jpg)
![Page 52: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/52.jpg)
![Page 53: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/53.jpg)
![Page 54: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/54.jpg)
![Page 55: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/55.jpg)
![Page 56: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/56.jpg)
![Page 57: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/57.jpg)
![Page 58: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/58.jpg)
![Page 59: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/59.jpg)
![Page 60: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/60.jpg)
![Page 61: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/61.jpg)
![Page 62: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/62.jpg)
![Page 63: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/63.jpg)
![Page 64: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/64.jpg)
![Page 66: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/66.jpg)
![Page 67: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/67.jpg)
![Page 68: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/68.jpg)
![Page 69: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/69.jpg)
![Page 70: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/70.jpg)
@gutter: 20px; .acms-grid { margin-left: (@gutter / -2); margin-right: (@gutter / -2); } .acms-col-6 { width: 50%; padding-left: (@gutter / 2); padding-right: (@gutter / 2);
}
.acms-grid { margin-left: -10px; margin-right: -10px; } .acms-col-6 { width: 50%; padding-left: 10px; padding-right: 10px;
}
![Page 71: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/71.jpg)
@gutter: 20px; .acms-grid { margin-left: (@gutter / -2); margin-right: (@gutter / -2); } .acms-col-6 { width: 50%; padding-left: (@gutter / 2); padding-right: (@gutter / 2);
}
.acms-grid { margin-left: -10px; margin-right: -10px; } .acms-col-6 { width: 50%; padding-left: 10px; padding-right: 10px;
}
![Page 72: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/72.jpg)
@import "grid.less"; @import "button.less"; @import "type.less"; @import "code.less"; @import "form.less"; @import "table.less";
@import "thumbnails.less"; @import "navbar.less"; @import "sidebar.less"; @import "label.less";
acms.css
![Page 73: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/73.jpg)
@import "grid.less"; @import "button.less"; @import "type.less"; @import "code.less"; @import "form.less"; @import "table.less";
@import "thumbnails.less"; @import "navbar.less"; @import "sidebar.less"; @import "label.less";
acms.css
![Page 74: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/74.jpg)
//CSSにはコメントが入りません
.samplepleA { background: #000; } /*CSSにもコメントが入ります*/
.samplepleB { background: #FFF; }
.samplepleA { background: #000; } /*CSSにもコメントが入ります*/
.samplepleB { background: #FFF; }
![Page 75: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/75.jpg)
//CSSにはコメントが入りません
.samplepleA { background: #000; } /*CSSにもコメントが入ります*/
.samplepleB { background: #FFF; }
.samplepleA { background: #000; } /*CSSにもコメントが入ります*/
.samplepleB { background: #FFF; }
![Page 76: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/76.jpg)
![Page 77: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/77.jpg)
/* * acms.css Ver.2.0.0 (http://www.a-blogcms.jp) * Copyright a-blog cms | MIT License */ ……
![Page 78: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/78.jpg)
![Page 79: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/79.jpg)
![Page 80: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/80.jpg)
![Page 81: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/81.jpg)
![Page 82: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/82.jpg)
![Page 83: cssnitelp39 morita 04 · //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;](https://reader033.vdocuments.net/reader033/viewer/2022052019/60338508045ba44a3a6329f9/html5/thumbnails/83.jpg)