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

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

2023年12月06日

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

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

<head></head>タグのhtmlコーディング

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

<meta>タグのhtmlコーディング

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

<meta>タグを追記する

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

  1. 4行目の<meta charset=”utf-8″ />の下を改行する
  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」キーを押して「デベロッパーツール」を起動して各端末の表示を見てみましょう。

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

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

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

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

  1. 「main #mainimg {〜}」と「main article section h2 {～}」の間を改行する。
  2. ハイライトされている80〜84行目の内容を記述する。

main.css

/* 上部省略*/
main #mainimg {
  width: 100%;
  margin-bottom: 100px;
}

@media screen and (max-width: 768px) {
  main article {
    padding: 0 30px; /* article {}の内側左右に30pxずつ余白を取る */
  }
}

main article 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」のブロックの左右に余白は生まれましたか?

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

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

  1. 「main article section#profile .content {〜}」と「main article section#profile .content .img {～}」の間を改行する。
  2. ハイライトされている100〜105行目の内容を記述する。

main.css

/* 上部省略*/
main article section#profile .content {
  margin-bottom: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

@media screen and (max-width: 768px) {
  main article section#profile .content {
    flex-wrap: wrap; /* 横並びになっている画像とテキストを折り返せるように */
    text-align: left;
  }
}

main article section#profile .content .img {
  max-width: 150px;
  aspect-ratio: 1 / 1;
}
/* 下部省略*/

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

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

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

ブラウザで確認する

書き換えができたら「main.css」を上書き保存(Ctrl + S)し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。

「PROFILE」の画像とテキストは折り返しましたか?
ついでに「text-align: left;」で文字が左揃えになっていると思います。

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

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

  1. 「main article section#blog ul li {〜}」と「footer {～}」の間を改行する。
  2. ハイライトされている133〜137行目の内容を記述する。

main.css

/* 上部省略*/
main article section#blog ul li {
  width: calc( 33.3% - 20px );
}

@media screen and (max-width: 768px) {
  main article section#blog ul li {
    width: 100%; /* li {}の横幅を100%に変更 */
  }
}

footer {
  margin-top: auto;
}
/* 下部省略*/

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