レスポンシブデザインのサイトを作る時の書き方

この記事は約534秒で読めます。

どうも!!こうすけです。

開発していたwordpressテーマなのですが、やっとそれらしいテーマになってきました。

いい感じのテーマが作れるとなんだかんだ嬉しい気持ちになりますね。

一応wordpressテーマはレスポンシブデザインで作成しました。

今日は、そのレスポンシブデザインにする際に書き方をまとめたのでそれを紹介したいと思います。

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

まずレスポンシブデザインがわからないと人のために、レスポンシブデザインが何かを説明します。

レスポンシブデザインとは、webサイトを閲覧する人の画面サイズにあったデザインを表示してくれることをいいます。

例えば、サイトを閲覧しているブラウザの画面サイズを小さくすると、その縮小に合わせて文字が小さくなったり、写真のサイズが小さくなったりすることを言います。

逆に大きくすると文字が大きくなったりします。

そういったデザインをレスポンシブデザインといいます。

2. レスポンシブデザイン書き方

ここでは、僕がレスポンシブデザインをする上で必要だった知識を紹介します。

こういったことを書いて行けばだいたいレスポンシブデザインになるかなと思います。

2.1. ブロックサイズは%指定で

まずは、ブロックサイズの指定の仕方ですが、レスポンシブデザインにするためには、相対値を指定する必要があります。

相対値は何かを基準にした値のこと。

ブロックでいうと親ブロックの大きさを基準にブロックのサイズを決めることができます。

その指定をするために必要なのが、%指定です。

em指定でもいいですが、%指定の方が個人的にはわかりやすいと思います。

例えば、サイズを決めたいブロックにwidth:100%と指定してやると、そのブロックは親ブロックと同じ大きさと指定することができます。

こう指定することで、画面を縮小して親ブロックが小さくなった時に、そのブロックも親のサイズに合わせて小さくなっていきます。

もちろん、親ブロックも相対値指定の%指定にしてやる必要があります。

.block{
  width: 100%;
}

2.2. 文字サイズはvw指定で

レスポンシブデザインにする必要があるため、文字サイズも相対値を指定してやりたいのですが、文字サイズには%指定を使うことができません。

なぜなら、%指定やem等の指定は、親のサイズを基準にします。

ブロックの場合は画面縮小で親ブロックの大きさが変わっていきますが(ブロックの親の頂点がwindowなので)、文字の場合は一番上の文字が画面縮小で変わるわけではないので、画面縮小しても親のサイズは変わらず、子供の文字も変わらないままとなります。

そこで必要になってくる指定がvw指定になります。

vw指定は、親を基準にサイズを決めるのではなく、window画面のサイズを基準にサイズを決めることができます。

vwを利用することで、画面を拡大縮小するたびに画面の大きさに合わせて文字が大きくなったり小さくなったりします。

.block{
  font-size: 10vw;
}

2.3. 写真はobject-fitプロパティを使用する

写真等の画像を使う場合は、cssのobject-fitプロパティを使うことをオススメします。

object-fit: contain;

とimgタグに指定することで、画像を縦横比を維持したまま表示してくれます。

jQueryで自分で計算しないといけなかった縦横比がcssのプロパティを利用するだけになるので、非常に便利です。

2.4. スマホ表示時の自動縮小を防ぐ

なんでこんな機能がついてるんだよ!思わず愚痴ってしまった機能があるんですが、ブラウザには、サイトを自動縮小して表示させる機能があります。

よく、スマホ対応していないサイトをスマホで開くと、サイトがものすごく縮小されている状態で表示されているのを見かけたことありませんか?

あれって、ブラウザが自動的に縮小して表示しているみたいなんですよ。

1500pxの大きさのサイトを小さくして、600pxのスマホの画面に無理やり表示させてるからそうなります。

レスポンシブデザインを作っている場合は、600pxなら600px用の画面サイズをデザインしていると思うので、そちらのデザインに適用されるようにheadタグに以下の指定をしてやります。

<meta name="viewport" content="width=device-width, initial-scale=1">

この指定することで、スマホでサイトを表示した時にも自動でサイトが縮小されることなく、画面のサイズにあったデザインで表示されます。

2.5. スマホ用のデザインにするために

ブロックや文字のサイズを相対値にしていても、やっぱりスマホ用のデザインは別にしたくなるものはいくつかあったりします。

例えば、メニュー一覧をスマホでは最初はアイコンで表示したかったり、余白を無くしたり、横並びにしていたものを縦並びに変更したかったり、そういったスマホみたいに画面が小さくなった時に、別のスタイルを適用させたい時に使うのが、以下のcssの@mediaです。

@media only screen and (max-width : 1000px){
    img{
      width: 50%;
    }
}

仕組みは、画面のサイズがmax-widthで指定しているサイズ以下になったらカッコ内で指定しているスタイルが適用されるようになる仕組みです。

上記例でいうと。画面サイズが1000px以下になると、imgタグの横サイズが親ブロックの半分の大きさになるということです。

スマホ用のデザインを記述したい場合は、max-widthにスマホのサイズを指定して、スマホで適用したいスタイルをカッコ内に記述することで実現できます。

3. 最後に

以上が、僕がレスポンシブデザインのサイトの書き方になります。

レスポンシブデザインでサイトを作りたいと考えているかたの参考になれば僕も嬉しく思います。

この記事がいい!!と思ったらいいねツイートよろしく!!

 

作成者: kosuke

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です