スマホ対応の場合の注意点

スマホ対応（レスポンシブウェブデザイン）で制作させていただいた場合、表示する画面の幅によってCSSが切り替わることにより、同一のHTMLで異なる表示を行うことを実現しております。そのため、レスポンシブウェブデザインでは通常の場合に比べて必然的にCSSの記述がやや複雑になってしまいます。お客様ご自身にて編集される際にお困りのことがありましたら、以下を参考にしてみてください。

レスポンシブウェブデザインの概要

納品させていただいたファイル一式のうち、cssフォルダのstyle.cssにおいて、レイアウトやフォントなどのデザインを指定しています。このstyle.cssをテキストエディタやホームページ作成ソフトでご覧いただくと、このファイルの前半は通常のPC向けのデザインについて記述してあります。そして、後半以降の以下の記述

@media only screen and (max-width: 480px) {

より始まる行から下は全てスマホ向けの記述となります。

したがいまして、PC向けのデザインを修正したい場合はこの行より上を、スマホ向けのデザインを修正したい場合はこの行より下を変更していただくことになります。重要なポイントとしましては、後半のスマホ向けの記述はPC向けの記述とは異なる箇所だけを部分的に記述している点です。データ量削減のため、PC向けの記述を活かしつつ、スマホで表示する際に不都合になる部分だけCSSファイルの後半で追記していることになります。CSSでは下の行に書いた内容が優先的に適用されるというルールがあるため、一旦PC向けの記述を全て読み込んで、その後スマホ向けの記述を上書きして適用するということがブラウザでは行われています。（当然、PCではスマホ向けの記述を無視します）

編集後の確認方法について

CSSファイルをテキストエディタやホームページ作成ソフトで編集して頂いた後、編集する度にサーバーにアップしてスマホで確認するのは面倒かと思います。ローカルで表示を確認する方法としては、PCのブラウザで表示させてから、ウィンドウの幅を極端に狭めていただくのが最も簡単です。ウィンドウの幅が480ピクセル以下になったら自動的にデザインがスマホ向けのものに切り替わります。

以上となりますが、ご不明な点などございましたら、いつでも無償でサポートさせていただきますので、弊社担当者へメールにてお問い合わせください。

• 
• 
• 
•