ローソンポンタポイント生活＆私生活日記

link要素のmedia属性の指定により、画面サイズでCSSの切り替えをします。
サンプルは以下のようにしています。

＜ink 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="style.css" type="text/css" rel="stylesheet" /＞

※ブログの都合で　＜＞括弧　は全角で記載しています。コピペする際は、半角に

480px以下のサイズのものは、smart.css（スマートフォン用のCSS）
481px以上のサイズのものは、style.css（パソコン用のCSS）

で切り替えをします。
これにより、スマートフォンで見たときと、パソコンで見たときの構成の制御をします！


レスポンシブWEBの作成について（まとめ）

レスポンシブWEBで、まずはスマートフォンで見られることを意識して、
htmlのヘッダ部にスマートフォンデバイス向けの機能指定をします。

＜meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=2.0,user-scalable=yes"＞
＜meta name="format-detection" content="telephone=no"＞

※ブログの都合で　＜＞括弧　は全角で記載しています。コピペする際は、半角に

それには、viewport と format-detection を使用します。
viewport はスマートフォン向けの機能であり、横の読込みサイズの調整をしたり、
拡大、縮小を可能にさせたりする機能を指定するものです！

format-detection　で　数字が勝手にリンクされないようにします。
スマートフォンでサイトを見る際に、電話番号等がリンクされないようにします。


レスポンシブWEBの作成について（まとめ）