
重要な事項は、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="">
のように、赤字部分を追記することによって、タブレットやスマホでも反応するようになります。