◀ 11.

画面サイズもしくはスマホの場合のCSS切り替え方法

▶
編集
ページの作成
テンプレートを更新

ページの作成

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例： 親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例： 親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！

サイズでの切り替え

<link href="/css/small.css" rel="stylesheet" media="only screen and (min-width: 0px) and (max-width: 768px)">

上記の例では0 ～ 768pxの場合は「small.css」を適用させる記述となります。

スマホやタブレットといった小さい画面になった場合にも切り替えられます。

@media screen and (min-width:961px) {
/*pc*/
}
  
@media only screen and (min-width:376px) and (max-width:960px) {
/*tablet*/
}
 
@media screen and (max-width:375px) {
/*スマホ*/
}

 

デバイスによる切り替え

以下、PHPによるデバイスで条件分岐させる方法。

<?php
$ua = $_SERVER['HTTP_USER_AGENT'];
$browser = ((strpos($ua,'iPhone')!==false)||(strpos($ua,'iPod')!==false)||(strpos($ua,'Android')!==false));
 ?>

<?php if($browser=='sp') { ?>
<link href="/css/small.css" rel="stylesheet">
<?php } ?>

 

子ページ
子ページはありません
同階層のページ
  1. 文法、規則
  2. セレクタ
  3. プロパティ
  4. 色の指定方法
  5. アニメーション
  6. ライブラリ
  7. 「display: flex」を用いて要素を横並びにする方法
  8. スクロールの際のサイドバー固定方法「position: sticky」
  9. 縦の中央寄せ
  10. CSSの変更が反映されない
  11. 画面サイズもしくはスマホの場合のCSS切り替え方法
  12. 一行で左、真ん中、右にそれぞれ要素を寄せる方法
  13. 左右の端にそれぞれ要素を寄せる方法
  14. Bootstrapで両サイドを固定して広告を表示させる方法

人気ページ

最近更新/作成されたページ

最近コメントのあったページ

最近の質問

コメント一覧

コメントがありません

ログインしなければコメント投稿はできません。