確認方法

レスポンシブウェブデザインを実現するMediaQueryでのCSSの切り替えは、端末情報を読み取っているわけではない。スマホかPCかを読み取っているわけではない、という事。

ブラウザの幅を読み取って適用するCSSの記述を切り替えている。
つまり、PCで閲覧していてもブラウザを可変すればデザインが変わる。

実際にブラウザを可変してみると、よくわかる。
後はシミュレータも多くあるのでググる事。

スマホのエロゲーを紹介している以上は、スマートフォンでサイト・ページを閲覧可能な事が重要です。

事例

英会話教室ハート

英会話教室ハート

このサイトは、5つに並んでいる写真エリアがミソです。
フルサイズだと横に5枚、タブレットだと3枚と2枚、スマホだと1列になります。

某宿泊施設のサイト

こちらはスライダーのbackgroundの画像が面倒だったため、タブレットは捨てています。

個人サイト：web cocoon

個人サイト：web cocoon

このサイトはタブレットの幅から1カラムにしています。

個人サイト：Spiralnewspaper

個人サイト：Spiralnewspaper

このサイトはPCでは一番レスポンシブウェブデザインに近いかもしれない。
なぜなら、PCのデザインをリキッドでしているためです。

子divの幅は最大に広がるようにしているので、親divのfloatを解除して幅を変更するだけ。

一般のレスポンシブウェブデザインのサイト

検索すればいくらでも出てくるのであえて記載する必要はないかもしれませんが…。
イメージを膨らませるには良いかもしれません。

個人サイト：Spiralnewspaper

幅の考え方

これは、リキッドデザインの考え方。
親divはカラムに合わせた相対指定の幅に変更して、子divはwidth100％やmax-wdthを使用。

3カラムのWebデザイン

例：3カラムでそれぞれ親divの幅が30％（左）　40％（真ん中）　30％（サイドバー）の合計100％で並んでいる場合（pxの場合でも）、

2カラムにする場合は、40％（左）60％（真ん中）にして、30％のサイドバーは、「float:none;」もしくは、「display:none」を適用。

1カラムの場合はもっと簡単ですね。widthを100％にしてfloatをまた解除するだけ。

子divは、親divが何％の幅だろうが、max-widthまでは100％に広がるように設定をするので、あまり関係なし。

かなり即席でグチャグチャですが、firebugで幅を相対指定にしたりfloat解除したりしてみました。
スクリーンショット。

こちらもイメージは膨らむかも。
「大体」こんな感じ。

5分程度でしたので本当にテキトーなものも。＾＾；
※このページでは掲載しません。

ポイント

レスポンシブウェブデザインをしてみて、私が考えたポイント。

◎カラム数が減るだけ、と簡単に考える

◎リキッドデザインをするだけ、と簡単に考える

◎カラム数が減るところは、floatを解除しまくる！（ためらわない）

◎消すところは消しまくる。display:none;（私の作ったサイトも、消しまくってます。） （スマホは機能を絞る、などの事はあらかじめ言っておく）

◎グローバルナビに導線が用意されている場合は、他からのリンクはしない。
（これをあらかじめクライアントに言っておくと、まるごとサイドバーを消せたりします。）

今後課題

下記は、私なりに面倒そうだなぁ、と思った点。

ヘッダー（フッターも？）

ここはそこまで課題というわけではありませんが、position指定が使用されてるケースが多い。
一度position指定を解除する必要アリ。

後は縦の間隔の調整。

グローバルナビ

どのサイトをデザインする上でも、ここがある意味一番厄介か。
理想的なのは、幅を調整して今のナビゲーションの並びを列を変えて並びなおす事。

メインビジュアル

最終的には簡単なスライダーを実装したいのですが、後回しにします。
最初は丸ごと非表示で逃げましょう。

iframe関係

ソーシャルプラグインなどのiframe関係。
幅の指定が個別でされていて、CSSの言う事を聞いてくれない事が多い。

ただ、ググれば結構対処方法は出てくる。
後はCSSのimportant指定で無理矢理指定をねじ込み。

回り込み

回り込みの概念は薄れますが、すべてが1カラムになるわけではない。
子のブロックや画像などは回り込みが必要なケースが出てくると思われる。

それでも回り込みが難しい場合は、縦1列に並べてセンタリングを行うこと。
両サイドのスペースが余程空かなければ、最低限の体裁は整う。

まとめ

私が短時間で独学で習得してしまった事で、間違っている部分がかなりあるかもしれませんので、あしからず。

エロアプリ系のサイトも、今後はどんどん難しくなっていく事でしょう。

シェアはこちらから。

関連記事