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

今日:1 hit、昨日:0 hit、合計:1,439 hit

CSS 今回は、クリック時に使えるひと工夫デザインを紹介します。

使い道は少ないかもしれませんが、これを使うと本格的で楽しいです。

ただ、デフォルトだとクリック時には文字の下に下線が表示されてしまうので、それを無くすために

a:hover{text-decoration:none;}

を入れてください。

使用報告と作者明記の必要なし。改変自由。

再配布は改変後のみ可能です。その際はコメントを残してください。

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

ここをクリック

ここをクリック

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

第一弾はこちら

第二弾はこちら

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

まずは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;/*影の色(内側、外側)*/

ホムペを作る｜感想を書く
 他の作品を探す

おもしろ度を投票
( ← 頑張って！｜面白い！→ )