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

transitionプロパティを使って、プロパティの変更を一定期間にわたって発生させることを学習しました。

又、画面上部に固定させたナビゲーションの作り方を学習しました。固定には「position: fixed;」、配置には「display: flex」を使いました。ここでもtransitionプロパティでゆっくりと表示させました。

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

ID 等は、プレビュー画面から開発者ツールで当該部分のセレクターのコピーで取得します。

当該要素にID 等が無い場合はその親要素のそれを取得します。

具体的には「img#cc-m-imagesubtitle-image-8919556775{ }」又は

「#cc-m-8919576875 p{ }」となります。

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

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

HTML

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

CSS

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

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

HTML

CSS

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

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

HTML

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

CSS

p {
    border-bottom: 1px solid #aaa;
    transition: border-bottom .2s;
}
p:hover {
    border-bottom: 5px solid #aaa;

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

HTML

CSS

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

img:hover {
    border: 5px solid #aaa;
}

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

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;
}

実施前

実施後

補足

「transition」は次の4つのプロパティを設定できます。

transition-duration：アニメーションにかかる時間
transition-property：アニメーションさせるプロパティ
transition-timing-function：アニメーションの変化率
transition-delay：アニメーション開始の遅れ時間

例えば「transition:3s all ease 0s」のように記載します。

上記4つのプロパティを順不同で記載出来、省略するとデフォルト値は指定されます。

transition-propertyのデフォルト値はallですべてのプロパティ

transition-timing-functionのデフォルト値はeaseで滑らかに

transition-delayのデフォルト値は0sですぐにアニメーションが始まります。