« ど初心者のレスポンシブウェブデザイン(何で効かないんだ) | トップページ | 旧頁のhtml5及びレスポンシブ化の作業順序覚書 »

ど初心者のレスポンシブウェブデザイン(HTML 実践編)

Media Queriesを使ってPCとスマホの表示を分ける(必要に応じてタブレットサイズも作る。今回は作らない)。

方法としては二種類

  1. それぞれ別のCSSを読み込ませる
  2. 一枚のCSSでそれぞれ別の表示をさせる

今回は2の記述が小難しそうだったので(ひとつ前の記事で疲れ果てて死んでるので)、単純そうな1を採用。

ただし、各インデックスページは1でいいと思うけど、手間や内容を考えるとコンテンツ内の頁は2を採用しようと思う。

とりあえず今回は1の方法について書く。HTML5で書いたのでそこも含めて自分用のメモとして、レスポンシブデザインと関係ない部分も書く。

HTMLのでだしの記述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
   <title>タイトル</title>
<link rel="stylesheet" href="phone.css" type="text/css" media="screen and (max-width: 480px)">
<link rel="stylesheet" href="pc.css" type="text/css" media="screen and (min-width: 481px)">
<link rel="stylesheet" href="print.css" media="print" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=2, user-scalable=yes">
</head>

9行目が4行目の重複? そうなんだよ~。ビルダーが勝手に入れるんだよ。まあいいや。

あと簡単に説明すると、

  • 6行目、480pxより小さいサイズ(スマホとか)はphone.cssの表示に従ってね
  • 7行目、481pxより大きいサイズ(PCとかタブレットとか)はpc.cssの表示に従ってね
  • 10行目、viewportを用いてスマホに適切な表示をさせる

そしてbodyの中の、スマホでは表示したくないもの・・たとえば横幅の大きい画像とかは、  <div class="pconly">スマホで表示したくない部分</div>で囲み、逆もまた  <div class="phoneonly">PCで表示したくない部分</div>で囲んでおく。

これで、HTML側の準備は完了。

pc.cssはいつも通り普通に作って、

/* PCで非表示  */
.phoneonly {       display:none;}
}

この辺の記述を追加しておけばOK。

さて、残る作業はphone.cssの作成だが、こっちはまだこれからなので、でき次第、またこのブログにど初心者のレスポンシブウェブデザイン(CSS 実践編)として残す予定。

|

« ど初心者のレスポンシブウェブデザイン(何で効かないんだ) | トップページ | 旧頁のhtml5及びレスポンシブ化の作業順序覚書 »

web」カテゴリの記事

メモ」カテゴリの記事

日記・コラム・つぶやき」カテゴリの記事