PC ゲーム

レスポンシブになれなかったよ…。

投稿日:2014年2月13日 更新日:

こんばんみ。

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を下回ると背景が青に変わる、みたいな感じみたいです。

はて実際にやってみた結果をブラウザで確認。
top1

ウィンドウ幅を小さくすると…。
top2
レイアウトが変わるようにできました!
やったね。

これで完成かと思ってスマホで見てみたところ…
screenshotshare_20140213_194229
あれ…?スマホ向けのレイアウトになってないじゃない…

もしかすると、PC向けのページを基準にして、ウィンドウ幅が小さい場合のみスマホ向けの幅の小さい表示に変わる記述の仕方が間違いだったのかも。
先にPC向けの表示の幅を記述したから、そのサイズで固定されてしまったのかもしれないですね…スマホはプラウザのサイズを変えられませんから。

たぶん正解はスマホ向けの小さい幅のページを基準にして、幅の大きいブラウザで見た時だけPC向けのレイアウトになるようにする方法なのかもしれません。
まあこの失敗で理解が深まったと言えば深まったのかも?
時間があるときにちゃんと修正します。


話題はまたまたsteamですが、いつの間にか「steam タグ」なる機能が追加されていました。
steamtag
ユーザーがゲームにタグを付けることで関連ゲームを発掘することができるシステムみたいです。
掲載者側がタグを用意するのではなくユーザーがタグ付けできるあたりニコニコ動画のタグに近いような気がします。
これによって今までキーワード検索では発掘しにくかったインディーズゲームなどを見つけられるかもしれませんね。

-PC, ゲーム

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

「Surface Pro 4」の国内発売日が11月12日に決定!

こんばんみ。 先日海外での発売が発表された「Surface Pro 4」ですが、本日日本国内での発売日が正式に発表されました。

個人的にはそこそこ楽しめたDOOMのオープンベータテストの話。

こんばんみ。 先週末に話題のゴアFPSシリーズの続編「DOOM」のオープンβテストが行われていたので自分もプレイしてみました。 今回はそのレビューと感想です。

steam「2Kウィーケンド」は明日まで!

こんばんみ。 steamで開催中の「2Kウィーケンド」ですが、セール終了の8月24日が明日に迫っています。 セールの対象となっているのは、 「Sid Meier’s Civilizatio …

いつの間にか出ていたFL Studio Mac OS X版のβを試してみる。

こんばんみ。 先日ふとfacebookを眺めていたら、上のような記事が流れていて初めてFL StudioのMac版βがリリースされていることに気がつきました。

CoD:Ghostsも思ったほど悪くない?

こんばんみ。 先日steamで、Call of Duty:Ghostsがマルチプレイ無料ウィーケンドになっていたので試しにプレイしてみました。 前作のBlack Ops2(以降BO2)に続いて、ネット …

広告

やましん
・神奈川在住
・音楽好き
・洋ゲー好き
・写真勉強中

WEB通販関係の仕事をしながら写真やデザインの勉強中です。
α7RIII・CONTAX G2・BESSA R2Mなどのカメラを愛用しています。
忙しくてやっていませんがPCの洋ゲーも好き。

コンタクトはこちらからどうぞ。
- SNS -
 Twitter
- PHOTO -
 Flickr
 GANREF
 PHOTOHITO