main背景色など枠
最終更新:2021/07/12
cssはmain.cssを使用しています。
BOX：薄グレー幅広
border-box
html
|
1 2 3 4 5 6 7 |
<div class="border-box"> <div class="row"> <div class="col-12"> <p>border-box</p> </div> </div> </div> |
css
|
1 2 3 4 5 6 7 8 |
.border-box { width: 100%; height: auto; padding: 16px; border: 8px solid #eee; margin-bottom: 10px; box-sizing: border-box; } |
BOX：グレー線
border-box2
html
|
1 2 3 4 5 6 7 |
<div class="border-box2"> <div class="row"> <div class="col-12"> <p>border-box2</p> </div> </div> </div> |
css
|
1 2 3 4 5 6 7 |
.border-box2 { width: 100%; height: auto; padding: 16px; border: 2px solid #ccc; margin-bottom: 10px; } |
イエロー
yellow-box
html
|
1 2 3 4 5 6 7 |
<div class="yellow-box"> <div class="row"> <div class="col-12"> <p>yellow-box</p> </div> </div> </div> |
css
|
1 2 3 4 5 6 7 |
.yellow-box { width: 100%; height: auto; padding: 16px; background-color: #fff799; margin-bottom: 10px; } |
グレー
gray-box
html
|
1 2 3 4 5 6 7 |
<div class="gray-box"> <div class="row"> <div class="col-12"> <p>gray-box</p> </div> </div> </div> |
css
|
1 2 3 4 5 6 7 |
.gray-box { width: 100%; height: auto; padding: 16px; background-color: #eeeeee; margin-bottom: 10px; } |
ピンク
pink-box
html
|
1 2 3 4 5 6 7 |
<div class="pink-box"> <div class="row"> <div class="col-12"> <p>pink-box</p> </div> </div> </div> |
css
|
1 2 3 4 5 6 7 |
.pink-box { width: 100%; height: auto; padding: 16px; background-color: #F8ABAE; margin-bottom: 10px; } |
ブルー
Blue-box
html
|
1 2 3 4 5 6 7 |
<div class="Blue-box"> <div class="row"> <div class="col-12"> <p>Blue-box</p> </div> </div> </div> |
css
|
1 2 3 4 5 6 7 |
.Blue-box { width: 100%; height: auto; padding: 16px; background-color: #8ED6F9; margin-bottom: 10px; } |
グリーン
green-box
html
|
1 2 3 4 5 6 7 |
<div class="green-box"> <div class="row"> <div class="col-12"> <p>green-box</p> </div> </div> </div> |
css
|
1 2 3 4 5 6 7 |
.green-box { width: 100%; height: auto; padding: 16px; background-color: #bae0a8; margin-bottom: 10px; } |
左線グレー
gray-left-line
html
|
1 2 3 4 5 6 7 |
<div class="gray-left-line"> <div class="row"> <div class="col-12"> <p>gray-left-line</p> </div> </div> </div> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.gray-left-line { width: 100%; height: auto; margin-bottom: 10px; padding-top: 16px; padding-right: 16px; padding-bottom: 16px; padding-left: 28px; border-left-width: 5px; border-left-style: solid; border-left-color: #eeeeee; } |
チェックボックス
- チェックボックス
- チェックボックス
html
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="pcheck"> <div class="pcheck-box"> <div class="row"> <div class="col-12"> <ol> <li>チェックボックス</li> <li>チェックボックス</li> </ol> </div> </div> </div> </div> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.pcheck { width: 100%; padding: 10px; background-image: url(../images/slash.gif); background-repeat: repeat; } .pcheck-box { padding: 20px; width: 100%; background-color: #FFF; } .pcheck ol li{ background-image: url("../images/checkbox.gif"); background-repeat: no-repeat; background-position: left 10px; margin-bottom: 15px; padding-left: 30px; list-style-type: none; font-size: 1.4rem; font-weight: bold; border-bottom: 1px #ccc dotted; } |