ボックス
吹き出し＆枠線付き
タイトル
ここにコンテンツを入力します。
HTML
|
1 2 3 4 |
<div class="t-box"> <div class="tbox-title">ここにタイトルを入力します</div> <p>ここにコンテンツを入力します。</p> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
.t-box{ margin: 2em auto; border-radius:4px; max-width:600px; border:2px solid #5AC6D0; padding: 3.5em 2em 1.5em; position:relative; background-color: #FFFFEE; } .t-box .tbox-title{ background: #5AC6D0; color: #fff; font-weight: bold; font-size: 20px; padding: 5px; text-align: center; border-radius: 4px 4px 0px 0px; position:absolute; top:0; left:0; width:100%; } .tbox-title:before { position: absolute; top: 100%; left: 50%; border: solid transparent; content: " "; border-top-color: #5AC6D0; border-width: 10px; margin-left: -30px; } .t-box p { margin: 0; padding: 0; } |
端折れ
ここに文章
HTML
|
1 2 3 |
<div class="box3"> <p>ここに文章</p> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.box3{ width: 500px; position: relative; margin: 0 0 0 30px; padding: 35px 30px; } .box3{ background: #EADFF2; } .box3:before { content: " "; display: block; position: absolute; right: 0; bottom: 0; border-width: 0 35px 35px 0; border-style: solid; width: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); } .box3:before { background: #e3e3e3; border-color: #fff #fff #DCCBED #DCCBED; } |
枠線ずれ
sample text
HTML
|
1 |
<div class="mybox">sample text</div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.mybox{ background: none; border: 1px solid #3BCBDC; margin: 5px 10px; padding: 20px; position: relative; } .mybox:after{ background: #CBF1F5; content: ''; position: absolute; top: 5px; left: 5px; width: 100%; height: 100%; z-index: -1; } |
枠線ずれ（ストライプ）
sample text
HTML
|
1 |
<div class="mybox1">sample text</div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.mybox{ background: none; border: 1px solid #3BCBDC; margin: 5px 10px; padding: 20px; position: relative; } .mybox:after{ background: repeating-linear-gradient(-45deg, #A4E7EE, #A4E7EE 5px, #CFF2F6 0, #CFF2F6 10px); content: ''; position: absolute; top: 5px; left: 5px; width: 100%; height: 100%; z-index: -1; } |
タイトル付きボックス
タイトル付き吹き出しボックス
タイトル
ここにコンテンツを入力します。
|
1 2 3 4 |
<div class="line-dialogue"> <div class="box-title">タイトル</div> <p>ここにコンテンツを入力します。</p> </div> |
リスト
手紙風ボックス＋アイコン付きリスト
- ここにテキストを入力
- ここにテキストを入力
- ここにテキストを入力
HTML
|
1 2 3 4 5 6 7 8 9 |
<div class="list-box-2"> <!-- ここから下にリストを貼り付ける --> <ul class="list-4"> <li>ここにテキストを入力</li> <li>ここにテキストを入力</li> <li>ここにテキストを入力</li> </ul> <!-- ここから上にリストを貼り付ける --> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
.list-4{ list-style: none; padding:0; margin:0; } .list-4 li { border-bottom:2px dashed; border-color:#cdcdcd; position: relative; margin:0.5em 0 !important; max-width:500px; padding: 0 0 0.5em 1.4em; } .list-4 li:last-child{ border:none; } .list-4 li:before { font-family: "Font Awesome 5 Free"; content: "\f058"; color: #F8E469; font-weight: 900; position: absolute; left:0; } .list-box-2{ position: relative; max-width: 520px; margin: 0 auto 2em; padding: 1.5em; border: 10px solid transparent; border-radius: 4px; background: linear-gradient(#f9f9f9, #f9f9f9), repeating-linear-gradient(-45deg,#78C9EC, #78C9EC 3.25%,#fff 3.25%,#fff 4.25%,#CDC3F5 4.25%, #CDC3F5 7.5%,#fff 7.5%,#fff 8.5%); background-clip: padding-box, border-box; background-origin: border-box; } @media screen and (max-width: 768px){ .article ul, .article ol { padding-left: 0px; } } |
AddQuicktagの使い方
WordPressでボックスを使う場合は、プラグインAddQuicktagにHTMLを登録する。
