世界中で人気のCMS「Jimdo」にCSS3のMedia Queries／メディア・クエリという技術を使う事によってデバイス（画面の大きさ）に応じたデザインに変わります。

（※画面の大きさとはデバイスのディスプレイの大きさや解像度の事ではなくデバイスのディスプレイ内で表示しているブラウザの表示領域となります）

これまで携帯用サイトを作る場合は、PC サイトの コンテンツとは別に各キャリア(Docomo、Softbank、au etc...)の仕様にあった携帯専用のUI（ユーザーインターフェイス）とIA（情報設計）でコンテンツを作り、ＵＡ(ユーザエージェント)の判別などをして振り分けをしたりしていましたが、スマートフォンでは既存のウェブサイトをCSSを使ってフロントエンドだけで対応する事ができます。

スマートフォンでＰＣサイトを閲覧する事はできますが、通常のままですと縮小されとても見難い状態となってしまいます。ＰＣサイトそのものをマルチデバイス対応する事でスマホ専用のサイトを作らなくてもワンソースでさまざまなデバイスに対応した見やすいウェブサイトを構築する事が可能です。

iPad のようなタブレットPCの出現でデバイスの大きさもファジーになりました。さまざまなデバイス毎にウェブサイトを用意するとなると管理するのも大変ですが、一つのサイトで多種多様なデバイスの画面の大きさに対応する方法があります。

• サイドバーやメニューは絞ってシンプルにする
• リンクだと一目でわかるようにする
• タッチ操作に最適な行間や余白をとる
• リキッド（可変幅）でデザインする
• iPhoneではFlashは表示されない
• HTML5＋CSS3を積極的に活用する

スマートフォンもタブレットＰＣもクリックではなく指を使った「タップ」がリンクなどを開くためのアクションとなる為、フィンガータッチで行う「タップ操作」のしやすいスタイルを心がましょう。タップを考慮した対策として、リンクエリアを大きくすることがポイントになります。行間・余白を大きめにとったり、ボタン画像などもなるべく大きくするようにしましょう。例：下線のハイパーリンク⇒ボタン形状

ウェブサイトを表示するブラウザのウィンドウサイズは、ディスプレイの大きさや解像度など閲覧環境によってさまざまです。固定したサイズでウェブページを作成してしまうと、ウィンドウの大きさによってスクロールが縦横に発生したりコンテンツが読みづらくなるなどの問題が発生してしまいます。最近ではスマートフォンやタブレットPCからのアクセスも考慮する必要性が出てきていますが、これらのデバイスの種類ごとに合わせた大きさで複数のウェブサイトをそれぞれ用意するのは制作にも管理にも手間がかかってしまい大変ですがCSS3の「Media Query（メディアクエリ）」を使えば、１つのウェブサイトでさまざまなデバイスで表示している解像度やブラウザのウィンドウサイズに応じて適用するスタイルシートを切り替えて、利用者の環境ごとに最適なデザインでページを表示することができます。これからは特定なデバイスだけではなくさまざまなデバイスの種類を考えながらウェブサイトを構築した方が良いでしょう。

Media QueriesはCSS3の実装の一環でmedia属性の中に、iPadやiPhoneなどのデバイスの種類や解像度、向きなどの条件文を記述することで、適用する最適化したCSSを分岐させ読み込むことができます。

※Media Queryの規格はW3Cの勧告候補となっており、IE 9、Firefox 3.5以上、Safari、Google Chrome、Operaが対応しています。