ソースコピーですぐ使えてスマホ専用サイト作成に便利！PC・スマートフォンサイトの振り分けJavaScript作りました。 | HTML5でサイトをつくろう

2012/05/28 930 users JavaScript HTML5 ユーザーエージェント 内容

PCとスマートフォンで違うページを閲覧させたい場合は、ユーザーエージェントを判別して切り替えることができます。 メディアクエリなどを使用したレスポンシブWEBサイトの場合は1ソースでそれぞれのデバイスに振り分けますが、PCサイトとスマホサイトで内容なども変更させる場合は、それぞれサイトを作って振り分ける必要があります。 ユーザーエージェントを判別するには、PHPやJavaScriptや.htacc... 続きを読む

簡単なサンプルで学ぶ！ゼロからはじめるレスポンシブWebサイト初級編 ～メディアクエリを使ってCSSを分岐させる～ | HTML5でサイトをつくろう

2012/05/16 613 users CSS XHTML サンプル HTML5 チュートリアル

スマートフォンサイトとPCサイトの振り分けを考える上で、ひとつの選択肢となる「レスポンシブWebデザイン」。 そこで今回はレスポンシブWebデザインを使用したサイトの制作や仕組みを理解しておくためにCSS3のメディアクエリを使用してレスポンシブWebデザインのデモソースとチュートリアルをつくりました。 今回はXHTMLでコーディングしたソースで、CSS3のメディアクエリを使って、PC、タブレット、... 続きを読む

CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き

2011/07/13 1188 users 注意書き iPhone Media Queries iPad

WebサイトをiPhoneやiPadに対応させるためによく使われるCSS3のMedia Queries（メディアクエリ）。CSS3 Media Queriesを使うときの注意書きなどをまとめてみました。今回このブログ、Webデザインレシピを、iPhone などでも見れるようにリデザインしました。使用したのは CSS3 の Media Queries（メディアクエリ）。メディアクエリの使い方や感想、... 続きを読む