ホームページ制作会社、サイト制作、その他各種システムの構築、CGI、PHP等のWEBアプリ開発

ホームページ制作・システム構築・DB設計ホームページ制作・システム構築・DB設計
ホームページ制作とWEBシステムの構築、カスタマイズから運用サポートまで。
スペーサー

PC用とスマホ用の表示切り替えをCSSだけで行う方法(その2)


に関連する記事です。

この記事は前に投稿したPC用とスマホ用の表示切り替えをCSSだけで行う方法(その1)からの続きです。

作成するHTMLは、DIV要素で囲まれていることになるのだけれど、この要素をCSSから表示制御する。
当初はこんな感じでHTMLが組まれる。

<div id="wrapper">
・・・メインコンテンツ内容・・・
</div><!--/wrapper-->
<div id="footer">
・・・フッター内容・・・
</div><!--/footer-->


それがスマホ対応になると以下のようになる。

<div id="wrapper">
・・・PC表示用のメインコンテンツ内容・・・
</div><!--/wrapper-->
<div id="smart_wrapper">
・・・スマホ表示用のメインコンテンツ内容・・・
</div><!--/smart_wrapper-->
<div id="footer">
・・・PC表示用のフッター内容・・・
</div><!--/footer-->
<div id="smart_footer">
・・・スマホ表示用のフッター内容・・・
</div><!--/smart_footer-->



CSSは以下のよう制御される。

design.cssの内容
#smart_wrapper{
display:none;
}
#smart_footer{
display:none;
}
/*以下は画像などの表示制御クラス*/
.pc_img_class{
display:inline;
}
.smart_img_class{
display:none;
}
/*それ以外の表示要素は適当に*/

smart.cssの内容
#wrapper{
display:none;
}
#footer{
display:none;
}
/*以下は画像などの表示制御クラス*/
.pc_img_class{
display:none;
}
.smart_img_class{
display:inline;
}

/*それ以外の表示要素は適当に*/


そしてCSS制御として、htmlヘッターに以下を記述してデバイスにより分岐させる。

<link media="only screen and (max-device-width:480px)" href="smart.css" type="text/css" rel="stylesheet" />
<link media="screen and (min-device-width:481px)" href="styles.css" type="text/css" rel="stylesheet" />


スマホで画像の制御などは横幅に左右されるので正確な対応が必要であると思われる。
具体的には画像の横幅を指定しなかったり、100%で指定するなどだ。
そうしない場合は、ブラウザが横スクロールしようとするので、閲覧しにくく感じる。


メニュー構成などはリスト要素で組むことが多いと思われるが、design.cssとsmart.cssにより記述内容が異なれば、おのずと制御可能と判断する。
ただDIV要素の上下逆転表示はカスケードに準じていないように思えるため、クライアントとどのような表示になるかを良く打ち合わせたほうが良いと思われる。



PC用とスマホ用の表示切り替えをCSSだけで行う方法(その1)
PC用とスマホ用の表示切り替えをCSSだけで行う方法(その2)
PC用とスマホ用の表示切り替えをCSSだけで行う方法(その3)
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
ホームページ制作・システム構築・DB設計
●ユタデザイン
●住所:〒135-0062
東京都江東区東雲2-7-5-3503
ユタデザイン
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+



Valid XHTML 1.0 Transitional スペーサー 正当なCSSです!