目次(クリックでジャンプ)
2018年末に作成した
「タブ」スタイル
大問、小問を独立のボックスにして、問題番号がh3(大問)とh4(小問)の見出しになっている。解答のタブはただの修飾スタイル
これは導入文です。これは導入文です。これは導入文です。
例題1
見出し(問題番号)試作スタイルのうち、正式採用されたスタイルはCSS内で「QT30」にコピペされる。末尾に「a」「b」「c」を付けたものが実際のバリエーション。ただの「QT30」というスタイルは無いので注意
(1)htmlは「<h3 class=”QT30a” >タイトル</h3>」です。
(2)問題ボックスは新調した「Q-box2a」3px幅
(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幅になる。
解答
お分かりいただけたでしょうか？
では、類題で練習してみましょう！
類題1
類題は色違い！の「QT30b」です。
やっと色違いを作成できた。
(1)htmlは「<h3 class=”QT30b” >タイトル</h3>」です。
(2)問題ボックスも色違いの「Q-box2b」です。
やっと色違いを作成できた。
(1)htmlは「<h3 class=”QT30b” >タイトル</h3>」です。
(2)問題ボックスも色違いの「Q-box2b」です。
小問1
h4見出しも色違いの「QT40b」です。
解答
これは解説文です。これは解説文です。これは解説文です。これは解説文です。これは解説文です。これは解説文です。
hrのbefore要素は
角を丸めてborder
小問2
問題ボックスは色違いの「Q-box2b thin」
解答
これは解説文です。これは解説文です。これは解説文です。
これは解説文です。これは解説文です。これは解説文です。これは解説文です。これは解説文です。
hrのafterは高さ2pxで背景グラデ