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

ホームページ制作・システム構築・ＤＢ設計

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

ホームページ制作に関連する記事です。

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

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

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

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

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

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)
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
ホームページ制作・システム構築・ＤＢ設計
●ユタデザイン
●住所：〒135-0062
東京都江東区東雲2-7-5-2105
ユタデザイン
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

カテゴリ

その他の特集記事

月別アーカイブ

リンク

お約束

ユタシステムについて

入谷朝顔市通販

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

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