2013-05-09から1日間の記事一覧

HTML5+CSS3【マルチデバイス】― プロトタイプを作る準備

ゼロから始めるレスポンシブWebデザイン入門 ASCII.jp 日本のスマホサイトは2年間でこんなに変わったWebサイトのRetina対応は必要か? 流行期を過ぎたレスポンシブ・Webデザインのこれから レスポンシブWebデザインのメリット、デメリット比較まとめ 一個覚…

HTML5+CSS3【マルチデバイス】―レスポンシブWebデザイン主要レイアウトパターン

レスポンシブ主要レイアウトパターン プロトタイプを作る 可変レイアウト 可変レイアウトによるレスポンシブWebデザイン 最も利用頻度の高いレイアウトパターン Sサイズ 599px以下 Mサイズ 600px〜979px Lサイズ 980px以上 固定レイアウト 各画面サイズで固…

HTML5+CSS3【マルチデバイス】―CSS3のメディアクエリ

メディアクエリとスタイルシート 横幅をいくつかの範囲にわけてデザインを切り替える 「CSS3メディアクエリ」を利用する 特定の画面サイズで表示したときに適用するスタイルシート <link rel="stylesheet" href="スタイルシート名.css media="only メディアタイプ and (特性)" > 外部スタイルシートを読み込む<link rel="stylesheet" href="外部スタイルシート名.css media="only メディアタイプ and (特性)" > CSS内に設定を記述@media only メディアタイ</link></link>…

HTML5+CSS3【マルチデバイス】―CSS3のメディアクエリ02

デザインのベースとなるスタイル 【 例 】 style-s.css:599px以下 style-m.css:600px〜979px style-l.css:980px以上 【 書式 】 《sample.html》 スマートフォンの場合は、自動的に「style-s.css」が選択される <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>メディアクエリ</title> </meta></meta></head></html>