CSS

フローティングバナーをCSS作る【Web制作】

スポンサードリンク
スポンサードリンク

スクロールに追尾していくバナー「フローティングバナー」をCSS作ります。
ポイントとしては

・position: fixed,bottom:0;の指定
・z-indexの指定


の設定です。

position: fixed + bottom:0にすることで画面下にブロック要素を固定配置します。
z-indexを指定しないと、他のレイアウトにpositionをつかって配置している場合にスクロールしているとフローティングバナーが隠れて表示されてしまうことがあります。
z-indexは大きい値が上に表示されます。

html


<div class="floatingWrap">
    <div class="floating">
        <a href="https://webhoric.com/hp/">フローティングバナー</a>
    </div>
</div>

CSS


/****** フローティングバナー **********/
.floatingWrap{
    width: 100%;
    position: fixed;
    bottom:0;
    z-index: 100;
        
}
.floating{
   -webkit-backface-visibility: hidden;
    -webkit-transition: All 0.3s ease;
    backface-visibility: hidden;
    background-color: #c9b46f;
    color: #fff;
    cursor: pointer;
    display: block;
    height: 50px;
    line-height: 50px;
    position: relative;
    text-align: center;
    text-align: center;
    transition: All 0.3s ease;
    width: 100%;
}
.floatingWrap .floating a{
    color: white;   
    font-size: 18px;
}
.floating a:hover{
    color: #5c594c;

}


See the Pen
css フローティングバナー
by miccyome (@miccyome)
on CodePen.

スポンサードリンク

CSSの勉強をするのに最適なおすすめ書籍の紹介

created by Rinker
翔泳社
¥2,838 (2021/05/28 00:40:44時点 Amazon調べ-詳細)


WordPress運営が楽になるおすすめのサーバーをご紹介

WordPressおすすめのサーバー

スポンサードリンク

-CSS
-,

© 2021 さくらいらぼWEB版 /個人ブログ