かずき関連タグ:レスポンシブWebデザインの作り方(簡単設定方法)レスポンシブ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がわかれば簡単にできるので、参考にしていただければと思います。Explorer(IE)対応についてレスポンシブWebデザインの表示確認レスポンシブWebデザインを仕事で導入するとなるとレスポンシブWebデザイン設定の記述方法パソコン用、スマートフォン用、タブレットの画面サイズによってCSSを切り替えることで、HTML一つで複数のデザインを表現できるという事で、まずはソースを記載します。HTMLのmetaに以下を記載。-->端末の画面サイズの横幅に合わせてCSSを切り替える必要があるので、Viewportを挿入します。次に3つ(任意)のCSSを用意します(数値は任意です。スマートフォン(android):横幅640pxパソコンとタブレットの横幅は1024以上でも769以上でも良いでしょう。}#container{width:100%;}~以下、画面の横幅が640pxまでの場合のスタイル記入~}また、@importで各CSSを読み込む方法もあります。640px);画像の伸縮設定そのままだと画像は元のままのサイズで表示されてしまい画面からはみ出てしまいます。上記にも記載しておりますが、スマートフォン用・タブレット用のCSSに下記のように画像を伸縮するように指定をします。これでレスポンシブWebデザインが換装可能になりますので、細かく各CSSを調整していただければと思います。スマートフォンだけでもタブレットだけでも画像指定でそれぞれ独自のデザインにする事も可能です!WordPressのプラグインを使わなくてもテーマに直接書き込めますし、MovabletypeやTYPO3などのCMSでも構築可能ですのでお試しあれ。Explorer(IE)対応についてレスポンシブWebデザインをIEに対応させる為の2つの方法を記載します。Respond.jsを挿入するGoogleコードで公開されているcss3-mediaqueries.jsを挿入する上記2つのいずれかをHTMLに挿入すればOKです。スマートフォンやタブレットのブラウザには、インターネットエクスプローラーはありません。あるとしてもほぼ使われてないと思って良いです。クライアントからIEにも対応して欲しいと言われたらその旨を伝えてみてはと思います。IEでのレスポンシブWebデザインの確認はほぼ無意味でしょう(笑)エゴを主張されてきたら追加料金で対応しましょう!レスポンシブWebデザインの表示確認レスポンシブwebデザインで制作したwebサイトを端末を分けて一括表示で確認できるサービスたち。TestingレスポンシブWebデザインを仕事で導入するとなるとプロとしてwebサイト制作をしている我々も、androidやiPhone・iPadなどのスマートフォンやタブレットが普及してきて、スマートフォンやタブレット用にwebサイトを調整する仕事が増えてきました。周りのWebデザイナーさん方もスマホ対応のお仕事で忙しくしていると思います。一昔前は、m/だのi/だの携帯サイトを分散して作ってきてきましたが、レスポンシブWebデザインだと別途携帯サイトやスマートフォン用に作られたHTMLを作る必要もなく、HTMLひとつとでスマホ用・タブレット用のCSSを用意すれば、端末のディスプレイサイズに合ったwebサイトを作る事ができるので、クライアントにとってレスポンシブWebデザインはコスト面でも優しい技術です。レスポンシブWebデザインは一つのHTMLで換装可能ですから、クライアントに提案をすると安くでスマートフォンサイトが作成できると思われますが、うかつに口頭で費用はこのくらいと少額で言ってしまうと後から痛い目に合うことでしょう...。計画性が大事!デザイン次第でCSSを0から書き下ろす事にもなるので、手間暇のかかるレスポンシブWebデザイン、出来上がりのイメージをしっかり持ち、見積りをしましょう。今はパソコンよりもスマホやタブレットでwebサイトを見る方が多くなってきているので、タッチUI前提のWebデザインに移行して行くのも良いでしょう。関連記事もご覧ください。TOP当ブログで公開されている文章、写真・画像などに関する権利は、当方に帰属します。著作権法そのほか法律に触れる行為は禁止しています。