十字架ラビアンローズ

Webサイトを手っ取り早くスマホに対応させる手法について、簡潔に解説しています。

  1. トップページ
  2. Webサイト構築
  3. 当サイト制作日記
  4. 「十字架ラビアンローズ」がスマホからの閲覧に対応しました

「十字架ラビアンローズ」がスマホからの閲覧に対応しました

2014.3.19.Wed. 07:05

これまでPCサイトとして構築してきていた当サイト「十字架ラビアンローズ」が、このたびPC・スマホの両方から閲覧出来るように対応致しました!ヽ(*>ω<)ノ
PC用として構築したサイトを後からスマホにも対応出来るようにするというのはだいぶ大変。
僕は「後から色々リニューアルとか拡張とかが出来るように」と考えて、<div>とか多めに盛り込んで汎用性の高いソースを構築していたので何とかなりましたが、出来るだけ容量が軽くなるように極力ソース削って絞り込んで!とかいう案件相手だとそれも厳しいね。
PCだけで良いのかスマホにも対応させるのかは最初のうちに決めておかないと、後で工数が激増して泣きを見る。

そんなこんなでスマホからの閲覧に対応した当サイトですが、如何せん僕は筋金入りのガラケーユーザー。
スマホサイト構築は技術も経験もあるけれども実機での動作確認が出来ない為、スマホユーザーにちゃんと当サイトが問題なく閲覧出来ているのかどうかがとても知りとうございやすわ(;・ω・)
あとガワの部分は対応したものの記事本文についてはそのままとしているので、まあ多分ないかとは思いますが、要素の横幅が大きくなりすぎて横スクバが出たり<table>の各セルの横幅が異常に狭くなってしもうているという可能性もなきにしもあらずだな(;・ω・)
不甲斐ない。

今回対応したのはだいたい以下のような内容。
スマホサイトの構築を行っている・行おうと思っているという人の参考になったら幸い。

viewportの設定

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

この1行で「コンテンツ幅=デバイス幅」「拡大縮小率1倍」「ピンチアウト不可」となります。
拡大出来なくなるというデメリットはあるものの、これで予想外の崩れが生じる可能性が大幅に軽減されるので、色々なサイトで取り入れられています。
拡大縮小にまでちゃんと対応出来たらそれに越した事はないんですけどね、しかしそれには非常に骨が折れるので。

PCとスマホとでCSSを出し分ける

<link rel="stylesheet" href="PC用CSSファイルのパス" type="text/css" media="screen and (min-width:641px)">
<link rel="stylesheet" href="スマホ用CSSファイルのパス" type="text/css" media="screen and (max-width:640px)">

通常CSSファイルを読み込む為の<link>media属性を上記のように書き換えて、PC用とスマホ用、2種類の<link>を記述しておけばOK。
上記例だと、デバイス幅が640px以下だとスマホ用CSS、641px以上だとPC用CSSを読み込むようになります。
英語サイトですが、Web Designer Wallの拡大縮小への対応の柔軟ぶりは神がかりだと思っておるです。

なおPCでも、ブラウザの横幅を意図的に小さくする事で、スマホ用CSSに切り替わって表示されるようになります。
僕もPCからGoogle Chrome(スマホのブラウザはだいたいwebkit系なので)の横幅を変更する事でスマホ版のレイアウトを確認し構築していました。
…しかし何だ、最近のスマホの標準的な横幅ってよく分からんな(;・ω・)

オーバーレイ広告の実装

僕はスマホユーザーでないので詳しくは分からんのですが、スマホから閲覧すると画面下に広告が表示されるようになるそうで。
導入方法は各自ご利用のアフィリエイトサイトを参照の事。

その他細かな気遣い
  • なるべくCSSスプライト(※1)を適用させる
  • なるべくリキッドレイアウトで構築する
  • バナー等はCSSでwidth・heightを拡大させて表示させる
  • グラデーション等は画像を使用せずCSS3で行う
  • etc.

当サイトはCSSスプライトはまだこれからですが、はなっからIEの事をあまり気にかけずにCSS3バリバリで構築したりとかしていたので、この辺は割とママイキである事が多かった。
float:left;及びfloat:right;の代わりに、display:table-cell;vertical-align:top;を用いるようにすると明るい未来が見えるかも。

そんな感じですかね、いつだって発展途上。
スマホユーザーの方は使い勝手とかで気になる点・不具合が生じている点等がありましたらコソーリご連絡頂けたら幸いなのです(´・ω・)人

※1 アイコン等をまとめて1枚の画像にし、background-positionを駆使して画像を背景として表示させるようにする事で、サーバーへのリクエスト回数を軽減させる手法。

Twitter

アーカイブ

全記事アーカイブ

ブログパーツ

  • アイラブ地元ブログパーツ