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

関連記事

Windowsに対応した「Duet Display」を試してみた。

こんばんみ。 前から職場のPCにiPadを繋いでサブディスプレイにしたいな〜と考えていたのですが、なかなか「これだ!」というアプリがありませんでした。 ところが先日、Mac専用でリリースされていた「D …

iPhone 11 Proに機種変更しました。

こんばんみ。 はじめまして、超広角。 さて、今話題のiPhone 11 Proですが、私も興味があったので早速機種変更してきました。 本当は年末ぐらいでもいいかなーなんて考えていたんですが、やはりネタ …

気になるゲーム「STEEP(スティープ)」

こんばんみ。 面白そうなゲームを見つけたのでちょっとご紹介します。

Battlefield HARDLINEのβテストがスタート!

こんばんみ。 最近ちまちまエオルゼアで遊んでいたのですが、 気がついたらバトルフィールドシリーズの次回作「Battlefield HARDLINE」のβテストがスタートしていました!

originの「ゲーム満足保証プログラム」の申請をしてみました。

こんばんみ。 先日から行われているoriginのセールですが、飛びついて2本ほど買ってみたのですが、ミラーズエッジがイマイチおもしろくない…。 発売されてすぐにXbox360版を友人にやらせてもらって …

広告

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

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

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