付箋を貼ったり、暗記シートを実装したりする

サイトに付箋をつけたような表現にする

重要な事項は、CSSをちょっと工夫すると、付箋を貼り付けたような表現にすることができます。

事例

黄色の付箋をつける

色違いで緑色の付箋をつける

青色の付箋もCSSのカラー追加で可能です。

目的に合わせて色違いの付箋を貼ることができます。赤色の付箋

付箋は言葉の長さにより自動的にその長さを変え、さらにより長い文になると自動的に改行され、付箋の高さも文字がきちんと収まるように自動的に高くなります。sample fusen

これらの付箋をつくるには、HTMLとCSSを追加します。

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

.fusen.tag {
display: inline-block;
text-decoration: none;
padding: 0.15rem;
background: #f7f7f7;
border-left: solid 6px #efcc4c;
color: #efcc4c;
font-weight: bold;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.22);
}
.fusen.green {
border-left-color: #58ad5a;
color: #58ad5a;
}
.fusen.blue {
border-left-color: #5bb1fc;
color: #5bb1fc;
}
.fusen.red {
border-left-color: #ff3c3c;
color: #ff3c3c;
}
.fusen.purple {
border-left-color: #7e5bfc;
color: #7e5bfc;
}

HTMLは、付箋を追加したい場所に、次のように記載します。

<a class="fusen tag">黄色の付箋に記載する文字</a>
<a class="fusen tag green">緑色の付箋に記載する文字</a>
<a class="fusen tag blue">青色の付箋に記載する文字</a>
<a class="fusen tag red">赤色の付箋に記載する文字</a>
<a class="fusen tag purple">紫色の付箋に記載する文字</a>

オーソドックスな付箋を貼ってみる

頭に縦線が入った付箋について紹介しましたが、オーソドックスな黄色い付箋についてもご紹介します。

このような付箋です。
付箋をつける

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

.fusen0.tag {
display: inline-block;
text-decoration: none;
padding: 0.15rem;
background: #ffffbb;
color: #000;
font-weight: bold;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.22);
}

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

もっと付箋らしく余白をつけたいという場合は、
padding: 0.15rem;の部分をpadding: 1rem;というように変更します。

.fusen1.tag {
display: inline-block;
text-decoration: none;
padding: 1rem;
background: #ffffbb;
color: #000;
font-weight: bold;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.22);
}

HTMLは、.fusen1.tag にしたので次のように直します。

すると
付箋をつける
のように大きくなります。

付箋の色を変えたい場合は、
background: #ffffbb;の部分のカラーコード（#ffffbb;）を変えれば、好きな色に変えることができます。

付箋にかかれた文字の色を変えたい場合は、 color: #000; の部分のカラーコード（#000）を変更します。

付箋を利用した、簡単な暗記シート（問題＆チェックコーナー）を作る

付箋を使って、次のようなコーナーをサイトの中に簡単につくることができます。

次の都道府県の県庁所在地は？

宮城県　　仙台
石川県　　金沢
愛知県　　名古屋
島根県　　松江
愛媛県　　松山

PCの場合は、付箋のところにカーソルを移動すると、答えが出てきます。
タブレットやスマホの場合は、付箋のところをタップすると、答えが出てきます。

これを作るには、

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

.mondai1{
display: inline-block;
text-decoration: none;
padding: 1rem;
background: #ffffbb;
color: #ffffbb;
font-weight: bold;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.22);
}
.mondai1:hover{
background-color:#fff;
color: #000;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.0);
}

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

宮城県　　仙台
石川県　　金沢
愛知県　　名古屋
島根県　　松江
愛媛県　　松山

もちろん、穴埋め式問題を作ることもできます。

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

CSSを変更して暗記用シート風にすることもできます。

香川県の県庁所在地は、高松です。

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

.mondai0{
font-size:18px;
background-color:#000000;
color: #000000;
padding: 0.3rem;
line-height:1.3em;
}
.mondai0:hover{
background-color:#fff;
color: #000;
}

HTMLも次のようにします。

香川県の県庁所在地は、高松

ポイント！
カーソルが置かれると変更となるようにするには、通常 hover を使いますが、これだけですと、PCは反応するものの、タブレットやスマホでは反応しません。
そこで、タブレットやスマホではタップしたときに、表示が変更されるように、

のように、赤字部分を追記することによって、タブレットやスマホでも反応するようになります。