この記事は前に投稿した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;
}
/*それ以外の表示要素は適当に*/
※
スマホで画像の制御などは横幅に左右されるので正確な対応が必要であると思われる。
具体的には画像の横幅を指定しなかったり、100%で指定するなどだ。
そうしない場合は、ブラウザが横スクロールしようとするので、閲覧しにくく感じる。
※
メニュー構成などはリスト要素で組むことが多いと思われるが、design.cssとsmart.cssにより記述内容が異なれば、おのずと制御可能と判断する。
ただDIV要素の上下逆転表示はカスケードに準じていないように思えるため、クライアントとどのような表示になるかを良く打ち合わせたほうが良いと思われる。