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

関連記事

no image

音ゲーの宝物殿「WGS(World Game Circus)」が期間限定で復活!

こんばんみ。 数年前からオープンと一時閉店を繰り返している神出鬼没な音ゲーの宝物殿「WGS(World Game Circus)」が東京都北区の駒込駅近くに本日再オープンしました! 本日オープンです。 …

今の季節にピッタリなクソゲー「Chrismas Shopper Simulator」を試してみる

こんばんみ。 前回の記事に続いて、今回もヘンなゲームのお話です…。 ※一応季節ネタです

画像編集アプリ「Fotor」のWEB版を試してみた話。

こんばんみ。 今回は画像編集アプリ「Fotor」のWEB版を試してみたお話。

Windows Updateで起きたマゾ過ぎるPCトラブル。

こんばんみ。 先日Windowsのアップデートでひじょーに面倒なトラブルが起きたのでそのお話を。 結局根本的な解決策は見つからなかったのでヒマな方だけどうぞ。

iPad Proで有線LANが使える、サンワサプライのイーサネットアダプターを購入しました。

こんばんみ。 先日新たにUSB-C用のイーサネットアダプターを購入しました。

広告

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

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

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