More than 5 years have passed since last update.

レイアウトとレスポンシブデザインの練習

Posted at 2017-09-09

レイアウトの練習

HTMLとCSSの練習用に簡単なレイアウトを製作する。自分用のメモのため、文章は常体で書かせていただく。
製作するレイアウトは以下の画像だ。

また、以下を条件とする。

ヘッダーを固定する
レスポンシブデザインを取り入れる
要素のid名などは特段指定はない
レスポンシブデザインのレイアウトも特段指定はない

ここで簡単にレスポンシブデザインについて触れる。

wikipediaより
レスポンシブウェブデザイン (Responsive Web Design, RWD) は、閲覧者の画面サイズまたはウェブブラウザに応じてデスクトップウェブページが閲覧できることを目指したウェブデザインの手法。

要するに、画面のサイズに合わせてデザインを変えてくれる便利機能ということらしい。

基本のレイアウトを製作する

divで囲う部分を決める

レスポンシブデザインに取り組む前に基本のレイアウトを製作してしまう。
レイアウトを作る際に<div>を使用するわけだが、どのように<div>で囲うか先に決めてしまう。
ヘッダーとフッターになるであろう上下の黒い部分、下部の緑色の部分はそれぞれ独立させるとして、問題は中央の赤、黄色、グレーの部分だ。
囲みすぎも嫌だし、囲いが足りないと後々面倒なのではないだろうか。と、数分悩んだ結果、この3つの部分の大枠を囲い、さらに黄色とグレーを囲うことにした。

id名を決める

次にid名を決めよう。ヘッダーとフッターはいいとして、他の要素をどうするか。
私は緑の部分をメインコンテンツとして、上部のカラフル部分をメインパネルとした。赤いところにロゴ画像が入っていて、黄色とグレーがサイドバー、黄色が上、グレーが下という名前にした。文章よりも画像で見たほうが理解が早いと思う。

ここまでのコードがこちら

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タイトル</title>
<link rel="stylesheet" type="text/css" href="task.css">
</head>
<body>
<!-- ヘッダー　ここから -->
    <div id="header">
    </div>
<!-- ヘッダー　ここまで-->
<!-- メインパネル　ここから -->
    <div id="main_panel">
        <div id="logo">
        </div>
    <div id="sidebar">
        <div id="upper">
        </div>
        <div id="lower">
        </div>
    </div>
    </div>
<!-- メインパネル　ここまで -->
<!-- コンテンツ　ここから -->
    <div id="main">
    </div>
<!-- コンテンツ　ここまで -->
<!-- フッター　ここから -->
    <div id="footer">
    </div>
<!-- フッター　ここまで -->
</body>
</html>

CSSの設定をする

task.css

@charset "utf-8";

body {
    margin: 0;
}

# header {
    position: fixed;    /* スクロール固定 */
    width: 100%;
    height: 70px;
    background-color: black;
    margin: 0;
}
# main_panel {
    width: 960px;
    height: auto;
    margin: 0 auto;
    padding: 70px 0 0;
}
# logo{
    float: left;
    width: 700px;
    height: 400px;
    background-color: red;
    margin: 0 auto;
}
# sidebar{
    float: right;
    width: auto;
    height: auto;
    }
 #upper{
    width: 260px;
    height: 300px;
    background-color: yellow;
    }
# lower{
    width: 260px;
    height: 100px;
    background-color: #ddd;
    }
# main{
    clear: both;
    width: 960px;
    height: 250px;
    background-color: green;
    margin: 0 auto;
}
# footer{
    width: 100%;
    height: 60px;
    background-color: black;
    margin: 0;
}

若干苦労したところは、メインパネルの位置がなかなか中央に寄ってくれなかったのと、ページの隅に余白ができてしまうことだった。
中央に寄せるのは、width: 960px;で解決した。サイズを指定してあげないと中央に寄ってくれないらしい。
ページの余白はbody { margin : 0;}で解決したが、どうもbodyにCSSを適用させるのには気が引ける。子要素にも反映されてしまうか不安になるが、とりあえずこのまま進めていく。

レスポンシブデザインを導入する

本題であるレスポンシブデザインを導入してみる。とはいっても、思っていたより難しくなかった。
まずはhead内に<meta name="viewport" content="width=device-width,initial-scale=1">と記述する。
レスポンシブデザインを導入するための呪文らしい。結構奥が深いので、興味があれば以下のリンクを参照。
GoogleDevelopers ビューポートを設定する
htmlの方への記述はこれで終了。次はCSSの設定をする。

CSSにはメディアクエリというものを記述する。以下がメディアクエリの一例である。
@media screen and (min-width: 500px){ styleを記述 }
{ }内にスタイルを記述する。
上記の記述だと、解像度が500px以上だと、{ }内のスタイルが適用される。という意味になる。
メディアクエリは順番も大事で、解像度がそれぞれ低い⇒高いまたは高い⇒低いの順番で設定しなければならない。

解像度が　低い⇒高い

@media screen and (min-width:300px){
    /* 300px以上の時に読み込まれる */
}

@media screen and (min-width:480px) and (max-width:1024px){
    /* 480px以上1024px以下の時に読み込まれる */
}

@media screen and (min-width:1024px){
    /* 1024px以上の時に読み込まれる */
}

解像度が　高い⇒低い

@media screen and (max-width:1024px){
    /* 1024px以下の時に読み込まれる */
}

@media screen and (max-width:480px){
    /* 480px以下の時に読み込まれる */
}

@media screen and (max-width:300px){
    /* 300px以下の時に読み込まれる */
}

今回は低い⇒高いの順にし、解像度が低い時にはsidebarがlogoの下に入り込むようにした。以下が最終的なhtmlとcssである。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>タイトル</title>
  <link rel="stylesheet" type="text/css" href="task.css">

  <!--最小限のビューポート設定-->
  <meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<!-- ヘッダー　ここから -->
  <div id="header">
  </div>
<!-- ヘッダー　ここまで-->

<!-- メインパネル　ここから -->
  <div id="main_panel">
    <div id="logo">
    </div>

    <div id="sidebar">
      <div id="upper">

      </div>

      <div id="lower">

      </div>
    </div>
  </div>

<!-- メインパネル　ここまで -->

<!-- コンテンツ　ここから -->
  <div id="main">

  </div>
<!-- コンテンツ　ここまで -->

<!-- フッター　ここから -->
  <div id="footer">

  </div>
<!-- フッター　ここまで -->
</body>
</html>

task.css

@charset "utf-8";

body {
  margin: 0;
}

# header {
  position: fixed;    /* スクロール固定 */
  width: 100%;
  height: 70px;
  background-color: black;
  margin: 0;
}

@media screen and (min-width:330px) {
  #main_panel {
    width: 100%;
    height: auto;
    margin: 0px auto;
    padding: 70px 0 0;
  }

  #logo{
    width: 100%;
    height: 400px;
    background-color: red;
    margin: 0 auto;
  }

  #sidebar{
    width: 100%;
    height: auto;
  }

  #upper{
    width: 100%;
    height: 300px;
    background-color: yellow;
  }

  #lower{
    width: 100%;
    height: 100px;
    background-color: #ddd;
  }

  #main{
    clear: both;
    width: 100%;
    height: 250px;
    background-color: green;
    margin: 0 auto;
  }
}

@media screen and (min-width:1000px) {
  #main_panel {
    width: 960px;
    height: auto;
    margin: 0 auto;
    padding: 70px 0 0;
  }


  #logo{
    float: left;
    width: 700px;
    height: 400px;
    background-color: red;
    margin: 0 auto;
  }

  #sidebar{
    float: right;
    width: auto;
    height: auto;
  }

  #upper{
    width: 260px;
    height: 300px;
    background-color: yellow;
  }

  #lower{
    width: 260px;
    height: 100px;
    background-color: #ddd;
  }

  #main{
    clear: both;
    width: 960px;
    height: 250px;
    background-color: green;
    margin: 0 auto;
  }
}

# footer{
  width: 100%;
  height: 60px;
  background-color: black;
  margin: 0;
}

最後に

はじめは難しいと感じていたレスポンシブデザインだが、実際に導入すると思っていたよりも簡単だった。奥深いところまでは理解に及んでいないが、それなりに実装できるレベルにはなったかと思う。
レスポンシブデザインとは関係ないが、コードを貼る際にコメントが少ないことに気が付いたので、今後はコメントも視野に入れてコードを機筒していきたい。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up