レスポンシブ対応は必須

ウェブサイトについてレスポンシブと言った場合は、ウェブサイトを見ている機器の画面幅に合わせて、デザインを最適化することを指す。

一日かけて、いろいろ調べ、初級者としてはまずまずの出来になったので、結果をシェア。

 

レスポンシブ、レスポンシブ対応、レスポンシブデザイン

レスポンス(response)は回答とか応答とか反応とかの意味合いの英語。

その形容詞形がレスポンシブ(responsive)だ。

ウェブサイトでレスポンシブと言った場合、ウェブサイトを見にきた人がどんな機器で見ているかを察知したら、その横幅に応じてデザインを変えることを指す。

レスポンシブにウェブサイトが変更される状態になっていることを、レスポンシブ対応のウェブサイトと呼び、レスポンシブに見え方が変わるウェブサイトのデザインを、レスポンシブデザインと呼ぶ。

レスポンシブ対応が必要な理由

例えば、パソコンで見ている場合は、たいてい横長の長方形だ。

タブレットは、縦にしているか、横にしているかで、どちらとは言い難い。

スマホは、圧倒的に縦長の長方形だ。どうしても大きく見たいとき以外横にはしない。

多くの人がパソコンでウェブサイトを見ていた時期が長かったが、ここ最近は急速にスマホでウェブサイトを見る人が増えた。

だからといって、全員が全員スマホで見ているわけではない。

そこで、パソコンで見ている人でも、スマホで見ている人でも、違和感なく、小さすぎず、大きすぎず、レイアウトが崩れていない状態で見られるようにしたいとなってくる。

そこでレスポンシブデザインが必要となった。

いまやレスポンシブデザインでないウェブサイトは、閲覧されにくいと言っても言い過ぎではない。

現に、スマホでアクセスしたら、字が小さすぎで読めないので、すぐに引き返したという経験は誰しもあるだろう。

レスポンシブ対応にするにはどうする?

では、どうやったらレスポンシブ対応にできるのか。

それには、ウェブサイトのHTMLとCSSを修正する必要がある。

HTMLはウェブサイトの骨格であり、CSSはデザインを決める肉付けという役割がある。

ウェブの情報を検索するととても詳しく、いろいろな方法があることがわかるが、初心者にはちょっと難しい。

構文説明は多いが、事例があまり実践に即してない。また、長い例文が多い。

例えば、英語の勉強も構文ばかりの英文法は難しく、また、長い例文は覚えられないのと同じだ。

そんななかでも、必須であって、それだけあれば大丈夫だったというものをご紹介。

HTMLに加筆するコード

HTMLに加筆する必須のコードはこれ。

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

このコードは、ウェブサイトを見ている機器(デバイス)の横幅を検知するコードだ。

横幅を検知して、その横幅に合わせて挙動することが可能になる。

横幅に合わせて動くところが、反応的つまりレスポンシブということになる。

このコードを間のどこかに挿入する。

CSSに加筆するコードと注意点

ぼくの場合は、つまるところ、全体の横幅が自動で変更されなかったことと、サイトのイメージを伝える上部にある大きな画像の大きさが、機器の画面幅に自動的にフィットしなかったことが大きな問題であった。

全体の横幅を規定する行にpxで幅が規定されていると、自動的に変更が利かない。

width:90%

のように、画面横幅との相対値を指定することが重要だ。

以下は実際のCSSの一部だが、containerと名前を付けた区域の幅が660pxになっていたのを、90%としたところ、スマホでも、タブレットでも、PCでもジャストフィットするようになった。

div#container  {
    border: solid 2px #F8E3F4;
    padding: 20px;
    background-color: #ffffff;
    width: 90%;
    margin-left: auto;
    margin-right: auto
}

もう一つは、大きな画像を自動的にフィットさせる方法だ。これも相対値を入れることが重要だった。

img{
    width:80%;
}

このスタイルを指定することで、すべての画像が横幅の80%になる。これでウェブサイトトップの大きな画像はどの横幅にもフィットするようになった。

しかし、ここで問題なのは、「すべての」画像の横幅が80%になってしまうことである。

もっともっと小さい画像はウェブサイトにはたくさんあって、スマホの画面になってももともとの幅と同じで構わない画像もある。

小さい画像はそのままの小さい画像にしておきたい場合は、画像を呼び出す行に style= として横幅を規定する。これはHTML文面に書く。

例えば、以下のように、

<img src="pic/portrait.jpg" alt="Portrait" style="width:160px">

とする。

style="width:160px"としたところが、横幅を160ピクセルに限定している。

こうすると、プロフィール画像のような小さくてよい画像が横幅の80%になってしまうことを避けることができる。

レスポンシブ対応のウェブサイト例

今から10年くらい前に作ったウェブサイトで、レスポンシブのレの字もなかった時代のウェブサイトを見本に、内容を一部改変したウェブサイトを、レスポンシブ対応にした例は以下の二つ。

ハピハピエージェンシー HappyHappy Agency

メディカル・スタッツ Medical Stats 医学統計支援サービス

このくらい単純なウェブサイトなら、レスポンシブ対応もそれほど大がかりではないことがわかった。

しかし、わかるまでは本当に苦労した。情報がありすぎるのも難だということがよくわかった。

まとめ

シンプルなウェブサイトなら、レスポンシブ対応にするのはとても簡単だ。

HTMLのヘッダーに一文足すだけと、コンテンツ領域幅や大きな画像幅を横幅の相対値(%)にするというこの2点だけ。

なかなかの出来栄えに自分としては満足している。

もし、レスポンシブ対応に挑戦したけど、難しくて挫折したというあなたは、この超シンプルな方法で再挑戦するのはいかが?