レスポンシブデザインでスマートフォンにも対応!

レスポンシブデザインって?

インターネットを閲覧するときに、パソコンとタブレット、スマートフォンでサイトを見ると、画面の大きさに合わせてサイトのコンテンツの配置が変わっていることに気づきませんか?

このように、サイトを閲覧する端末によってコンテンツの配置を変えることで画面を見やすくしたデザインのことをレスポンシブデザインと言います。レスポンシブ化されていないサイトの場合、サイトをスマートフォンなどで閲覧すると画面の横幅が広すぎて見づらいというデメリットがあり、レスポンシブ化することで、このデメリットを改善することが出来る点がレスポンシブ化のメリットと言えるでしょう。

基本的なcssの知識さえあれば、誰でもサイトのレスポンシブ化は可能なので、サイトにちょっとした工夫を加えるだけでサイトがかなり見やすくなるレスポンシブ化に挑戦してみましょう!

メディアクエリを使ってレスポンシブ化

サイトをレスポンシブ化するには、「メディアクエリ」というものを使います。

メディアクエリの使い方は、「@media(max-width:~px){}」というように記載し、{}の中に、この幅までの時はこのパーツはこのように配置するなどというように設定します。

基本的にスマートフォンの画面は大体max-width:767px、タブレットにも対応させたい場合は(max-width: 1020px) and (min-width: 768px)というようにメディアクエリを設定しておけば問題なくタブレット、スマートフォンでサイトを閲覧した際に、画面のサイズに合ったコンテンツの配置となるため、設定はこれにしておくことをお勧めします。

スマートフォンWebサイト制作の際は、レスポンシブウェブデザインという技術を使用してコーディングすることが一般的です。