その11「iPhoneとパソコン画面の見た目を揃える」ー 無料で作った自作スマホサイトで収入を得られるか?の実験室。

さて、前回はHTMLファイルに広告を貼るまで上手くいきました。
しかし、パソコンで見るとブラウザの幅の分、横いっぱいに広がっていたので、
 ー>http://mrspikachu.chu.jp/sample/sample_5.html
sample_7_1.png
これを何とか見やすくできないものか?元々、スマホページを作ろうとしていたのでiPhoneで見る分には違和感はないのですが。
これは画面のスタイルを、横幅のピクセル数でデバイスを判断して、iPhone・iPadなどのタブレット・パソコンとで見た目を変える手法(レスポンシィブwebデザイン)を使うと出来るようなのです。
今回はそれを応用して、いっそのことiPhoneと見た目を同じように揃えてしまうということをやってみようかと。
まあ、本音は別々に作ると面倒臭いということなのですが、怪我の功名としてはパソコンで作成しながらiPhoneでの見た目をシミュレートできるので便利ではないかと。
(↑言い訳くさいw)
やり方は、難しいことは抜きにして部品を調達してきましたので(下記を右クリックで)ダウンロードしたうえ、前回作ったものに組み込むだけにしてみました。
部品1:boilerplate.css
部品2:vgrid.css
部品3:respond.min.js
これをHTMLファイルが置いてあるフォルダに、一緒に置いてやります。
そして、ヘッダーに四角で囲った部分を追記。


sample_7_3.png

ボディの冒頭に「div class=”gridContainer clearfix”」を、末尾に「/div」を追記します。
部品1,2,3と更新したHTMLファイルをアップロードして見てみると、

sample_7

ブラウザの真ん中にちょこんと、スマホやタブレットの見た目っぽく表示されます。これで成功。
あとは、図書館で借りた「jQuery Mobile」の本に基づいて凝っていけば、自分流のお店の出来上がり!頑張ってみましょう。


☆☆ワンクリックで応援お願いします\(^¬^)ノ 励みになります☆☆
にほんブログ村 携帯ブログ iPhoneへ
↓おまけのソースコード。(ブログ上だと表示が消えるので半角の<>を全角の<>に置き換えて載せています)


<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″ />
<!– iPhoneとパソコンとタブレットを同じサイズにします。ここから–>
<link href=”boilerplate.css” rel=”stylesheet” type=”text/css”>
<link href=”vgrid.css” rel=”stylesheet” type=”text/css”>
<script src=”respond.min.js”></script>
<!– 同じサイズに。ここまで–>
<!–見た目をスマホっぽく。ここから–>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no”/>
<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css”/>
<script src=”http://code.jquery.com/jquery-1.6.4.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js”></script>
<!–/見た目をスマホっぽく。ここまで–>
</head>
<body>
<div class=”gridContainer clearfix”>
<!–ヘッダーここから–>
<div data-role=”header”>
<h2>楽天アフィリエイト</h2>
</div>
<!–/ヘッダーここまで–>
<!–文章を貼ります–>
<i>母の日のプレゼント</i>の準備は進んでいますか?<br /><br />ネットでの注文は早めが<b>吉</b>です。 配送の<span style=”color: rgb(255, 0, 255); “>お届け日時指定</span>はもちろん、ショップによっては<span style=”color: rgb(102, 0, 255); “>早割り</span>を設定しているお店もあります。<br /><br />定番の<span style=”color: rgb(255, 0, 0); “>カーネーション</span>もいいですが、たまには玄関に飾る小振りの<span style=”background-color: rgb(255, 255, 0);”>バラのリース</span>はどうでしょう。雰囲気が華やかになって素敵です! 
<!–/文章ここまで–>
<center>
<!–楽天のリンクを貼ります–>
<!–楽天のリンクここまで–>
<br>
<!–忍者AdMaxのリンクを貼ります–>
<!–忍者AdMaxのリンクここまで–>
</center>
<!–フッターここから–>
<div data-role=”footer”>
<h2><small> 2013 季節を感じるグッズ</small></h2>
</div>
<!–フッターここまで–>
</div>
</body>
</html>

シェアする

  • このエントリーをはてなブックマークに追加

フォローする