昔作ったウェブサイトの近代化 スマホ対応
10年以上も前に作ったウェブサイトの近代化、前回のhttps対応に次いでやっておいた方が良いスマホ対応のやり方。ここではすでに現在使ってるCSSを最小限の改変で対応する方法を説明します。
viewportによるレスポンシブデザイン
ウェブサイトをスマホ対応にするというのは、小さい画面でアクセスされた場合でも、そのサイズに合わせて見やすい表示に動的に変更するという事です。CSSはスクリーンのサイズによる条件分岐を設ける機能があり、これを利用します。
まず、CSSの前に、その条件分岐を利用するために以下の一文をhtmlの<head>の中に入れます。
<meta name="viewport" content="width=device-width, initial-scale=1">
次にCSSの方は、max-widthとmin-widthの値に依って条件分岐させます。例えばこのサイトの例だと、左が本文で右にメニューの２カラムレイアウト。スマホ向けにはそれを1カラムでメニューを本文の下に移動する様にしました。float:leftになってるboxはそれが入る余裕のある横幅だとすでに左にあるboxの上端揃いで右に置かれますが、入るだけの横幅がないと次の行、つまりすでにあるboxの左端揃えで下に来きます。以下、その大まかなイメージと実際のCSSです。#left のboxはデバイスに関わらず幅190px固定なので、スマホの条件の場合は#mainの右に入る余裕がなくなり、自動的に下に行きます。(#leftというboxは名前に反して右に置いてます。)
/* smart phones */
@media screen and (max-width:764px) {
#wrap {
margin-right: auto; margin-left: auto;
width: auto;}
#main {
width:95%;
padding: 5px;
float: left;}
}
/* PC */
@media screen and (min-width:765px) {
#wrap {
margin-right: auto; margin-left: auto;
width: 765px;}
#main {
width:510px;
padding:20px;
float: left;}
}
#left { float: left; width: 190px;}
横幅が764px以下のデバイスの場合はスマホ用、765px以上ではPC用のレイアウトにしてます。もっと細分化も出来ますが、それによる見る側のメリットがあるのはもっとカラムが分かれてるレイアウトだけで、2カラムだとスマホかPCの２択で十分でしょう。
他のデバイスでの見え方を実物なしで確認
html/CSSを変更したら、次にいろんな横幅のデバイスで実際見たときにちゃんと表示されるか確認したいですね。しかし実機がなくても確認する方法があります。PCのウェブブラウザ(Safari, Firefox, Chrome)には仮想的に他のデバイスでどう見えるか確認できるメニューがついてます。以下は、Safariの例。
モバイルフレンドリーテスト
Googleが提供している、モバイルフレンドリーテストがあります。このページで、テストしたいURLを入れると結果がすぐ表示されます。
サーチランキングへの影響
同じワードで検索してるのに、スマホからとPCからだとは違う結果が表示されます。それは、スマホからの検索ではスマホフレンドリーなサイトが上位に来る様になってるからです。具体的に何がランキングの考慮に入れられてるかは公表されてませんが、上のモバイルフレンドリーテストの結果を良くしておくことに間違いはないでしょう。
[…] 昔作ったウェブサイトの近代化 スマホ対応 […]
Pingback by 昔作ったウェブサイトの近代化 https | Ippei813 Nikki — March 22, 2020 @ 2:18 am