[旧]boxサンプル(2019/6)

旧S-box(シンプルボックス)

は廃止して、N-boxの追加クラスで表現。

2019/6/25にサンプル以外の全記事からS-boxを消去・置き換え済み

N-box(汎用ボックスに)

モバイル表示を管理しやすくするために、2019.9に内容に応じた可変式から幅を画面幅に応じた固定式に変えた(最大幅と最小幅を設定して調整)。

ノーマルN-box

これは無印のN-boxです。

CSSを見たい人はボックスをクリックして開いて下さい


/* 色設定 */
.N-box .box-title {color: #55a8f5;}/* タイトルの色 */
.N-box {border-color:#82c1fb;}/* ボーダーの色 */
.N-box:after{color:#82c1fb;}/* ロゴはボーダーと同色 */
.N-box {color:#6597c5;}/* ボックス内本文色(タイトル消去時) */
.N-box p {color:#6597c5;}/* ボックス内本文色 */
/* ボックス本体 */
.N-box {position: relative;
display: inline-block;/* 可変幅 */
min-width:280px;/* 最低幅 */
max-width: calc(100vw – 60px);/* 最大幅 */
background-color:#FFF5 ;
padding: 12px 16px 10px 16px;
border-style:solid;border-width:3px;
border-radius: 8px;margin: 10px 5vw 10px;
}
/* ボックス上辺の可編タイトル */
.N-box .box-title {position: absolute;
display: inline-block;
top: -13px;left: 10px;
padding: 2px 9px 0px 9px;
line-height: 1;font-size: 19px;
background: #FFF;font-weight: bold;
}
/* ボックス右下の固定ロゴ */
.N-box:after{position: absolute;
right: 8px;bottom: -6px;
background-color:#FFF ;
font-size:14px;font-weight: bold;
content: ‘SSHT’;/* ロゴ内容 */
padding: 0px 2px;line-height:1.0em;
z-index: 1;
}
/* ボックス内本文 */
.N-box p {margin: 0;padding: 0;
line-height:1.6em;
}

タイトルやロゴをとったバリエ

N-boxから単にタイトルを削除

CSSを見たい人はボックスをクリックして開いて下さい


/* ボックスの固定ロゴを消す */
.no-logo::after{display:none;}

画像ボックス用のバリエ

CSSを見たい人はボックスをクリックして開いて下さい


* 破線にする*/
.dashed {border-style:dashed ;}
.N-box.dashed {/* N-box破線は色を薄くする */
border-color:#bce;
}

C-box

筆算を表示する用のボックス

中に入れている文字のクラス「TB-line」(上線)と「BB-line」(下線)の使い方が混乱していてややこしくなっている。

本来は、すだれ算は「BB-line」、わり算は「TB-line」を用いる想定だった模様

C-box

現在運用中

2)300
2)150
3)  75
5)  25
5

4.7.6
21.)100.0.0
84.0.0
16.0.0
14.7.0
1.3.0
1.2.6
0.0.4
ソースコード

/* 色設定 */
.C-box {border-color: #ddd;/*枠線灰色*/
background-color:#FFF5 ;/* 背景を少し透過 */
/*color:#999;*//* 文字色は設定無し */
}
/* ボックス本体 */
.C-box {
text-align:right;/* 要素は右寄せ */
vertical-align: top;
line-height:1.6em;
position: relative;
display: inline-block;/* 可変幅 */
min-width:100px;/* 最低幅 */
padding: 10px 16px 10px 16px;
border-width:3px;
border-radius: 8px;
border-style:solid;
margin: 0px 0px 15px 5vw;
}
/* ボックス内本文 */
.C-box p {
margin: 0;
padding: 0;
}

C-boxA

C-boxの行間を詰めてコンパクトに。こちらを標準にしたい。

2)300
2)150
3)  75
5)  25
5

4.7.6
21.)100.0.0
84.0.0
16.0.0
14.7.0
1.3.0
1.2.6
0.0.

すだれ算は「BB-line」をわり算は「TB-line」を用いた例。行間は良い感じになったが、わり算の途中のTBは使いづらい…

どうするか?C-boxに追加クラスで「wari」とか「sudare」をつけるか?

2)300
2)150
3)  75
5)  25
5

4.7.6
21.)100.0.0
84.0.0
16.0.0
14.7.0
1.3.0
1.2.6
0.0.

 

C-box4(ネーミングをミスった)

無印C-boxの派生で他のボックスに入れて使うことを想定

小数の作り

(例)「1.234を分解する」

+1.234
+0.234
+0.034
+0.004
+1.234

上の例は「N-box」の最小幅を狭めにして、text-alignをcenterにしている。

 

ソースコード

/* ボックス本体 */
.C-box4 {position: relative;
display: inline-block;/* 可変幅 */
/*min-width:100px; 最低幅無し */
margin:0.5em;
border:dashed 3px #eef;border-radius:10px;
padding: 0.3em 1em;background-color:#fff5;
text-align:right;/* 要素は右寄せ */
vertical-align: top;
font-size:1.2em;line-height:1.4em;}

/* ボックス内本文 */
.C-box4 p {margin: 0;padding: 0;}

T-box(独立した内容)

シャドウで枠線を表現したBタイプは廃止してAタイプ復活させる

(タイトル)

これは無印のT-boxAです。

[su_spoiler title=”解答を表示” style=”fancy” icon=”chevron-circle” class=”std no-trn GMN”]

/* 色設定 */
.T-boxA .box-title,.box-footer {
color: rgba(255,255,255,0.9);/* タイトルは白 */
background:linear-gradient(to right,#6c5987, #523f6d 30%,#523f6d 70%,#6c5987);}/* タイトル背景色 */
.T-boxA {border-color:rgba(108, 89, 135, 0.8);}/* 本体ボーダー色は透明度を下げる */
.T-boxA:after{color:rgba(255,255,255,0.6);}/* 固定ロゴは白 */

/* ボックス本体 */
.T-boxA {
position:relative;
display: inline-block;/* 可変幅 */
min-width:300px;/* 最小幅 */
max-width: calc(100vw – 60px);/* 最大幅 */
text-align:center;/* 要素は中央寄せ */
background-color:#FFF ;
color:#000;
padding: 0px;
border-radius: 10px;
border-width:3px;
border-style:solid;
margin: 10px 5vw 20px 5vw;
}
/* 可編タイトル */
.T-boxA .box-title {
font-size: 1.1em;
border-radius: 7px 7px 0px 0px;
padding:6px 0px;
text-align: center;
font-weight: bold;
letter-spacing: 4px;
line-height: 1.2em;
}
/* 可編フッター */
.T-boxA .box-footer {
color:#c1bacc;
font-size: 0.8em;
border-radius: 0px 0px 7px 7px;
padding:6px 0.5em 4px;
text-align: right;
font-weight: bold;
letter-spacing: 0.05em;
line-height: 0.8em;
}

/* タイトル右上の固定ロゴ */
.T-boxA:after {
position: absolute;
right: 5px;
top: 1px;
font-size:12px;
font-weight: bold;
letter-spacing: 1px;
content: ‘SSHT’;/* ロゴの内容 */
padding-left: 0px;
z-index: 1;
}

/* ボックス本文 */
.T-boxA p {
display:inline-block;/* 本文も可変幅 */
text-align:left;/* 本文は左寄せ */
line-height:1.6em;
padding: 10px 30px 15px 30px;
margin: 0;
}

[/su_spoiler]

(タイトル)

T-boxAの下に可編フッターを追加

 

(タイトル)

追加クラス「logo2」で第二候補のロゴに

[su_spoiler title=”解答を表示” style=”fancy” icon=”chevron-circle” class=”std no-trn GMN”]

/* ボックスの固定ロゴを第2案に置き換え */
.logo2::after{content:”Zky*art”;}

[/su_spoiler]

L-boxA(軽い問題)

参考記事

これは無印のL-boxAです

[su_spoiler title=”解答を表示” style=”fancy” icon=”chevron-circle” class=”std no-trn GMN”]

/* 色設定 */
.L-boxA .box-title {
color: rgba(255, 255, 255, .9);/* ラベル文字色 */
background-color: #9681cc;/* ラベルの背景色は強め */
border-color:#a28dd8;}/* ラベルのボーダー同色 */
.L-boxA {border-color:#a28dd8;}/* 本文ボーダー同色 */
.L-boxA:after{
background-color: #a28dd8;/* ロゴ背景色同色 */
border-color: #a28dd8;/* ロゴボーダー同色 */
color:rgba(255, 255, 255, .7);/* 固定ロゴは白 */
}
.L-boxA {color:#6597c5;}/* ボックス内本文色 */

/* ボックス本体 */
.L-boxA {
position: relative;
vertical-align:top;
display: inline-block;/* 可変幅 */
min-width:200px;/* 最低幅 */
max-width: calc(100vw – 60px);/* 最大幅 */
background-color:#FFF5 ;
padding:7px 16px 8px 16px;
border-style:solid;/* ボーダー様式 */
border-width:3px;
border-radius:0 14px 14px;
margin: 25px 5vw 15px 5vw;
}
/* ボックス上辺の可編タイトル */
.L-boxA .box-title {
position: absolute;
display: inline-block;
top:calc( -1.0em – 10px);
left: -3px;
padding:3px 16px 1px 12px;
line-height: 1;
font-size: 1.0em;
letter-spacing: 0.1em;
font-weight: bold;
border-style:solid;
border-width:3px;
border-radius:16px 27px 0px 0px;
}
/* ボックス右下の固定ロゴ */
.L-boxA:after{
position: absolute;
right: -2px;
bottom: -3px;
line-height: 1;
font-size:10px;
font-weight: bold;
content: ‘SSHT’;/* ロゴ内容 */
border-width: 1px;
border-style: solid;
border-radius:16px 0px 16px 0px;/* 左上と右下は丸く */
padding:0px 4px 0px 8px;
letter-spacing: 0.1em;
z-index: 1;
}
/* ボックス内本文 */
.L-boxA p {
margin: 0;
padding: 0;
line-height:1.3em;
}

[/su_spoiler]

 

 

参考記事

追加クラス「weak」

[su_spoiler title=”解答を表示” style=”fancy” icon=”chevron-circle” class=”std no-trn GMN”]

/* 半透明にする(リンク無しを暗示) */
.weak{opacity:0.5;}

[/su_spoiler]

 

L-boxBとL-boxACは失敗作として削除

[su_spoiler title=”CSSを表示” style=”fancy” icon=”chevron-circle” class=”std no-trn GMN”]

/*———————————————–
ボックス> ラベル付きボックスB(ロゴを下に)
————————————————*/
/* 色設定 */
.L-boxB .box-title {
color: rgba(255, 255, 255, .9);/* ラベル文字色 */
background-color: #9681cc;/* ラベルの背景色は強め */
border-color:#a28dd8;}/* ラベルのボーダー同色 */
.L-boxB {border-color:#a28dd8;}/* 本文ボーダー同色 */
.L-boxB:after{
background-color: #a28dd8;/* ロゴ背景色同色 */
border-color: #a28dd8;/* ロゴボーダー同色 */
color:rgba(255, 255, 255, .7);/* 固定ロゴは白 */
}
.L-boxB {color:#6597c5;}/* ボックス内本文色 */

/* ボックス本体 */
.L-boxB {
position: relative;
display: inline-block;/* 可変幅 */
min-width:180px;/* 最低幅 */
max-width: calc(100vw – 60px);/* 最大幅 */
background-color:#FFF5 ;
padding:5px 5px 4px 16px;
border-style:solid;/* ボーダー様式 */
border-width:3px;
border-radius: 0 20px;/* */
margin: 20px 5vw 25px 5vw;
}
/* ボックス上辺の可編タイトル */
.L-boxB .box-title {
position: absolute;
display: inline-block;
top:calc( -1.0em – 10px);
left: -3px;
padding:3px 11px 1px 12px;
line-height: 1;
font-size: 1.0em;
letter-spacing: 0.1em;
font-weight: bold;
border-style:solid;
border-width:3px;
border-radius: 16px 16px 0px 0px;
}
/* ボックス右下の固定ロゴ */
.L-boxB:after{
position: absolute;
right: -3px;
top: 100%;
line-height: 1;
font-size:11px;
font-weight: bold;
content: ‘SSHT’;/* ロゴ内容 */
border-width: 3px;
border-style: solid;
border-radius:0px 0px 10px 10px;/* */
padding:0px 2px 0px 4px;
letter-spacing: 0.1em;
z-index: 1;
}
/* ボックス内本文 */
.L-boxB p {
margin: 0;
padding: 0;
}
/*———————————————–
ボックス> ラベル付きボックスC(要素を上に集める)
————————————————*/
/* 色設定 */
.L-boxAC .box-title {
color: rgba(255, 255, 255, .9);/* ラベル文字色 */
background-color: #9681cc;/* ラベルの背景色は強め */
border-color:#a28dd8;}/* ラベルのボーダー同色 */
.L-boxAC {border-color:#a28dd8;}/* 本文ボーダー同色 */
.L-boxAC:after{
background-color: #a28dd8;/* ロゴ背景色同色 */
border-color: #a28dd8;/* ロゴボーダー同色 */
color:rgba(255, 255, 255, .7);/* 固定ロゴは白 */
}
.L-boxAC {color:#6597c5;}/* ボックス内本文色 */

/* ボックス本体 */
.L-boxAC {
position: relative;
display: inline-block;
min-width: 200px;
max-width: calc(100vw – 60px);/* 最大幅 */
background-color: #fff5;
padding: 5px 7px 5px 16px;
border-style: solid;
border-width: 8px 3px 3px;
border-radius: 0px 0px 16px 16px;
margin: 20px 5vw 25px;
}
/* ボックス上辺の可編タイトル */
.L-boxAC .box-title {
position: absolute;
display: inline-block;
top:calc( -1.0em – 10px);
left: -3px;
padding:3px 16px 1px 9px;
line-height: 1;
font-size: 1.0em;
letter-spacing: 0.1em;
font-weight: bold;
border-style:solid;
border-width:3px;
border-radius:16px 27px 0px 0px;
}
/* ボックス右下の固定ロゴ */
.L-boxAC:after{
position: absolute;
right: -3px;
top: -16px;
line-height: 1;
font-size: 10px;
font-weight: 700;
content: ‘SSHT’;
border-width: 3px 1px 0px 1px;
border-style: solid;
border-radius: 17px 11px 0px 0px;
padding: 0 7px 0 18px;
letter-spacing: .1em;
z-index: 1;
}
/* ボックス内本文 */
.L-boxAC p {
margin: 0;
padding: 0;
}

[/su_spoiler]

新S-box(Speech-box)

爽茶そうちゃ
これはS-box1です。人物の図の右に吹き出ます。
ある程度の可変幅です。
これはS-box2です。人物の下に配置して長い文章を囲みます。囲みます。囲みます。囲みます。囲みます。囲みます。囲みます。囲みます。囲みます。囲みます。囲みます。囲みます。囲みます。囲みます。囲みます。
これもある程度の可変幅です。
タイトルとURLをコピーしました