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

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

HTML

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

CSS

p {
    background: #eee;
    transition: background .2s;
    width:600px;
    margin:0 auto 20px;
    padding:10px;
    border-radius:10px;
}
p:hover {
    background: #f00;
    color:#fff;
}

 


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

HTML

<div>

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

</div>

CSS

div{
   height:300px;
}
img {
    width: 300px;
    transition: width .2s;
}
 img:hover {
    width: 400px;
}


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

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

HTML

<div>

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

</div>

CSS

div{
    width:20em;
    margin:0 auto;
    height:2em;  
}
p {
    border-bottom: 1px solid #f00;
    transition: border-bottom .2s;
}
p:hover {
    border-bottom: 5px solid #f00;
}


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

HTML

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

CSS

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


ページトップにナビを配置

position: fixedで位置を固定する

下記THMLを一番上に貼り付ける

<nav id="sticky">
    <var levels="1" expand="false" variant="standard" edit="1">
        navigation
    </var>
</nav>

下記CSSを設定する

#sticky {
    background: #eee;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 1000;
}

#sticky div div ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#sticky div div ul li {
    padding: .5em;
    margin: 0 .5em;
    list-style-type: none;
    background: #ddd;
    transition: .5s;
}

#sticky div div ul li:hover {
    background: #aaa;
}

#sticky div div ul li a {
    text-decoration: none;
    transition: .5s;
}

#sticky div div ul li:hover a {
    color: white;
}

#container {
    margin-top: 80px;
}

クレジット表示の中央寄せ

footer部のクレジットは編集の出来ない所で幅55％の左揃えに設定されているので、「!important」を使って幅100％とtext-align: centerで中央揃えに設定

#footer .leftrow {
    width: 100% !important;
}
#footer .leftrow p {
    text-align: center !important;
}

併せて管理メニュー→基本設定→共通項目→フッター編集から文字色を黒にした。

出　典

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

http://dgbjdjg.sakura.ne.jp/paso/0.html