スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。



画面のサイズで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リンクの表示
リンク
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。