読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

レスポンシブWebデザイン

レスポンシブWebデザインの誕生

  • Responsive Web Design は、2010年イーサン・マルコッテ氏が提唱した制作手法です

レスポンシブWebデザインのデメリット

  1. CSSの記述が複雑になる
  2. 無駄な処理が生じる恐れがある
  3. PCサイトに切り替えられない
  4. IE8以前の古いブラウザをサポートできない

メディアクエリを使った指定

  • CSSの指定を行う際、条件を付加できる機能
メディアクエリの記述方法
@media メディアタイプ and(条件){
  セレクタ(プロパティ:値; プロパティ:値;・・・・・)
}
  • メディアタイプは「screen(画面)」「print(印刷時)」「projection(プロジェクター)」「all(すべて)」などを指定できます
  • 条件を幅で指定するときは「max-width」または「min-width」を指定し、「:コロン」の後に「単位付きの数値」で条件を記述します
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メディアクエリ</title>
<style>
/* reset */
html, body, h1, p {
  margin: 0;
  padding: 0;
}

/* font-size */
html { font-size: 62.5%; }  /* =10px */
body { font-size: 16px; font-size: 1.6rem; }  /* =16px */
h1 { font-size: 32px; font-size: 3.2rem; }
p { font-size: 16px; font-size: 1.6rem; }

/* layout */
#container {
  width: 760px;
  margin: 0 auto;
}
h1{
  margin-bottom: 16px;
  padding-top: 20px;
  border-bottom: solid 3px #F00;
}

@media screen and (max-width:480px) {
  #container {
    width: 100%;
  }
  h1{
    font-size: 2.0rem;
    background: #63A484;
    color: #FFF;
    padding: 5px 0 4px 0;
    border: none;
    text-align: center;
  }
  p{
    margin: 0 1.6rem;
    color: #947F44;
  }
}
</style>
</head>
<body>
<div id="container">
<h1>メディアクエリ</h1>
<p>メディアクエリを使うと、ブラウザのウィンドウ幅に応じて各要素の書式を変更できるようになります。なお、スマートフォンでは、端末画面の幅(ピクセル数)が「ブラウザのウィンドウ幅」に相当します。</p>
</div><!-- /#container -->
</body>
</html>




画像をレスポンシブに

  • ブレイクポイント「640px」までが「スマートフォン用の指定」
  • それを超えると、PC用の指定が適用されます
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>メディアクエリ:画像</title>
<style>
/* reset */
html, body, h1, p {
  margin: 0;
  padding: 0;
}

/* font-size */
html { font-size: 62.5%; }  /* =10px */
body { font-size: 16px; font-size: 1.6rem; }  /* =16px */
h1 { font-size: 20px; font-size: 2.0rem; }
p { font-size: 16px; font-size: 1.6rem; }

/* layout */
body {
  padding: 20px;
}
  img {
  width: 320px;
  vertical-align: middle;
  }

@media (max-width:640px) {
  body{ padding: 0; }
  h1 {
    font-size: 2.0rem;
    padding: 10px;
    background: #333;
    color: #FFF;
  }
  img{
    width: 100%;
  }
}
</style>
</head>
<body>
<h1>メディアクエリ:画像</h1>
<p><img src="img/01.png"><img src="img/02.png"></p>
</body>
</html>