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

パソボラ主催のHP講習会でtransitionプロパティを使って柔らかく変化させる方法の紹介がありましたので紹介します。

　jimdoで適用するには、管理メニュー→デザイン→独自レイアウトからCSSタブで設定します。 又単にｐタグ又はimgタグに指定すると、全体に適用されるので、設定したい部分のID and/or classを指定します。

ID 等は、プレビュー画面から開発者ツールで当該部分のセレクターのコピーで取得します。当該要素にID 等が無い場合はその親要素のそれを取得します。

具体的には「img#cc-m-imagesubtitle-image-8919556775{ }」又は
「#cc-m-8919576875 p{ }」となります。

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

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

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

p.sample1 {
    background: #eee;
    transition: background .2s;
    width:500px;
    padding:5px;
    margin:10px auto;
    border-radius:10px;
}
p.sample1:hover {
    background: #aaa;
}

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

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

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

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

<p>こんには</p>

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

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

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

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