マイクロインタラクション講座

パソボラ主催のHP講習会でtransitionプロパティを使って柔らかく変化させる方法の紹介がありました。Jimdoでは管理メニュー→デザイン→独自レイアウトからCSSを設定しますが、共用のCSSを汚したくないので別サイトからの紹介とさせて頂きました。

マウスをのせるとやわらかく色が変わる

マウスをのせるとやわらかく色が変わるマウスをのせるとやわらかく色が変わるマウスをのせるとやわらかく色が変わるマウスをのせるとやわらかく色が変わるマウスをのせるとやわらかく色が変わるマウスをのせるとやわらかく色が変わるマウスをのせるとやわらかく色が変わるマウスをのせるとやわらかく色が変わるマウスをのせるとやわらかく色が変わるマウスをのせるとやわらかく色が変わるマウスをのせるとやわらかく色が変わる

<p>マウスをのせるとやわらかく色が変わる
  マウスをのせるとやわらかく色が変わる
  マウスをのせるとやわらかく色が変わる
  マウスをのせるとやわらかく色が変わる
  マウスをのせるとやわらかく色が変わる
</p>

p{
   width: 500px;
   margin: 10px auto;
   padding: 10px;
   border-radius: 15px;
   background: #eee;
   transition: background 0.5s;
}
p:hover{
   background: #f00;
   color: #fff;
}

マウスをのせると画像が大きくなる

<img src="ファイル名" alt="">

img{
   width: 300px;
   transition: width 0.2s;
}
img:hover{
   width: 400px;   
}

文字列にマウスをのせると下線が広がる

<p>こんには</p>

p{
   border-bottom: 1px solid #000;
   transition: border-bottom 0.2s;
}
p:hover{
   border-bottom: 5px solid #000;   
}

画像にマウスをのせると枠線がつく

<img src="ファイル名" alt="">

img{
   border: 5px solid #fff;
   transition: border .2s;
}
img:hover{
   border: 5px solid #aaa;   
}