投稿サンプル(算数記事2018末)

2018年末に作成した
「タブ」スタイル

大問、小問を独立のボックスにして、問題番号がh3(大問)とh4(小問)の見出しになっている。解答のタブはただの修飾スタイル
これは導入文です。これは導入文です。これは導入文です。

例題1

見出し(問題番号)試作スタイルのうち、正式採用されたスタイルはCSS内で「QT30」にコピペされる。末尾に「a」「b」「c」を付けたものが実際のバリエーション。ただの「QT30」というスタイルは無いので注意
(1)htmlは「<h3 class=”QT30a” >タイトル</h3>」です。
(2)問題ボックスは新調した「Q-box2a」3px幅

小問1

見出しで正式採用されたスタイルは「QT40」にコピペ。htmlは「<h4 class=”QT40a“>タイトル</h4>」問題ボックスは「Q-box2a thin」。2px幅になる。
解答

解答のタイトルはただの修飾スタイル。正式採用されたスタイルはCSS内で「AT70」にコピペ。htmlは「<div  class=”AT70″>解答</div>」

解答下はhrで区切り


小問2

問題ボックスは「Q-box2a thin」。2px幅になる。
解答

[su_spoiler title=”解説と解答を表示” style=”normal” icon=”chevron-circle” class=”std no-trn pale”]

これは解説文です。これは解説文です。これは解説文です。これは解説文です。これは解説文です。これは解説文です。

<hr class=”AE00″>[/su_spoiler]


お分かりいただけたでしょうか?
では、類題で練習してみましょう!

類題1

類題は色違い!の「QT30b」です。
やっと色違いを作成できた。
(1)htmlは「<h3 class=”QT30b” >タイトル</h3>」です。
(2)問題ボックスも色違いの「Q-box2b」です。

小問1

h4見出しも色違いの「QT40b」です。
解答

これは解説文です。これは解説文です。これは解説文です。これは解説文です。これは解説文です。これは解説文です。

hrのbefore要素は
角を丸めてborder


小問2

問題ボックスは色違いの「Q-box2b thin
解答

これは解説文です。これは解説文です。これは解説文です。

これは解説文です。これは解説文です。これは解説文です。これは解説文です。これは解説文です。

hrのafterは高さ2pxで背景グラデ


タイトルとURLをコピーしました