/* Google Analytics ▽ */ /* Google Analytics △ */

WEB制作の勉強メモ / 猫脳人間

HTML CSS JavaScript ActionScript jQuery WordPress PHP Illustrator Photoshop Flash … 猫サイズの脳でも覚えるぞ と…

レスポンシブ・ウェブ・デザイン、Google Image Search風ギャラリー の授業メモ

yachin29.hatenablog.com

モバイル フレンドリー テスト

CSS 一枚で記述する場合

行の上の記述が影響するので、
影響させない場合は、リセットか、
上書きする指定が必要。

<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
@media screen and (min-width:641px) and (max-width:959px) {

#container {
  width: 640px;
  margin: 0 auto;
}

  #s-3rd {
    float: none;
    width: 640px;
  }
  
  #s-3rd ul {
    width: 320px;
    float: left;
  }

}


@media screen and (max-width:640px) {

#container {
  width: 320px;
  margin: 0 auto;
}

  section {
    float: none;
  }

}

CSS ファイルを振り分ける場合

  • @media ~ は記述しなくて良い
  • 他のメディア対応のファイルのリセットをしなくて良い
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/style-m.css" media="only screen and (min-width:641px) and (max-width:959px)">
<link rel="stylesheet" href="css/style-s.css" media="only screen and (min-width:640px)">
<link rel="stylesheet" href="css/style-l.css" media="only screen and (min-width:960px)">

■ こんな感じになりました。↓
楽しいおかず|Responsive










Google Image Search 風イメージギャラリー

yachin29.hatenablog.com

■ こんな感じになりました。↓
Google Image search UI








広告を非表示にする