【HTML】CSSを使ってひと工夫。3

下のように、クリック(若しくはタップ)すると表示が変わる方法をお教えします。




ここをクリック



ここをクリック





使い道がそんなに無いかと思いますが……





第一弾はこちら


第二弾はこちら

のように、リンクを適用させるといいかもしれません。





まずはCSS。



#u_result em:hover{
display:inline-block;
line-height:1.5;
padding:2px 10px;
background-color:rgba(255,255,255,0);
color:#996600;
border-bottom:3px dashed #440000;
font-size:150%;
}


そしてHTML。


〈em〉ここにテキストなど。〈/em〉



〈〉を＜＞に変えて使ってください。





応用しよう





今回は、私が例に示したように下線をつけるのもいいですし、シンプルに文字色を変えたり、背景を変えたりするだけでもオシャレになるので、工夫し放題です。



#u_result em:hover{

display:inline-block;/*ここから2つは変えない*/

line-height:1.5;

padding:2px 10px;/*上下左右の空白*/

background-color:rgba(255,255,255,0);/*背景色(今は透明)*/

color:#996600;/*文字色(今は茶色)*/

border-bottom:3px dashed #440000;/*下線(太さ 種類 色)*/

font-size:150%;/*文字の大きさ(通常時100%)*/

}



なので、例えば

#u_result em:hover{
display:inline-block;
background:linear-gradient(transparent 60%, #FFABCE 60%);
font-size:110%;
}

とすれば、クリック時にピンクのマーカーが出てくるデザインにもできます。

例です

例です

ちょっとオシャレなボタンを作ってみよう






Click here!


のように、ボタンを作って、そこにリンクを適用させる方法をお教えします。



押すのが楽しくなりますね。






まずはCSS。


#u_result s{display:inline-block;
padding: 0.5em 1em;
text-decoration:none;
line-height:1.5;
background-color:#A7F1FF;
box-shadow:0px -3px 10px #87CEEB inset;
border-redius:3px;
}

#u_result s:active{
display:inline-block;
position:relative;
bottom:-3px;
line-height:1.5;
padding: 0.5em 1em;
text-decoration:none;
background-color:#A7F1FF;
box-shadow:0px -3px 10px #87CEEB inset,0px 5px 5px -2px #A9A9A9;
border-radius: 3px;
}





そしてHTML。

〈s〉ここにテキスト〈/s〉




応用しよう





#u_result s{

display:inline-block;/*ここから4つは変えない*/

padding: 0.5em 1em;

text-decoration:none;

line-height:1.5;

background-color:#A7F1FF;/*背景色(今は水色)*/

box-shadow:0px -3px 10px #87CEEB inset;/*影の色(内側)*/

border-radius: 3px;/*角の丸み*/

}


#u_result s:active{

display:inline-block;/*ここから6つは変えない*/

position:relative;

bottom:-3px;

line-height:1.5;

padding: 0.5em 1em;

text-decoration:none;

background-color:#A7F1FF;/*背景色(上におなじ)*/

box-shadow:0px -3px 10px #87CEEB inset,0px 5px 5px -2px #A9A9A9;/*影の色(内側、外側)*/