CSSでつくる付箋と暗記シート

サイトに付箋を貼ったような表現をしたい場合は、CSSを追記することで簡単にできます。

 

どのようなものになるのかというと、次のような感じになります。

 

将棋の駒の多くは、盤上に駒を並べた時、１つだけ自分と相手で違う駒がある場合がほとんどです。
それは王将（おうしょう）と玉将（ぎょくしょう）です。

 

通常は、段位や力量が優れた人、つまり上手（うわて）の人が、王将 を使用します。

 

この王将 を作ったのが、誰もが知る有名な戦国武将、豊臣秀吉 であるという説があります。

 

中国の将棋の駒は、「金」や「銀」といった宝物に関する名前がつけられていたことから、最も重要な宝石を意味する「玉」が２つありました。
豊臣秀吉 は、「玉よりも王がいい」 と片方を強引に「王」にしたのだと言われています。

 

 

付箋の実装のやりかた (CSS)

付箋の実装を、CSSを次のように追記することで行うことができます。
SIRIUS（シリウス）の場合でしたら、commonstyles.css の最後に追記すればいいでしょう。

 

付箋の長さは、文字に長さによって可変しますし、文字列が長い場合は、自動的に複数行表示されます。

 

 

padding: 1rem;　の部分の1rem の価を、大きくすれば付箋の上下幅が広がりますし、小さくすれば付箋の上下幅が小さくなります。

 

また、付箋の色を変えたいときは、 background: #ffffbb; の #ffffbb; （カラーコード部分） を変更すればOKです。

 

付箋の実装のやりかた (HTML)

付箋の実装で、CSSが完成したら、いよいよHTMLで付箋を好きな場所に貼ることができます。

 

HTMLで、付箋を貼りたい場所に次のように記載します。

 

 

結果は、ここに付箋で表示したい文字を記載

 

もし、付箋の上に文字を乗せたくなければ、「ここに付箋で表示したい文字を記載」という部分を、スペースだけ打ち込めば、
　　　　　　　　　　　　　　　　　　　　　　 のような感じになります。

サイトでクイズや問題を作るとき、穴埋め問題などがあったりします。

 

PCでカーソルを付箋の上にもっていくと、付箋がとれて正解がわかったり、黒塗りの部分がはがれて、黒塗りに隠れていた正解がでてくるといったものを作る方法をご紹介します。

 

まずは、付箋紙が貼られた穴埋め問題で、カーソルを置いたり、タップしたりすることにより付箋紙がはがれ、答えが表示されるといったものを解説していきます。

 

出来上がった感じはこんな感じになります。
試しに、PCの場合は付箋紙のところにカーソルを置いて、タブレットやスマホの場合は付箋紙をタップしてみてください。
答えが表示されます。

 

それぞれの国の首都は？

 

ノルウェー　　オスロ
フィンランド　　ヘルシンキ
スウェーデンの首都は、ストックホルム です。

 

 

付箋紙がはがれ答えが表示されるCSS

 

CSSは、次のように追加します。

 

 

付箋紙の大きさは、
padding: 1rem;
line-height:3em;
の部分で変更できます。

 

付箋紙の色は、
background-color:#ffffbb;
のカラーコード #ffffbb; を変更することで変えることができます。

 

付箋紙がはがれ答えが表示されるHTML

 

HTMLは、次のようにします。

 

 

タブレットやスマホでタップした時にも反応するように、ontouchstart="" の記載を追加しています。

 

例えば、付箋紙の色を #000000; にして大きさを調整すれば、付箋紙ではなく、暗記シートのような黒塗りの虫食いにすることもできます。

 

山梨県の県庁所在地は、甲府 です。

 

暗記シート風にする場合のCSS

 

暗記シート風にする場合のHTML