レスポンシブ対応

はじめに

ホームページを始めたのは 17、8年前のことである。当時はスマホのことを考える必要はなかったが、 徐々にスマホのウェイトが高まってきた。ホームページを作り変えるに当たり、 今回は、パソコンとスマホでの表示に対応する。

これまではページを XMLファイルで一括管理して、目次ページはプログラムで生成してきたが、 ホームページの全面更新に当たり、少なくとも当面は、目次ページは手作業で維持管理する。

viewport

HTMLのヘッダに次の行を入れることが推奨されている[2]。

メディアクエリ(CSSでパソコンとスマホに対応する)

CSSの全体構造を次のようにする。 現在は、このメディアクエリを使用していないので、この動作確認は行っていない。

     共通のCSS

@media screen and (min-width: 481px) {
  　パソコン用のCSS
}

@media screen and (max-width: 480px) {
　  スマホ用のCSS
}

リファレンス

来歴およびノート

2023.1.20 preのスクロールに成功した

当初、スマホで文字列の幅が最大を超えたとき、パソコンは横スクロールするが、スマホではうまく行かなかった。 長年同じCSSファイルを使ってきたため、乱れがあったようだ。整理すると、横スクロールするようになった。