画面のサイズでCSSを切替える方法(レスポンシブWEB)

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)

レスポンシブ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の作成について(まとめ)








検索フォーム
RSSリンクの表示
リンク