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

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

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


に関連する記事です。

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

PC用とスマホ用の表示切り替えをCSSだけで行う方法について、追記します。
弊社では、現在そのほとんどがbootstrapのフレームワークを使って構築しています。

少しとっつきにくいbootstrap(ブートストラップ)ですが、構造を理解していただければ、非常に簡単なCSSフレームワークです。

PC用のソースとスマホ用のソースが一枚のhtmlファイルに記述できるので、簡単です。

<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
ここに表示したい内容
</div><!--/.col-lg-3 col-md-3 col-sm-3 col-xs-12 -->
</div><!--/.row -->
</div><!--/.container -->
というように記述します。

以下、class指定している設定値の説明です。
col-lg-数字 = 画面サイズが≥1200pxの場合このクラスが適応されます。
col-md-数字 = 画面サイズが≥992pxの場合このクラスが適応。
col-sm-数字 = 画面サイズが≥768pxの場合このクラスが適応。
col-xs-数字 = 画面サイズが<768pxの場合このクラスが適応。
となります。
数字には、ブロック要素として1〜12が入ります。

デバイスごとに隠したいコンテンツがある場合は、
hidden-を使います。
hidden-lgとか、hidden-xsとかです。
弊社では、bootstrap.cssの1580行目付近にある、
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
という設定を、
@media (min-width: 1200px) {
.container {
width: 970px;
}
}
という設定に変更して、画面が1200以上でも、横幅を970に設定しています。

サンプルサイトはこちら。
ブラウザの右下をつかんでウインドの幅を変更すると状態が変更されます。



bootstrapのサイト構成は以下。
bootstrap/
├── css/
│ ├── bootstrap.css
│ └── bootstrap.css.map
├── js/
│ └── bootstrap.js
└── fonts/
  ├── glyphicons-halflings-regular.eot
  ├── glyphicons-halflings-regular.svg
  ├── glyphicons-halflings-regular.ttf
  ├── glyphicons-halflings-regular.woff
  └── glyphicons-halflings-regular.woff2

bootstrapで作ったサイトはこちら。
http://www.kankyo-d.co.jp/
http://www.frogrock.jp/
http://www.pleasure-mikunigaoka.com/
いずれもおなじHTMLファイルがCSS制御で表示しています。



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



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