レスポンシブデザインを作らないといけない訳。端末、ブラウザ毎にCSSを効かせる方法

All
スポンサーリンク

最近自分で作っているホームページを見て思ったんです。見にくいし、内容が薄いって。近年スマホの普及がすすみパソコンを使わなくなった人もいるんじゃないでしょうか??そのことについて書いていた記事があったので下記にリンクを載せておきます。

“Webサイトのスマホ対応が必要な 3つの理由” — ビジネスとIT活用に役立つ情報”

さて、本題に入っていくのですが今回は、スマホの最適化(レスポンシブデザイン)についてです。これは1つのHTML対して端末ごとに効くCSSを変えてあげるということです。PC版のCSSとタブレット用のCSS、スマホ用のCSSを作るということですね!これって、ブラウザごとにCSSを使い分けるのに似ていますね…あれもレスポンシブデザインというのでしょうか??

まぁ、細かいことは気にせず!

一応二つに分けてコードをあげていきたいと思います。

まずはブラウザ毎にCSSを適用させる方法についてです。

/*Chromeのみ*/
@media screen and (-webkit-min-device-pixel-ratio:0){
    '要素名' {
     //処理内容
    }
}
/*IE11のみ*/
@media all and (-ms-high-contrast:none) {
    *::-ms-backdrop, '要素名' {
     //処理内容
    }
/*Firefoxのみ*/
@-moz-document url-prefix(){
    '要素名' {
     //処理内容
    }
}
/*Safariのみ*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    _::-webkit-full-page-media, _:future, :root '要素名'{
     //処理内容
    }
}

ここでちょっと小ネタなのですが、日本で使われているブラウザ、世界で使われているブラウザのTOP3はChromeとIEが上位の半数以上を占めているようでそこにFirefoxやSafariがくい込んでくるような形になっているみたいです。

次に端末毎にCSSを効かせる方法についてです。

 

左がPC用のCSSで右側がスマホ用のCSSを適用させています!棒人間をCSSで作ってみたのですが、そいつがいるかいないかの違いだけです(笑)他に細かいとこまで調整しているのですが、そこの微調整についてはまた今度にしようと思います。通常のCSSとは別で下記のCSSを追加してあげます!

@media screen and (max-width:'画面サイズ'){
    '要素名'{
     //処理内容
    }
}

棒人間を消してあげるコードは下記のように書いています。

@media screen and (max-width:480px){
    #stick{
     display:none;
    }
}

ポイントとしては、(max-width:480px)ここでセミコロン ; を入れないこと。また画面サイズなのですが適用させたいサイズを探しましょう!自分は iPhone8 plus を使っているのですが、ちゃんと上記の(max-width:480px)を使い制御できています。ユーザーが使っている端末、ブラウザに合わせてこだわったホームページをしていきましょう。もし棒人間が気になった方はPCでWordpress講座をのぞいてみてください!




コメント