WEB ページ作成基準スマートフォン対応

このページは，自分が WEB ページを作るときのメモです。ただし，一般の方が読んでも意味がわかるように，スマートフォンで読みやすくするために何をしているかを説明します。

以前のページは，パソコンの横幅を前提にして作っていました。そのままスマートフォンで開くと，画面が小さいため，文字が細かく表示されたり，横スクロールが必要になったりします。特に，左側のメニュー，横に長い表，画像，ソースコードの表示があるページでは読みにくくなります。

そこで，HTML のヘッダー部にスマートフォンの画面幅をブラウザへ知らせる指定を入れ，CSS では画面が狭い場合だけレイアウトを変えます。パソコン用の表示はできるだけそのままにし，スマートフォンでは本文を一列にし，画像や表やソースコードが画面からはみ出しにくいようにします。

スマートフォン対応で最初に行うことは，<head> の中に viewport の指定を入れることです。この一行を入れると，ブラウザはページの横幅をスマートフォンの画面幅に合わせて計算します。

width=device-width は，ページの幅を端末の画面幅に合わせる指定です。initial-scale=1.0 は，最初に表示するときの拡大率を 1 倍にする指定です。これにより，パソコン用の大きな横幅を無理に縮小して表示する状態を避けられます。

このページでは，すでに次の行をヘッダー部に記載しています。書き方は，Chat-GPT の指示に従ったものです。

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

CSS では，@media screen and (max-width: 768px) を使い，画面幅が 768px 以下の場合だけスマートフォン用の指定を適用します。これにより，パソコンで見たときの表示を大きく変えずに，スマートフォンだけ読みやすくできます。

主な考え方は，横に並んでいる部品を縦に並べ直すことです。このサイトでは，ページ全体が左側メニューと本文の表組みになっているため，スマートフォンでは左側メニューを非表示にし，本文の幅を画面いっぱいにします。また，画像は画面幅を超えないようにし，表やソースコードは長い文字で横にはみ出さないようにします。

下の CSS は，Chat-GPT の指示に従って作成したものです。必要に応じて，この内容を共通の CSS ファイルへ追加します。

/* ============================================================
   Mobile layout for Yamamoto's Laboratory
   PC layout is kept unchanged.
   This block is applied only to narrow screens.
   ============================================================ */

@media screen and (max-width: 768px) {

  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  table {
    max-width: 100%;
  }

  .head {
    width: 100%;
    min-height: 70px;
  }

  .head span {
    position: static !important;
    display: block;
    padding: 15px 10px;
    font-size: 150% !important;
  }

  #navigation ul {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin: 0;
  }

  #navigation li {
    box-sizing: border-box;
    width: 50%;
    padding: 6px 4px;
    text-align: center;
  }

  .side_main,
  .side_main tbody,
  .side_main tr,
  .side_main td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }

  .side {
    display: none;
  }

  .main {
    width: 100% !important;
    padding: 10px !important;
    box-sizing: border-box;
  }

  .main table {
    width: 100% !important;
  }

  .main td {
    word-break: break-word;
  }

  .main div[style*="float:right"] {
    float: none !important;
    margin: 10px auto !important;
    width: 100% !important;
    text-align: center;
  }

  .main div[style*="position:absolute"] {
    position: static !important;
    margin: 10px 0;
    text-align: right;
  }

  .flex_align_fig_cap {
    float: none !important;
    margin: 10px auto !important;
    width: 100% !important;
  }

  .whats_new {
    width: 100% !important;
  }

  .whats_new td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
    padding: 4px 0;
  }

  .whats_new_page {
    font-size: 90%;
    line-height: 1.8;
  }

  h1, h2, h3 {
    line-height: 1.4;
  }

  pre, code {
    white-space: pre-wrap;
    word-break: break-word;
  }

}

この対応の要点は，スマートフォン専用の別ページを作るのではなく，同じ HTML を画面幅に合わせて見せ方だけ変えることです。内容を二重に管理しなくてよいので，ページの更新もしやすくなります。

参考資料

更新履歴