スマホ追従ボタンの設定

2020-03-02

必要なもの

 ・ちょっとしたhtmlの知識(なくてもいい)
 ・ちょっとしたCSSの知識(なくてもいい)
 ・覚える気(必須)

ボタンの配置

投稿や固定ページ内にHTMLで下記のようにボタンを配置します。

<button class="follow_button_sample">追従ボタンのサンプル</button>

クラス:follow_button_sampleに対してCSSを書きます。

.follow_button_sample{
  background-color: #d5d5d5;
  position: fixed;
  bottom: 10px;
  right: 10px;
  padding: 10px 40px;
}

このページにも上記のサンプルボタンが組み込んであります。
↓パソコンの解像度ならここにボタンがあります。スマホだと追従します。

スマホで表示したときのみ、メニューが追従するようにする

ここでは表示される画面幅によって、条件分岐を行います。
下記のコードでは、@media(min-width: 300px)のような部分で条件指定をしています。この場合は、最小の横幅が300px、つまり「300px以上なら」という意味になります。maxなら最大なので、OOOpx以下という意味ですね。

@media(min-width: 300px) and(max-width: 700px){

/*ここから上記と同じコード*/
.follow_button_sample{
  background-color: #d5d5d5;
  position: fixed;
  bottom: 10px;
  right: 10px;
  padding: 10px 40px;
}
/*ここまで*/

}

スポンサーリンク