オンライン教材作成に。マウスオーバーで色が変わる暗記チェックの作り方

「Web上で暗記をチェックする教材が欲しくなった」という人へ。この記事ではCSSを作ってオンラインの暗記教材を作ってみます！

目次(クリックでジャンプ)

はじめの題材

はコレ。カッコの中を暗記するオンライのチェック教材にしたい(知識としては簡単過ぎますがｗ)。

歴史クイズ

❶鎌倉幕府を開いたのは(源頼朝)です
❷室町幕府を開いたのは(足利尊氏)です
❸江戸幕府を開いたのは(徳川家康)です

初期状態のHTMLはこんな感じ。「N-box」「box-style」というのは自作のスタイルです。

HTMLを表示

<div class=”N-box”>
<div class=”box-title”>歴史クイズ</div>
❶鎌倉幕府を開いたのは(源頼朝)です
❷室町幕府を開いたのは(足利尊氏)です
❸江戸幕府を開いたのは(徳川家康)です
</div>

チェックペン化

マウスオーバー(モバイルの場合はタッチ)すると答えが見えるタイプを作ります。

完成形はコレ

歴史クイズ

❶鎌倉幕府を開いたのは(源頼朝)です
❷室町幕府を開いたのは(足利尊氏)です
❸江戸幕府を開いたのは(徳川家康)です。

変化する色をCSS変数として設定

まず、ルートレベルで変化する色としてCSS変数「chk-col」を宣言し中身は透明(transparent)にしておきます。

CSSを表示

:root{–chk-col:transparent;}

暗記箇所を指定するクラスを設定

次に、チェックリストで消したい文字にクラス「chk-pen」を指定して、文字色(color)をCSS変数「chk-col」にします。

先程「chk-col」にはtransparentを代入したので、実際は透明になります。

CSSを表示

.chk-pen{color:var(–chk-col);}

こんな感じ(マウスオーバーしても透明のまま)。

歴史クイズ

❶鎌倉幕府を開いたのは(源頼朝)です
❷室町幕府を開いたのは(足利尊氏)です
❸江戸幕府を開いたのは(徳川家康)です

HTMLは以下の通り(この後も変わりません)

HTMLを表示

<div class=”N-box”>
<div class=”box-title”>歴史クイズ</div>
鎌倉幕府を開いたのは(<span class=”chk-pen”>源頼朝</span>)です
室町幕府を開いたのは(<span class=”chk-pen”>足利尊氏</span>)です
江戸幕府を開いたのは(<span class=”chk-pen”>徳川家康</span>)です。</div>{–chk-col:transparent;}

色が変わる仕組み(:hover)を設定

さらに、「chk-pen」の擬似クラス:hoverを作り、「chk-col」に透明ではない見える色(ここではred)を代入する。

CSSを表示

.chk-pen:hover{–chk-col:red;}

するとマウスオーバーで変数「chk-col」の中身が「transparent」から「red」に変わるので、消えていた文字が見えるという仕組みです。

歴史クイズ

❶鎌倉幕府を開いたのは(源頼朝)です
❷室町幕府を開いたのは(足利尊氏)です
❸江戸幕府を開いたのは(徳川家康)です。

HTMLを表示

<div class=”N-box”>
<div class=”box-title”>歴史クイズ</div>
❶鎌倉幕府を開いたのは(<span class=”chk-pen”>源頼朝</span>)です
❷室町幕府を開いたのは(<span class=”chk-pen”>足利尊氏</span>)です
❸江戸幕府を開いたのは(<span class=”chk-pen”>徳川家康</span>)です。</div>{–chk-col:transparent;}

全CSSを表示

/* チェックペン */
:root{–chk-col:transparent;}

.chk-pen{color:var(–chk-col);}
.chk-pen:hover{–chk-col:red;}

これでひとまず完成です！つぎはもっと便利にしていきます。

簡単にできるようにする

先程はカッコで囲ったところを「チェック加工」しましたが、もっと簡単に、普通に書いた文の好きなところを「チェック加工」して、しかも別の場所を加工したくなったらワンタッチで元に戻せるようにします。

二番目の題材はコレ。

執権(ブリタニカ国際大百科事典より引用)

鎌倉幕府で将軍を補佐し，幕政を統轄した職。源頼朝の死後，北条氏が台頭し義時が侍所別当和田義盛を滅ぼして，政所，侍所の両別当職を兼ね，幕府の実権を握って執権と称し，以後北条氏が世襲した。鎌倉幕府の事実上の最高責任者。 (→執権政治 )

前後にカッコをつける

クラス「chk-pen」をコピペして「chk-pen2」を作り改造します。

まず単語の前後(というか左右)に0.5文字分の空白(padding)を設定します。

さらに、positionをrelativeにしてから、疑似要素:beforeを作成し中身(content)に「(」を、疑似要素:afterには「)」を設定して、先程の空白に入るように位置を調整します。

これで「chk-pen2」を指定した部分はカッコに入って色が変わります。

北条氏が台頭し義時が侍所別当和田義盛を滅ぼして

↓

北条氏が台頭し義時が侍所別当和田義盛を滅ぼして

HTMLを見ると、カッコが付け加えられていないのが分かります。

HTMLを表示

北条氏が台頭し義時が侍所別当<span class=”chk-pen2″>和田義盛</span>を滅ぼして

CSSを表示

/* チェックペン2 */
:root{–chk-col:transparent;}

.chk-pen2{
display:inline-block;
position:relative;
padding:0px 0.8em;
color:var(–chk-col);}
.chk-pen2:before{
position:absolute;
top:-0.05em;left:0.2em;
content:”(“;
color:#333;}
.chk-pen2:after{
position:absolute;
top:-0.05em;right:0.2em;
content:”)”;
color:#333;}
.chk-pen2:hover{–chk-col:red;}