旧S-box(シンプルボックス)
は廃止して、N-boxの追加クラスで表現。
2019/6/25にサンプル以外の全記事からS-boxを消去・置き換え済み
N-box(汎用ボックスに)
モバイル表示を管理しやすくするために、2019.9に内容に応じた可変式から幅を画面幅に応じた固定式に変えた(最大幅と最小幅を設定して調整)。
CSSを見たい人はボックスをクリックして開いて下さい
タイトルやロゴをとったバリエ
N-boxから単にタイトルを削除
ロゴ無しN-box
追加クラス「no-logo」を付けた
タイトルを削除し、
追加クラス「no-logo」を付けた
CSSを見たい人はボックスをクリックして開いて下さい
画像ボックス用のバリエ
タイトルを削除し、
追加クラス「no-logo」「dashed」を付けた
色も薄くなって画像ボックスに使える
CSSを見たい人はボックスをクリックして開いて下さい
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 .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;
}
(タイトル)
T-boxAの下に可編フッターを追加
(タイトル)
追加クラス「logo2」で第二候補のロゴに
解答を表示
/* ボックスの固定ロゴを第2案に置き換え */
.logo2::after{content:”Zky*art”;}
L-boxA(軽い問題)
解答を表示
/* 色設定 */
.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;
}
解答を表示
/* 半透明にする(リンク無しを暗示) */
.weak{opacity:0.5;}
L-boxBとL-boxACは失敗作として削除
CSSを表示
/*———————————————–
ボックス> ラベル付きボックス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;
}
新S-box(Speech-box)
爽茶
これはS-box1です。人物の図の右に吹き出ます。
ある程度の可変幅です。
これはS-box2です。人物の下に配置して長い文章を囲みます。囲みます。囲みます。囲みます。囲みます。囲みます。囲みます。囲みます。囲みます。囲みます。囲みます。囲みます。囲みます。囲みます。囲みます。
これもある程度の可変幅です。