web上で色んな方の開閉ボックスを参考にさせていただいて、自作の準備ができたので実装を始めます。
参考にさせて頂いた御サイト様(順不同)
「コビトブログ2」様
「Copypet」様
「サルワカ」様
「Webクリエイターボックス」様
目次(クリックでジャンプ)
試作版
「Copypet」様のアコーディオン(連動式の開閉ボックスセット)を単独版(スポイラー)へ改造
idが上のアイテムと被らないようにを変えないとダメなようだ。タイトル(ラベル)のCSSでpositionをabsolute、topとleftを0に設定したらピッタリおさまった。
テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
実装に向けて調整(2020.1)
ブラウザ上ではラベルの下に何故か<p></p>が入るのを解決したい→CSSでマージン0に
テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
実装テストA(クラス名splA)
テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
グリーンモニタのバリエーション(クラス名splG)
テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
コピペはできるが、AddQuickTagでの貼り付けが出来ない。テンプレートからの貼り付けは出来ました(ホ)
実装テストB(クラス名splB)
➊ラベル(タイトル)のpositionをabsoluteからrelativeに戻し、マイナスマージンで上に出来た余白を喰って上寄せ。
❷横にも伸縮するようにしたらデザインがすんなり決まった。
➌もともとのcopypetさんのデザインにあった開閉マークを改造して右端につけてみた。
これで一旦の完成として実戦に投入してみる。
実装テストC(2020.2.3)
数カ所に貼り付けてみたところ、本来の意味でのスポイラー(spl)と開閉ボックス(O-box)2つのデザインを分けないとダメなことに気づいた。
スポイラー(クラスspl3x)
ラベルpositionをabsoluteにして、全体のbottomに配置。中の文字は「▼」のみ
チェック状態ではtranslate-originを「center -0.3em」にしてから、translateのYを「-1」にして上下反転させて位置が少し上に上がるように。
クラスspl3a
通常の文章の後ろに置いた使用例
先行の文章。先行の文章。先行の文章。先行の文章。先行の文章。先行の文章。先行の文章。先行の文章。先行の文章。先行の文章。先行の文章。先行の文章(続きを見るには▼をクリック)
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
後続の文章。後続の文章。後続の文章。後続の文章。後続の文章。後続の文章。後続の文章。後続の文章。後続の文章。後続の文章。後続の文章。後続の文章。
クラスspl3b
図解タブの直後で使用
解説テキスト…解説テキスト…解説テキスト…解説テキスト…解説テキスト…解説テキスト…解説テキスト…解説テキスト…解説テキスト…解説テキスト…解説テキスト…解説テキスト…解説テキスト…
解説テキスト…解説テキスト…解説テキスト…解説テキスト…解説テキスト…解説テキスト…解説テキスト…解説テキスト…解説テキスト…解説テキスト…解説テキスト…
クラスspl3c
ヒントタブの直後で使用
解説テキスト…解説テキスト…解説テキスト…解説テキスト…解説テキスト…解説テキスト…解説テキスト…解説テキスト…解説テキスト…解説テキスト…解説テキスト…解説テキスト…解説テキスト…
解説テキスト…解説テキスト…解説テキスト…解説テキスト…解説テキスト…解説テキスト…解説テキスト…解説テキスト…解説テキスト…解説テキスト…解説テキスト…
練習問題のテンプレに使用
トップのマイナスマージンを小さく(-1.7em)、ボトムマージンを小さく(0.5em)した
類題2
公式が変わります。
N番目の数＝初めの数－{公差×(N-1)}
減っていく数列では、もとの公式
「N番目の数＝初めの数+{公差×(N-1)}」
のプラス(+)をマイナス(ー)に変えて、こうなります。
N番目の数＝初めの数－{公差×(N-1)}
初めの数＝98、公差＝3、N＝15 をこの公式に入れると、15番目の数＝98－3×(15-1)となります。
これを計算して、98-3×14＝98-42＝56になります(解答はクラス「A-Line2a」)。答: 56
●例題1
この機会に解答用の下線も改良(A-line3a)
掛け算を先に計算するのを忘れないように、カッコに入れると良いです。
(3×2)+5=6+5=11になります。11
●練問1-(1)
分数の場合は解答用の下線のバリエーション(A-line3b)
35×25=3×25×5=625になります。625
類題2-1
ヒント用に「spl3c」を作成した。色違い
❶上から1ケタの概数にするので、上から2ケタ目の百の位をゼロにします(目盛りは千刻み)
「切り捨てた数」は1000で「切り上げた数」は2000になります。
❷「切り捨てた数」1000と「切り上げた数」2000の「真ん中の数」は1500です。
❸「問題の数」1724は「真ん中の数」1500よりも上なので切り上げます。
切り上げるので答は2000です。2000
とりあえず、これで運用してみる
開閉ボックス(O-box1)
O-box1a