カテゴリ「れーとーびーむの作り方」に属する記事

このサイトではモバイルへの対応を重視していると、ずっと言っている。

今やWebブラウジングの主役は完全に、スマホやタブレットといったモバイル端末なんだから当然だ。

スマホ向けコンテンツを制作している俺でなくても、すでにWebサイトのモバイル対応は必須となっている。

で、PC向けに作ったサイトがそのままでもスマホから見やすいかというと、そんなことは全くない。

PCのディスプレイとスマホの画面とでは、大きさ（主に幅）も向きも違うからだ。

そこで、それぞれのデバイスに合った表示方法を提供する必要が出てくる。

Googleなどの検索エンジンも、モバイルからのアクセシビリティ（閲覧のしやすさ）を重視する方向性となっている。

これに対応するためには、閲覧者のデバイスそれぞれに合わせて表示を切り替えるということをしなければならない。

そこで今回は、メディアクエリと呼ばれるCSSの機能を使い、閲覧者のブラウザの“幅”に応じて表示を切り替えることでモバイル端末に対応するレスポンシブ・ウェブデザインという方法を紹介する。

また、その他のモバイル対応に役立つテクニックも紹介する。

WEBサイトを作る上で、最も重要なのは何？

HTMLなどの知識？　内容（本文）？　デザイン？

どれもすごく重要だけど、もひとつ重要なものがある。

アクセシビリティ――アクセス・閲覧のしやすさだ。

これはデザインの一種でもあるけど……（いわゆる工業デザイン、機能美ってやつ）

見た目のデザインセンスが絶望的に不足してる俺だからこそ、アクセシビリティを重視したデザインにはできるだけこだわりたかった。

ということで、今回はこのサイト「れーとーびーむ」（ブログ「れいぶろぐ」を含む）の色とフォントに凝らした工夫を紹介しよう。

ググったり人に聞いたりしたものが多いけど……