HTML・CSSコピペで簡単!レスポンシブ対応サイトにしたい

レスポンシブ

スマーフォンのデザインも重視!
レスポンシブ対応のWebデザインにする方法

システムエンジニア(SE)かっきーです。

最近のブログへの流入は、PC(パソコン)よりもSP(スマートフォン)からのほうが多くはありませんか。
近年は、PC(パソコン)とSP(スマートフォン)を判別してそれぞれに適した画面やデザインにして見せるレスポンシブデザインが人気です。

レスポンシブとは、「レスポンシブWebデザイン」の略。
同じURLかつ同じHTMLコードで、サイトやブログを見ている端末(パソコンやスマートフォン、タブレットなど)を自動的にキャッチし、見ている端末にとって最適の表示を柔軟に変えてくれる制作方法のこと。

サイトのデザインはPC(パソコン)で設定することが多いので、PC(パソコン)重視のデザインになりがちですよね。

ex:パソコンでみたとき

レスポンシブWebデザイン_例

ex:スマートフォンでみたとき

レスポンシブWebデザイン_例

また、すでにレスポンジブを採用している方も、どこでSP(スマートフォン)の画面を制御しているのかわからない方もいるでしょう。

その方たちのために、今回はわかりやすくご説明いたします。

レスポンシブWebデザインの設定

サイト上のデザインに関しては、cssというプログラミング言語で制御しています。

そのためひとつのHTMLでcssを切り替えることにより、PC用、スマートフォン用、タブレット用を演出。
端末のそれぞれの横幅の目安の概算が下記です。

端末のそれぞれの横幅の目安

  • PC:約横幅770px以上
  • タブレット:横幅768px
  • スマートフォン:横幅640px

ただPC(パソコン)は、個人的には横幅は1024pxぐらいが好きです。

横幅の大きさは好みにやサイトの個性に合わせて微調整するのがいいですね。

ここからが本題です。

cssの記述方法

下記にサンプルを記載します。


/*===============================================
●style.css 画面の横幅が1024px以上
===============================================*/
@media screen and (min-width: 1024px){
img{
max-width: 100%;
height: auto;
width :auto; 
}
#container{
width:100%;
}
~以下、画面の横幅が768pxまでの場合のスタイル記入~
}
/*===============================================
●style.css 画面の横幅が768pxまで
===============================================*/
@media screen and (max-width: 768px){
img{
max-width: 100%;
height: auto;
width :auto; 
}
#container{
width:100%;
}
~以下、画面の横幅が768pxまでの場合のスタイル記入~
}
/*===============================================
●style.css  画面の横幅が640pxまで
===============================================*/
@media screen and (max-width:640px){
img{
max-width: 100%;
height: auto;
width :auto; 
}
#container{
width:100%;
}
~以下、画面の横幅が640pxまでの場合のスタイル記入~
}

キーワードは【@media screen and (min-width: 769px)】の部分です。
ここで指定した横幅以上の画面の大きさを制御しています。

そして「img」により、画像を各サイズに適するように伸縮しましょう。
これだけで簡単にレスポンスブ対応に出来てしまいます。

簡単にレスポンシブにするプラグイン:WPtouch Pro

しかし、これでもわからない方のために、簡単にレスポンシブWebデザインに対応させることができるwordpressのプラグインをご紹介!

WPtouch Proというプラグインを使用すると、簡単にレスポンシブWebデザイン対応させることができます。
有料版もあってとても便利。

ですが、このプラグインを入れた場合がレイアウトが同じになってしまうため、個性を出したい人にとってはあまりオススメしません。

やはり自分で実装したほうが一番ですね!
簡単にできますので皆さんもお試しください。

うまく実装できない場合は、お気軽にお問い合わせフォームよりご連絡くださいませ。

( icon-star 前回の記事も見る

記事の文章作成や、Wordpressサイトのカスタマイズで
お困りではありませんか?
ライティングレシピでは、文章コンサルとWordpressサイトのカスタマイズを承っております!

文章コンサル
●文章力をあげてスキルアップしたい
●SEOを意識した文章を書きたい
●ライター目線で文章が書けるようになりたい

Wordpressサイトのカスタマイズ
●憧れのサイトのようにしてみたい
●不具合を修正したい
●デザインを理想通りに変更したい

少しでも当てはまる項目があるなら、いつでもお気軽にご相談くださいませ。 ココナラ満足度100%で、提案力には自信があります!

コメントを残す

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