レスポンシブ対応 - To Be Continued

1冊ですべて身につくHTML & CSSとWebデザイン入門講座で学ぶWebデザイン。

レスポンシブWebデザインとは、表示領域の幅によって見え方がかわるようにデザインされたWebサイトのこと。 (P216)

カラム数を1カラムにしたり、メニュー用のアイコンをタップすることで、ナビゲーションメニューを表示させる方法がある。 (P217)

viewportの設定

viewportとは、様々なデバイスにおける表示領域のこと。 (P218)

    <meta name="viewport" content="width=device-width, initial-scale=1">

VSCodeでEmmetを使うと自動で入力される呪文のことですね。

メディアクエリーの基本

メディアクエリーは、Webページが表示された画面サイズに合わせて適用する、CSSを切り替え機能。 (P218)

@media (max-width: 600px) {
  h1 {
    color: #0bd;
  }
}

上記の記述では、0から600pxの範囲の画面サイズに足して <h1> のテキストの前景色の色を指定している。

文字サイズと余白を調整

モバイル版の全ページ共通部分を「style.css」の一番下に記述する。 (P219)

/* MOBILE STYLE 0-600px*/
@media (max-width: 600px) {
  .page-title {
    font-size: 2.5rem;
  }

  /* MOBILE HEADER */
  .main-nav {
    font-size: 1rem;
    margin-top: 10px;
  }

  /* MOBILE HOME */
  .home-content {
    margin-top: 20%;
  }
}

コンテンツを縦並びにする

デスクトップバージョンでは、ロゴとナビゲーションメニューをFlexboxを使って横に並べた。スマートフォンバージョンでは縦に並べる。 (P220)

  .page-header {
    flex-direction: column;
    align-items: center;
  }

いいえ、書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座の通りに縦並びになりません。

CSSを見直したり、ブラウザの表示をリロードしたり...

数時間が溶ける。

「index.html」は縦並びになっている
「news.html」に変化なし
viewport を「news.html」に追加するのを忘れていた

わかってしまえば簡単なことです。

すべてのページでレスポンシブ対応するので、すべてのページに viewport を追加するの必要があるのは当然です。

今回は書籍に従ってEmmetを使わなかった。 viewport の大切さが身にしみた。多分一生忘れない！

続いてnewsページのメインエリアとサイドバーを縦に並べる。

@media (max-width: 600px) {
  ...
  /* NEWS */
  .news-contents {
    flex-direction: column;
  }
  article,
  aside {
    width: 100%;
  }
}

縦並びになりました。しかし、コンテンツを横幅いっぱいに広げる width: 100%; が効いていません。

数時間が溶ける。

VSCodeの「Live Server」でWebサイトの見栄えを確認している。

「html」ファイルをブラザにドロップすると width: 100%; が効いた状態で表示された。

VSCodeの「Live Server」を停止し、VSCodeを起動し直す。 width: 100%; が効いた状態で表示された。

「setting.json」の設定の一部。

  "files.autoSave": "onFocusChange",

Chrome拡張の「Clear Cache」で時々キャッシュを削除している。「ファイルのURLへのアクセスを許可する」がONになっていない。

これが原因？

「ファイルのURLへのアクセスを許可する」をONにして width: 100%; を別の数値にして上書き保存。リアルタイムで変更が反映された。

でも今まではリアルタイムで変更が反映されていました。

post-xxx クラスの文字サイズや余白の調整を行います。 (P221)

タイトル、日付、カテゴリのスタイルがスッキリした。

@media (max-width: 600px) {
  .page-title {
    font-size: 2.5rem;
  }
  ...
  aside {
    margin-top: 60px;
  }
  .post-info {
    margin-bottom: 30px;
  }
  .post-date {
    width: 70px;
    height: 70px;
    font-size: 1rem;
  }
  .post-date span {
    font-size: 0.875rem;
    padding-top: 2px;
  }
  .post-title {
    font-size: 1.375rem;
  }
  .post-cat {
    font-size: 0.875rem;
    margin-top: 10px;
  }
  .post-title,
  .post-cat {
    margin-left: 80px;
  }
}

レスポンシブ対応難しいすぎるでしょ！今日はふてくされて寝る。