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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

【BFH】発売から最初の休日を越えて…

こんばんみ。 個人的には超注目作のBattlefield Hardlineですが、発売されてから最初の土日を越えましたね。 まだまだこれから細かなゲームバランスの調整が入ったりするとは思いますが、とり …

iOS版「Papers,please」を買ってみた。

こんばんみ。 前からニコニコ動画などのプレイ動画を見て買おうか考えていたPCゲーム、「Papers,Please」ですが、いつの間にかiPad向けのアプリがリリースされていたのでこちらを購入してみまし …

東京ゲームショウ 2014前売り券発売開始までもう間もなく

こんばんみ。 今年も東京ゲームショウの季節が近づいてきました。 ゲームショウ自体は当日でも入場券は買えるのですが、混雑する前に入場して試遊などを楽しみたい!って人はやはり前売券やTGS2014サポータ …

Divisionの自キャラがようやくレベル30に…

こんばんみ。 発売日に買ったものの時間がなくてなかなか進んでいなかったPCゲームの「Division」ですが、ようやくレベル30に到達しました…。

買ってはいけないPCゲーム「Metro:Last Light」

こんばんみ。 本日が最終日のsteamサマーセールですが、またハズレくじを引いてしまいました…。 前回のセールではCall of Duty:World at Warを購入したものの正常に起動せずかなり …

広告

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

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

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