●囲んだ範囲をボックスにする拡張書式
ひとかたまりの文として目立たせたい一文をボックスにして中央に表示する拡張書式
code:style.css
.line .deco > .empty-char-index {
display: none;
}
@media screen and (min-width: 1092px) {
:root {
--col-page-width: 960px;
--wordbox-width: calc(var(--col-page-width) * 0.7);
}
}
@media screen and (min-width: 768px) and (max-width: 1091px) {
:root {
--col-page-width: calc(100vw - 132px);
--wordbox-width: calc(var(--col-page-width) * 0.7);
}
}
@media screen and (max-width: 767px) {
:root {
--wordbox-width: 90%;
}
}
display: block;
width: var(--wordbox-width);
max-width: 100%;
border: 1px solid rgba(0,0,0,0.2);
box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
margin: 10px auto;
padding: 10px;
}
備考
囲んだ範囲をブロックにしてしまうので、行中の一部分だけを囲むと構造が非常にわかりにくくなります
前後は改行して囲みの部分は単独の行にすることを推奨
なおインデントしていくと右からはみ出るのでインデント非推奨 直しました。
当方の都合により[,+ hogehoge]に対して適用
例えばもし[+ hogehoge]に設定するなら、.line [class^="deco-\, deco-\+"]を.line .deco-\+に変えてください
.line .deco > .empty-char-index {display: none;}の影響を検証しきれていない
多分大丈夫だと思うけど…
目的はブロックにした時に上下に余計に生まれる余白を消すこと
カスタムプロパティ（変数）--col-page-width及び--wordbox-widthについて
エディタ部分の幅はウインドウサイズの幅1092pxと768pxを境に計算が変わる
それに合わせてボックスの幅を変動させるために記述
計算の意味を明解にするために二段階で表記
/icons/水平線.icon
エディタ部分の幅の計算が変わっているため
code:style2.css
.line .deco > .empty-char-index {
display: none;
}
@media screen and (min-width: 768px){
:root {--wordbox-width: calc(calc(55vw + 60px) * 0.7);}
}
@media screen and (max-width: 767px){
:root {--wordbox-width: 90%;}
}
display: block;
width: var(--wordbox-width);
max-width: 100%;
border: 1px solid rgba(0,0,0,0.2);
box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
margin: 10px auto;
padding: 10px;
}
備考
カスタムプロパティ（変数）--wordbox-widthについて
スマホではもっと広く表示されたほうが良いので分けて記述