WEBCRE8TOR.COM中国短期大学情報ビジネス学科 メディア科目ブログ
[コーディングの実践:NORMAL] 03 CSS3 Media QueriesでレスポンシブWebデザイン対応編
実践編

[コーディングの実践:NORMAL] 03 CSS3 Media QueriesでレスポンシブWebデザイン対応編

2023年12月06日 ／最終更新：2024年11月16日

少し発展的なコーディング練習03 CSS3 Media QueriesでレスポンシブWebデザイン対応編

[コーディングの実践:NORMAL] 03 CSS3 Media QueriesでレスポンシブWebデザイン対応編

headタグのhtmlコーディング

編集画面を「index.html」のタブに切り替えましょう。

metaタグのhtmlコーディング

授業で解説した「viewport」を追記してレスポンシブWebデザイン対応の準備を行いましょう。

metaタグを追記する

では再びheadタグの編集を行います。

  1. <meta charset=”utf-8″ />(4行目)の下を改行する
  2. ハイライトされている5行目の内容を記述する。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1 , user-scalable=no">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>
<title>LEVEL NORMAL</title>
<!-- 下部省略 -->

ブラウザで確認する

書き換えができたら「index.html」をCtrl + Sし、ブラウザで「index.html」を開いてF5キーしてみましょう。
実はこの時点で記述前後の明確な違いがあるんですが、どう違うのかは実際にブラウザで確認してみましょう。
キーボード「F12」キーを押して「デベロッパーツール」を起動して各端末の表示を見てみましょう。

「article {}」のcssコーディング

編集画面を「main.css」のタブに切り替えましょう。
「main {}」のブロック自体には特に指定するプロパティ・値がないため割愛します。

「article {}」のcssコーディング

まずは「article {}」のcssの指定を追加しましょう。

  1.  article {(56行目)の記述の下を改行する。
  2. ハイライトされている57〜59行目の内容を記述する。

main.css

/* 上部省略*/

main {
  div#mainimg {
    width: 100%;
    margin-bottom: 100px;
  }
  article {
    @media screen and (max-width: 768px) {
      padding: 0 30px; /* article {}の内側左右に30pxずつ余白を取る */
    }
    section {
      h2 {
        margin-bottom: 30px;
        font-size: 30px;
        line-height: 40px;
      }
/* 下部省略*/

padding: 0 30px;= article {}の内側左右に30pxずつ余白を取る

授業内で紹介したレスポンシブWebデザイン対応の技術です。
「@media screen and (max-width: 768px) {～}」は、
「最大の横幅が768pxまで(タブレット縦向き以下)に適用する」という意味になります。

PC表示とは違いスマホは表示領域が限られています。
画像や文字を表現できるスペースが横幅がとても小さいのです。

左右に余白がない状態だとコンテンツを読むのが困難であるため、
見やすさの向上ために「article {}」に対してスマホサイズの場合にのみ、
padding: 0 30px;として「上下の余白0・左右の余白30pxずつ」という記述を追記しました。

ブラウザで確認する

書き換えができたら「main.css」をCtrl + Sし、ブラウザで「index.html」を開いてF5キーしてみましょう。
「PROFILE」および「BLOG」のブロックの左右に余白は生まれましたか?

「section#profile」の「.content {}」のレスポンシブWebデザイン対応のcssコーディング

次は「main article section#profile .content {}」のcssの指定を追加しましょう。

  1. gap: 30px;(72行目)の記述の下を改行する。
  2. ハイライトされている73〜76行目の内容を記述する。

main.css

/* 上部省略*/

main {
  div#mainimg {
    width: 100%;
    margin-bottom: 100px;
  }
  article {
    @media screen and (max-width: 768px) {
      padding: 0 30px;
    }
    section {
      h2 {
        margin-bottom: 30px;
        font-size: 30px;
        line-height: 40px;
      }
      &#profile {
        .content {
          margin-bottom: 50px;
          display: flex;
          justify-content:
          align-items: center;
          gap: 30px;
          @media screen and (max-width: 768px) {
            flex-wrap: wrap; /* 横並びになっている画像とテキストを折り返せるように */
            text-align: left;
          }
          .img {
            max-width: 150px;
          }
        }
      }
/* 下部省略*/

flex-wrap: wrap;= 横並びになっている画像とテキストを折り返せるように

「PROFILE」の画像とテキストの親要素「.content {}」では、
「flex-wrap」プロパティには特に指定を行っていないため、
初期値「nowrap(折り返さない)」が適用されています。

そのため、スマホの横幅サイズになると無理やり縮小して表示してしまいます。
これを見やすくするため画像とテキストを折り返せるように「flex-wrap: wrap;」と、
スマホ表示ではPC表示の指定を打消すように指定を行っています。

ブラウザで確認する

書き換えができたら「main.css」をCtrl + Sし、ブラウザで「index.html」を開いてF5キーしてみましょう。
「PROFILE」の画像とテキストは折り返しましたか?ついでに「text-align: left;」で文字が左揃えになっていると思います。

「section#blog」の「li {}」のレスポンシブWebデザイン対応のcssコーディング

次は「section#blog」の「li {}」のcssの指定を追加しましょう。

  1. width: calc( 100% / 3 – 20px );(90行目)の記述の下を改行する。
  2. ハイライトされている91〜93行目の内容を記述する。

main.css

/* 上部省略*/

main {
  div#mainimg {
    width: 100%;
    margin-bottom: 100px;
  }
  article {
    @media screen and (max-width: 768px) {
      padding: 0 30px;
    }
    section {
      h2 {
        margin-bottom: 30px;
        font-size: 30px;
        line-height: 40px;
      }
       {
        .content {
          margin-bottom: 50px;
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 30px;
          @media screen and (max-width: 768px) {
            flex-wrap: wrap;
            text-align: left;
          }
          .img {
            max-width: 150px;
          }
        }
      }
       {
        margin-bottom: 100px;
        ul {
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          gap: 30px;
          li {
            width: calc( 100% / 3 - 20px );
            @media screen and (max-width: 768px) {
              width: 100%; /* li {}の横幅を100%に変更 */
            }
          }
        }
      }
/* 下部省略*/

width: 100%; = li {}の横幅を100%に変更

先ほどと同様にスマホで表示した場合にのみ対応する記述です。

ここではBLOGの記事リスト(#blog ul)の項目(#blog ul li)に、
「width: calc( 33.3% – 20px );」と指定した横幅を「width: 100%;」と指定し、
またもやスマホ表示ではPC表示の指定を打消すように指定を行っています。

項目の横幅が100%になり、記事リストも折り返すため見やすくなりましたね。

ブラウザで確認する

書き換えができたら「main.css」をCtrl + Sし、ブラウザで「index.html」を開いてF5キーしてみましょう。
「BLOG」の記事リストの項目の横幅が、article {}の左右の余白を除いていっぱいになり、縦に3件並ぶレイアウトになりましたか?
次はJavaScriptプラグイン「slick.js」によるスライドショーの実装を行いましょう。

Webサイトコーディング[NORMAL] 04 jQueryプラグインでスライドショー実装編

RELATED POST関連記事

© 2024 RYU-YA DESIGN.

PAGE TOP
offcanvas