2 flat logo on transparent 256
2018-02-05

CSSとjQueryでレスポンシブデザインに対応する方法

06096

スマホ対応の必要性が年々上昇しており、htmlページを作成する場合でもスマホを意識する必要が発生しています。

今回CSSとjQueryでレスポンシブデザインに対応する方法を記載します。

レスポンシブデザインとは

PC、スマホ、タブレットなど各端末の画面の大きさを判断し、画面のレイアウトを柔軟に変更するデザインになります。

CSSを利用してレスポンシブデザインに対応する

CSSを利用する場合は2つのパターンが存在します。

画面の大きさによって、CSSを使い分ける方法

下記の通り800pxの場合はtest.cssが呼び出され、600pxの場合はtest2.cssが呼び出されます。
画面サイズによって、大きくデザインを変更したい場合などに利用されます。

<link rel="stylesheet" href="test.css" type="text/css" media="screen and (max-width:800px)">
<link rel="stylesheet" href="test2.css" type="text/css" media="screen and (max-width:600px)">

CSS内で使い分ける方法

1つのCSS内に、画面サイズによってデザインを変更する方法になります。
メンテナンスがやりやすいので、個人的にはこの方法をおすすめします。

<link rel="stylesheet" href="test.css" type="text3/css" 
text3.css

@media screen and (min-width:600px){
  /*600px以上で適用する内容*/
}

@media screen and (min-width:800px){
  /*800px以上で適用する内容*/
}

Jqueryを利用してレスポンシブデザインに対応する

Jqueryではウインドウのサイズを変更した場合に発火するイベント.resizeメソッドが存在します。
この.resizeメソッドを利用してレスポンシブデザインに対応します。

<script>
$(window).resize(function(){
    var w = $(window).width();
    var x = 800;
    if (w <= x) {
        $('#test').css({
            color: 'red'
        });

        $('#test-name').removeClass('test-class')       
    } else {
        $('#sample').css({
            color: 'black'
        });
        $('#test-name').addClass('test-class') 
    }
});
</script>

4行目のvar x = 800;の値を任意の値に変更し
指定値になったら、クラスを付加したりCSSを直接変更できます。

前の記事
次の記事