この記事を見ているという事は、あなたはHTML,CSSをつかってウェブ開発をしていますね。
そして同時に、WordPressを使ったら負けとも思っていますね？(思ってない人は素直にWordPress使った方がいいかも)
安心してください。僕はあなたの味方です。
そんな僕が、一番手こずったのがスマホ対応。いわゆるレスポンシブデザイン。
わかってしまえば簡単なものでしたが、独りで悩んでいた時には何が問題かもわからず、一か月以上悩み続けました。
うん、まっっじで簡単なものだった。
一応注意をしておくと、僕はWeb制作のプロでも何でもないです。
1からこのブログを作ったので基本的なことは理解しているつもりですが、何か重要な思い違いをしているかもしれません。
ネットの情報なんて何でもそうなのですが、僕の情報も軽く疑いつつ活用することをお勧めします。
それでは本題に入っていきます。
まずは、ビューポートを設定します。
ビューポートを設定するにはHTMLのhead内に
<meta name="viewport" content="width=device-width,initial-scsle=1.0">と、入力するだけです。
簡単なように感じたかもしれませんが、実はここ、1つ目の躓きポイントなんです。
あなたは、これが何のためのコードかわかりますか？
これ、ユーザーの画面の幅に表示領域を合わせるためのコードなんです。
コードの役割を知っていることで必要なコードが分かったり、思った通りに行かない原因を知ることができます。
今回扱うコードの中で、僕はこのコードの役割が分かりにくかったと思いました。
次に、ボックスの幅を%で指定します。
pxで幅を指定すると、ビューポートが変わってもボックスの大きさは変わりません。
しかし、%で幅を指定すると、ビューポートに応じてボックスの幅を変えることができます。
先程のコードでビューポートがユーザーの画面の幅に合わせられたので、PCのときはPCに合わせた大きさで、スマホのときはスマホに合わせた大きさで画像を表示できます。
（ちなみに、%にするのは幅のみで、高さはpxの方が良いです）
これでボックスの大きさについては解決しました。
あとは、スマホに合ったレイアウトにしたい人への知識です。
デバイスによってレイアウトを変えるには『メディアクエリ』という機能を使います。
メディアクエリはビューポートとは違い、できること自体は分かりやすいですが、少しコードが複雑です。
メディアクエリを設定するにはHTMLのhead内に
<link rel="stylesheet" href="CSSのパス" media="screen and (CSSを読み込む条件)">のように入力します。
このCSSを読み込む条件というのは主にmin-widthかmax-widthのことです。
先述の通り、メディアクエリの役割は単純でmin-width:1000pxはビューポートが1000px以上ならCSSを読み込む、というもの。
反対にmax-width:1000pxはビューポートが1000px以下ならCSSを読み込む、というもの。
どちらを使っても構いませんが、一般に画面サイズが大きいものほど性能がいいので、画面サイズが小さいときに読み込むCSSが少ないmin-width:1000pxがよく使われます。
また、仮で1000pxとしていますが数字の部分は自由に変えてください。上手く設定して目的のデバイスに反映させましょう。
(追記:メディアクエリの設定に比較演算子が使えるようになりました！
比較演算子というのは<,=,>の三つのことです。
これが使えるという事はつまりmin-width:1000pxはwidth>=1000pxで、max-width:1000pxはwidth<=1000pxでも同じ動きをするという事です。
こちらの方は大なり,イコール,小なりの記号の意味さえ理解していれば良いので、より簡単に書けるようになったのではないでしょうか。
また、700px<width<1000pxのように組み合わせることでより正確な指定ができます。
僕個人の意見としては『記号より文字で指定した方がかっこいい』って人以外は将来的に比較演算子の使用をお勧めします。)
さて、僕がこのブログをスマホに対応させるために行ったことは
- ビューポートの設定
- %でのCSSレイアウト
- メディアクエリの設定
の3つです。
この3つさえ使いこなすことができればPCでもスマホでもぴったりのWebが作れることでしょう。
ただし、使いこなすまでに何度か躓くことがあると思います。
そんな時には起こっている問題をググりまくってください。
あなたの問題はきっと先人たちがもう既に解決したものです。
頑張ってください。僕はあなたのWeb開発を応援しています。
何故かって？
そりゃあ僕は、あなたの味方ですから。
あとがき
本当に。簡単なものでした。
僕が1か月悩んだ原因。
それは．．．！
メディアクエリの設定をするコードでandと（min-width:1000px;）の間にスペースを入れていなかったこと！
たった1つのスペースのくせに。
たった1つのスペースだったからこそ。
気づかなかった．．．。
多くの時間を無駄に使ってしまった．．．！
スペースのバカヤローーー!!!（泣）
（追記:この記事から一年程度…WordPressに負けちまった!!!
『僕はあなたの味方です』とかってセリフ吐いた割に思いっきり裏切る形になり、本当に申し訳ございませんでした!!!（腹切））
コメント