HTML5

chromeでiphone(スマートフォン)サイトの検証方法

chromeの画面で右クリックで要素検証。 要素検証の右下の設定(setting)ボタンで設定画面を開き、overridesを開く。 EnableとUserAgentにチェックをつけ、iphoneにチェック。

HTML5 レスポンシブデザイン Media Queries 外部スタイルシートの読み込み

レスポンシブデザイン「Media Queries」の外部スタイルシートの読み込みの記述。 <link rel="stylesheet" href="style-l.css">//PC用 <link rel="stylesheet" href="style-m.css" media="only screen and (min-width:640px) and (max-width:979px)">//tablet用 <link rel="stylesheet" href="style-s.css" media="only screen and (max-width:639px)">//smart…</link></link></link>

HTML5 レスポンシブデザインサイト スタイルシートの書き方

HTML5 レスポンシブデザインサイト スタイルシートの書き方 以下のようにスタイルシートを3つ用意する。 各サイズで読み込むスタイルシートが変わる。 <link rel="stylesheet" href="style-small.css">//スマートフォンサイト用 <link rel="stylesheet" href="style-medium.css" media="only screen and (min-width:600px) and (max-width:979px)">//タブレット用 </link></link>

レスポンシブデザインで作ったサイトを『i Phone』画面で検証方法

OSがWindowsの場合は、まずSafariをダウンロード。 Safariのツールから[設定]を選択。 詳細の下にある、メニューバーを開発にチェックをつける。 [開発]→ユーザーエージェント→ i Phoneを選択。

HTML5 レスポンシブデザイン『Media Queries』の記述

ヘッド内に以下のメタの記述。 <meta name="viewpoint" content="width=device-width"> //for IE 各…</meta>

HTML5 SECTION、ARTICLEの使い方

SECTIONとDIVの違い SECTIONはアウトラインの為の囲み。必ず見出しと文が必要。レイアウトの為の囲みはDIVを使う。 ARTICLE ARTICLEは単独で再利用できる部分のみに使う。例えば、他のどのページに入れても成り立つようなブログやニュースサイトの記事。