サイトに付箋をつけたような表現にする重要な事項は、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は、次のようにします。<a class="fusen0 tag">付箋</a>もっと付箋らしく余白をつけたいという場合は、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 にしたので次のように直します。<a class="fusen1 tag">付箋</a>すると付箋をつけるのように大きくなります。付箋の色を変えたい場合は、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は、次のようにします。宮城県 <span class="mondai1" ontouchstart="">仙台</span>石川県 <span class="mondai1" ontouchstart="">金沢</span>愛知県 <span class="mondai1" ontouchstart="">名古屋</span>島根県 <span class="mondai1" ontouchstart="">松江</span>愛媛県 <span class="mondai1" ontouchstart="">松山</span>もちろん、穴埋め式問題を作ることもできます。山梨県の県庁所在地は、甲府 です。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も次のようにします。香川県の県庁所在地は、<span class="mondai1" ontouchstart="">高松</span>ポイント！カーソルが置かれると変更となるようにするには、通常 hover を使いますが、これだけですと、PCは反応するものの、タブレットやスマホでは反応しません。そこで、タブレットやスマホではタップしたときに、表示が変更されるように、<span class="mondai1" ontouchstart="">のように、赤字部分を追記することによって、タブレットやスマホでも反応するようになります。
