こんばんみ。
Gunosyを眺めていたらレスポンシブWEBデザインに関する記事を見つけました。
どうやら「@media screen and (max-width:480px) { うにゃうにゃ }」みたいな感じでCSSに追加するだけでウィンドウ幅に合わせてレイアウトを変えられるみたい。
なるへそこれなら自分でもできそう！ってことで実際に手を出してみました。
自分のWEBページのホームページで実験。
すでに公開しているPC向けのページを元に、480px以下のウィンドウで表示するとスマホ向けのレイアウトになるように弄ってみました。
なぜ480pxかというと、Dreamweaver CC上のスマホのプレビューが480pxだから。時間があるときにきっちり調べて、のちのち最適なスマホでのウィンドウ幅は考えるつもりです。
ちなみに記述の仕方は、
body { background-color:red; }
@media screen and (max-width:480px) {
body { background-color:blue; }
}
みたいな感じで記述すると、通常は背景は赤だけど、ウィンドウ幅が480pxを下回ると背景が青に変わる、みたいな感じみたいです。
はて実際にやってみた結果をブラウザで確認。
↓
ウィンドウ幅を小さくすると…。
レイアウトが変わるようにできました！
やったね。
これで完成かと思ってスマホで見てみたところ…
あれ…？スマホ向けのレイアウトになってないじゃない…
もしかすると、PC向けのページを基準にして、ウィンドウ幅が小さい場合のみスマホ向けの幅の小さい表示に変わる記述の仕方が間違いだったのかも。
先にPC向けの表示の幅を記述したから、そのサイズで固定されてしまったのかもしれないですね…スマホはプラウザのサイズを変えられませんから。
たぶん正解はスマホ向けの小さい幅のページを基準にして、幅の大きいブラウザで見た時だけPC向けのレイアウトになるようにする方法なのかもしれません。
まあこの失敗で理解が深まったと言えば深まったのかも？
時間があるときにちゃんと修正します。
話題はまたまたsteamですが、いつの間にか「steam タグ」なる機能が追加されていました。
ユーザーがゲームにタグを付けることで関連ゲームを発掘することができるシステムみたいです。
掲載者側がタグを用意するのではなくユーザーがタグ付けできるあたりニコニコ動画のタグに近いような気がします。
これによって今までキーワード検索では発掘しにくかったインディーズゲームなどを見つけられるかもしれませんね。
