webmobile 編集部

レスポンシブWebデザインの作り方(簡単設定方法)

  • はてなブックマーク 4
  • facebook 0
  • twitter

レスポンシブWebデザインでスマホ対応・SEO対策をしよう!

作ったwebサイト、運営しているwebサイト、スマホで綺麗に見れるように最適化していますか?

今はスマホの普及もあり、パソコンよりもスマホやタブレットでwebサイトを閲覧するユーザーの方が多いです。

そんな中、webサイトの制作者としては、画面の小さなスマホで情報をしっかり読んで貰うにはにはスマホ対応が必要不可欠

パソコン用のwebサイトをスマホで見ると文字が小さくてスクロールしなきゃ見れない(汗)
これではユーザーファーストを提唱するgoogleさんから良い評価は受けれられない…。

スマホ対応していないと検索結果順位が下がっちゃう?

そこでスマホ対応におすすめな技術として、レスポンシブWebデザインです!スマホやタブレットに最適化されたwebサイトをCSSを編集するだけで簡単に実装できます。

必要な知識は主にCSS編集能力

レスポンシブなスマホ対応は、WordPressやMovableTypeなどの”CMS”、CSSフレームワーク”Bootstrap”などのテンプレートを使わなくても1つのHTMLと2つのCSSだけで実装できます。CSSはパソコン用・スマホ用・タブレット用と別々に作る方がわかりやすいですが、CSS1つにまとめるのも有りです。

jQueryも使いませんし、CSS3のメディアクエリを使うからといって、webサイトをHTML5で作らなきゃならないってことも無いですw

当記事で紹介するレスポンシブWebデザインは、CSSがわかれば簡単にできるので、参考にしていただければと思います。

スポンサーリンク

レスポンシブWebデザイン設定の記述方法

パソコン用、スマートフォン用、タブレットの画面サイズによってCSSを切り替えることで、HTML一つで複数のデザインを表現できるという事で、まずはソースを記載します。
HTMLのmetaに以下を記載。

<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
<link rel="stylesheet" media="all" type="text/css" href="style.css" />
<!-- ※デフォルトのスタイル(style.css) -->
<link rel="stylesheet" media="all" type="text/css" href="tablet.css" />
<!-- ※タブレット用のスタイル(tablet.css) -->
<link rel="stylesheet" media="all" type="text/css" href="smart.css" />
<!-- ※スマートフォン用のスタイル(smart.css) -->

端末の画面サイズの横幅に合わせてCSSを切り替える必要があるので、Viewportを挿入します。

次に3つ(任意)のCSSを用意します(数値は任意です。色々試してみて下さい)
■ パソコン:横幅769px以上
■ タブレット(android):横幅768px
■ スマートフォン(android):横幅640px
パソコンとタブレットの横幅は1024以上でも769以上でも良いでしょう。

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

また、@importで各CSSを読み込む方法もあります。

@import url(style.css) screen and (min-width: 769px);
@import url(tablet.css) screen and (max-width: 768px);
@import url(smart.css) screen and (max-width: 640px);

画像の伸縮設定

そのままだと画像は元のままのサイズで表示されてしまい画面からはみ出てしまいます。
上記にも記載しておりますが、スマートフォン用・タブレット用のCSSに下記のように画像を伸縮するように指定をします。

img{
max-width: 100%;
height: auto;
width /***/:auto; 
}

以上になります。

これでレスポンシブWebデザインが換装可能になりますので、細かく各CSSを調整していただければと思います。スマートフォンだけでもタブレットだけでも画像指定でそれぞれ独自のデザインにする事も可能です!
WordPressのプラグインを使わなくてもテーマに直接書き込めますし、MovabletypeやTYPO3などのCMSでも構築可能ですのでお試しあれ。

Internet Explorer(IE)対応について

レスポンシブWebデザインをIEに対応させる為の2つの方法を記載します。
Respond.jsを挿入する
Googleコードで公開されているcss3-mediaqueries.jsを挿入する
上記2つのいずれかをHTMLに挿入すればOKです。

しかし、スマートフォンやタブレットのブラウザには、インターネットエクスプローラーはありません。
あるとしてもほぼ使われてないと思って良いです。ですからクライアントからIEにも対応して欲しいと言われたらその旨を伝えてみてはと思います。IEでのレスポンシブWebデザインの確認はほぼ無意味でしょう(笑)
エゴを主張されてきたら追加料金で対応しましょう!

レスポンシブWebデザインの表示確認

レスポンシブwebデザインで制作したwebサイトを端末を分けて一括表示で確認できるサービスたち。
The Responsinator
Codebomber // Resizer
Responsive Design Testing

レスポンシブWebデザインを仕事で導入するとなると

プロとしてwebサイト制作をしている我々も、androidやiPhone・iPadなどのスマートフォンやタブレットが普及してきて、スマートフォンやタブレット用にwebサイトを調整する仕事が増えてきました。

周りのWebデザイナーさん方もスマホ対応のお仕事で忙しくしていると思います

一昔前は、m/だのi/だの携帯サイトを分散して作ってきてきましたが、レスポンシブWebデザインだと別途携帯サイトやスマートフォン用に作られたHTMLを作る必要もなく、HTMLひとつとでスマホ用・タブレット用のCSSを用意すれば、端末のディスプレイサイズに合ったwebサイトを作る事ができるので、クライアントにとってレスポンシブWebデザインはコスト面でも優しい技術です。

しかし、レスポンシブWebデザインは一つのHTMLで換装可能ですから、クライアントに提案をすると安くでスマートフォンサイトが作成できると思われますが、うかつに口頭で費用はこのくらいと少額で言ってしまうと後から痛い目に合うことでしょう…。

やはり計画性が大事!

デザイン次第でCSSを0から書き下ろす事にもなるので、手間暇のかかるレスポンシブWebデザイン、出来上がりのイメージをしっかり持ち、見積りをしましょう。

今はパソコンよりもスマホやタブレットでwebサイトを見る方が多くなってきているので、タッチUI前提のWebデザインに移行して行くのも良いでしょう。

何故、レスポンシブWebデザインを採用するのか?

運営側としては、HTMLが一つで済み、作成・管理・編集の効率が良いから。

htaccessで端末を識別して端末に合ったサイズのwebサイトを見せるダイナミックサービングという技術も良いですが、個人的にはこのエントリーで綴ったHTML一つで作るレスポンシブWebデザインでの作成の方を気に入っていますし、クライアント受けも良いです♪

もう1記事読みませんか?

関連タグ:

運営者(登場人物)は、スマホ・ガジェットが大好きな実在する親子です♪

使い方・レビュー記事のアイテムは実際に買って長く使ってます♪

運営者情報

気になる記事を検索

webmobile TOP