この記事は、ボックスデザインの検討と参照用のページです。
算数記事の設問用ボックスは「算数記事サンプル」の方に
目次(クリックでジャンプ)
シンプルなボックス
「S-box」
と追加クラス(廃止済み)
ボックスは基本的に可変幅で、最小幅300px、最大左右マージン5vwです。
シンプルボックス「S-box」です。
ここに内容を書きます。
ここに内容を書きます。んんんんんんんんんんんんんんんんんんんんんんんんんんんんんんんんんんんんんんんんんんんんんんんんんんんんんんんんん
最大幅は左右マージン5vwまでです。
「N-box dashed no-logo」です。
ここに内容を書きます。
可変幅です。
追加クラス「dashed」を追加
「S-box weak」です。
追加クラス「weak」を追加
これは
幅狭のシンプル
ボックス
「S-box nrw」
です。
最小幅を0にする
追加クラス
「nrw」
を
追加。
ここから
3つは
<div>でなく
<span>で
配置し
vertical-
alignを
topに
しています
これは
右寄せの
シンプル
ボックス
「S-box nrw right」
です。
わり算等用の
右寄せの
表示に使う
追加クラス
「right」
を追加します。
「C-box」を
作成したので
使用しません
さらに
追加クラス
「dashed」
を
追加
します
。
「S-box blk」追加クラス「blk」で幅300px固定のブロック表示になり、必ず改行されて縦並びになる。
追加クラス「blk」2個目
追加クラス「blk」3個目
幅広シンプルボックス「S-box wide」です。
追加クラス「wide」を追加します
横幅一杯の固定幅になります
グリンモニタ風シンプルボックス「S-box GMn」です。
追加クラス「GMn」を追加すると
グリーンモニタ風になります。border-colorをもとのままにしたら、偶然、縁のような効果が出ました。面白い…
(プラグイン「Shortcodes-Ultimate」に同じ名前の追加クラスを設定すると、そちらにも反映されてしまうので名前を変更。あちらは「GMN」にした)
「S-box」から独立した
筆算用のボックス
「C-box」
筆算用のボックス
「C-box」
右寄せです
3)18 27
3) 6 9
2 3
最小幅100pxで
右マージンは
ゼロです
3)18 27
3) 6 9
2 3
(最大公約数)
3×3
横に
並べることを
予定
しています。
3)18 27
3) 6 9
2 3
(最大公約数)
3×3
(最小公倍数)
3×3×2×3
各種の
タイトル付きボックス
タイトルボックス(T-box)
旧版A(アーカイブへ)
可変幅(最小幅350px最大幅左右30マージン)
サルワカさんはじめ各所から拝借したものを改造。
本文ブロック自体も可変幅で中央寄せされる。
本文からやや独立した内容を記入するのに適している。
タイトル周りのかみ合わせ?が悪く、環境によっては隙間が出来ていた。
新版B(稼働中)
borderを無しにして、
ぼかしの無いbox-shadowを内側に落として枠線代わりに。
タイトルは中央部を暗くグラデーションにして視線を誘導します。
タイトルは二段になっても大丈夫なように、line-heightを小さくして上下のパディングを設定。
これはタイトルボックスの改良版
「T-boxB」です。
追加クラス「nrw」で
最小幅0。但し
左右パディング30px
とタイトルの幅には
広がる
も大丈夫
追加クラス「no-logo」で固定ロゴが消え、
追加クラス「logo2」で第二固定ロゴに変更。
フッターを追加してみた。
クラス名”box-footer”
情報量が倍増
旧版Aの再検討
Bの輪郭(実はボックスシャドウ)が隠れたりする事があるので、
Aを再導入するか検討
タイトルのボーダー半径を、ボックスの「ボーダー半径-ボーダー太さ」にすれば隙間ができずにピッタリ収まるような気がした。
これは復活した旧タイトルボックス
「T-boxA」です。
フッターを追加できるようにした。
プラグインの紹介ができそうだ
しばらく観察してみる
→やはりタイトルとボーダーの間に隙間ができる気がする…
ネームボックス(N-box)
可変幅(最小幅300px最大幅左右マージン5vw)
タイトル・本文ともに左寄せ。
本文から少しそれた内容(余談)を記入するのに適している。
これは「ネームボックス(N-box)」です。
「N-box no-logo」です。
追加クラス「no-logo」で固定ロゴが消えます。
「N-box logo2」です。
追加クラス「logo2」で固定ロゴが第2案に変更されます。
最初の行
追加クラス
「nrw」で
最小幅0pxになるが
長いタイトルは
折り返されて
本文一行目が
かくされてしまう。
「N-box dashed」
追加クラス「dashed」で破線に
(パディングを少し調整する必要あり)
まとめボックス(M-box)
ネームボックスを改造中
これはまとめボックスです。
おそらく冒頭の記事まとめ専用
ロゴはこっちに固定
これはまとめボックスです。
タイトルを変えるとズレズレになる
ラベルボックス(L-boxA)
可変幅(最小幅300px、最大横マージン5vw)です。
サルワカさんはじめ各所からコピペした初版を改造。
border-radiusを場所により変えて、ラベルとボックスの接続をスムーズにしました。
本文から独立した内容でタイトルが重要でないもの(リンクなど)を記すのに適している。
(ここに内容を書きます)
これはラベルボックスです。
追加クラス「no-logo」で固定ロゴが消えます。
これはラベルボックスです。
追加クラス「logo2」で固定ロゴを第2案に変更できます。
これはラベルボックスです。
最小幅300pxで～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～す。
これはラベルボックスです。
追加クラス「dashed」を追加
これはラベルボックスです。
追加クラス「weak」を追加して
リンク無しを暗示します
これは
ラベルボックスB
ロゴを下側に
回しましてみた。
最小幅を
減らすべきかも
これはラベルボックスBです。
追加クラス「no-logo」で固定ロゴが消えるが
右下が不自然
これはラベルボックスCです。
要素を上に集めてみた。
border-radiusを場所により変えて、
ラベルとボックスの接続をスムーズにしました。
「no-logo」でロゴをなくすと右上が不自然。
「nrw」で最小幅0px
タイトル(ラベル)
がロゴの後ろに来てる
右のpaddingが？
HSL指定用の
カラーピッカー
CSS変数を使ってカラーの変更を簡単にしたいと思ってHSL指定でhueだけ変えてみたところ、妙に違和感がありました…
自分は色彩についてはPCCSの色相環を基準に考えていたのですが、chromeブラウザの「hue」の色相環の角度はPCCSとは異なっているようです。(Oの幅が狭くRPの幅が大きいなど)ので、調べてみました。
以前作ったPCCSの色相環を貼ってHueの数値を控えておく
PCCSトーンの色相環
メモ
やはり、角度(幅)が全然違いましたね。困った。これだと色相を少しずらす場合に、何か関数を噛ませないとダメということだろうか…面倒くさい
それと、各色相のVividトーンをピックしてみるとS(Satuation)は皆100%だったのがL(Luminance)は色相ごとに異なっているので、Hueだけを変えても不自然になるのは当然のことだった。
ということは、色相の角度と変異の角度を変数にして、hueで関数を作って、luminaceでも関数を作って…、ということかな？大変だｗ
まずはネットを漁ってみようという結論になりました。