コーディング代行 外注ならコーディングベア

メニュー

レスポンシブコーディング


概要

PCサイトとスマートフォンサイトをワンソース(同一HTML)で表現します。

PCサイトとは別にスマートフォン専用のサイトを用意するのではなく、Media-Query(ブレイクポイント)を使用することで同じHTML構造のまま、CSSのみで見た目の表現を変更します。
PC時の表示とスマートフォン時の表示を全く別のものにせず、論理的に同じ構造、同じ要素の順にレイアウトすることが望ましいためデザイン上の制約は多少増えますが、ワンソースでサイト管理ができることや検索エンジン(Google)が推奨していることもあり、現在は人気を博して主流となっています。

コーディングベアでは要素の共通化にこだわっています。

レスポンシブの場合、PCとスマートフォンで順番が異なる、配置が異なる、全く別物になる、文法上の論理構造が異なるなどの理由から、デザインによっては要素の出し分けをする必要が出てきますが、これをどこまで抑えることができるかがエンジニアの腕の見せ所です。業者によってはかなり多くの要素を出し分けしてしまい、ワンソース管理の意味があまりない施工をしている例も見られます。
弊社では、サイト公開後の運用時にも大きく影響する、要素の共通化にこだわり、できる限り統一するように心がけています。

レスポンシブコーディングのブラウザ表示保証について。

ブラウザの保証範囲につきましては、ブラウザ表示保証をご確認ください。



料金



注意事項・備考

  • 通常レスポンシブとリキッドレイアウトの違い通常レスポンシブとリキッドレイアウトの違いは以下からご確認頂けます。
    通常レスポンシブ
    リキッドレイアウト
  • 要素の出し分けは事前に確認をさせて頂きますデザインレイアウト上、どうしても要素の出し分けが必要になる場合がございます。そのような時は事前に確認を取らせて頂くようにしております。
  • スマートフォン時のデザイン幅とフォントサイズについてランドスケープ(横向き)時のことも想定してスマートフォンのデザインデータの幅は640px以上を推奨しております。また、あわせてフォントサイズについては、デザインデータのサイズの1/2サイズで施工しますので、可読性も考えますとデザインデータ上では24px以上での作成を推奨いたします。
  • スマートフォン時のサイズ指定はvw(viewport width)を使用しますスマートフォン時のレイアウトとフォントサイズは、画面サイズに合わせた可変(リキッドレイアウト)処理に対応するため、pxではなく、縦横比率を維持したまま拡大縮小するvwを基本的に使用します。
  • PCでも確認されたい場合はIE9以上の環境が必須ですIE8以下の環境では、Media-Queryがデフォルトでは効きませんので、ブレイクポイントでレイアウトが切り替わりません。ご注意ください。
  • 料金単位のpxカウントについてpx数のカウントはページごとにカウントさせて頂きます。
  • 累計ページ数
    Our Results
    23843
  • お取引き企業様数
    Our Clients
    201
  • 累計案件数
    Our Projects
    2114
  • 現在開発中ページ数
    Our Building
    269

お見積相談

お問い合わせ