【緊急】スマートフォン用のページに関して

今回初めてスマートフォン用のページの
作成をしなければいけないのですが、
どこから始めればいいのかわかりません。

自分なりに調べて、

▼Bootstrap
「 http://getbootstrap.com/2.3.2/ 」

というのを見つけて、
サンプルのデータをダウンロードして、
触ってみたのですが、下記HTMLコードまで何とか
進める事が出来ました。

▼HTMLコード

lang
1<!DOCTYPE HTML>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
6<title>サンプル</title>
7<link rel="stylesheet" href="css/bootstrap.min.css" />
8<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
9<script src="js/bootstrap.min.js"></script>
10<!--[if lt IE 9]>
11<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
12<script src="js/respond.min.js"></script>
13<![endif]-->
14</head>
15<body>
16<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
17  <!-- navbar-inverse で黒系ナビゲーションの指定をしています。--> 
18  <!-- navbar-fixed-top でヘッダー固定の指定をしています。-->
19  <div class="container">
20    <div class="navbar-header">
21      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
22      <!--button~はウインドウのサイズが780px以下になった時に表示されます。--> 
23      <a class="navbar-brand" href="#">Bootstrap</a> 
24      <!--こちらにサイト名を入れます。--> 
25    </div>
26    <div class="collapse navbar-collapse">
27      <ul class="nav navbar-nav">
28        <li class="active"><a href="#home">ホーム</a></li>
29        <li><a href="#tab">タブ</a></li>
30        <li><a href="#accordion">アコーディオン</a></li>
31        <li><a href="#popover">ポップオーバー</a></li>
32      </ul>
33    </div>
34    <!--/.nav-collapse --> 
35  </div>
36</div>
37</body>
38</html>

CSSに関しては、http://bootswatch.com/というサイトの中の
「 Paper 」という所からダウンロードしています。

この後がどのようなルールで
構築を進めていけばいいのかが分かりません。

※上記HTMLコードも様々なサイトを調べて持ってきているので、
詳細までどこがどのようになっているかが理解できておりません。

今回スマホTOPページの簡単な構成は下記画像の通りです。

![スマホTOPページ構成]WIDTH:595

まずベースになるスマホ用のHTMLを準備してから
他の様々なページを進めたいと考えております。

こちらのページの準備期間が1週間もありませんので、
至急ご回答をお待ち致しております。

是非ご協力頂けましたら幸いです。

行動規範の内容に同意します

回答1件

なんでやった事も無い物を一週間で・・って話は置いておきましょうか（笑

とりあえず特に理由がないのでしたらBootstrapは最新の３系を使った方がよいかと。
Bootstrapを使うって事はそこまでデザイン面はオリジナル感は出さなくていいんですよね？
（Bootstrapを使うと似たデザインになりやすいものですので）

jQueryMobileを使おうかどうしようかって感じだと思いますが、まぁあとはこれをテンプレートとしてコピペして行けばとりあえずは良いのではないでしょうか？
（上のコードは全く確認してませんが動いてるんですよね？）

何ページくらいあるのかわかりませんが、とりあえずは作ってみてから反省して直していけばいいでしょう。
最初からミスなく作った物なんて身につかないものですから。

お金取って納品するつもりなら舐めてんのか？って感じですが（笑

投稿2015/04/17 15:49

landy77

総合スコア1614

mikio

2015/04/18 00:52

landy77 さんコメント頂きありがとうございます！私の技術力不足で残りの締め切りが1週間弱となってしまいました。。。今回Bootstrapを使用しようと考えた経緯としては、・制作時間が足りない・スマホページをどのように構築すればいいかが分からない　（1から作成するにはどの部分から構築しなければいけないかが分からない）などの理由から今回Bootstrapを取り入れようという判断になりました。私としては、デザイナーからページのラフを頂いているので、上記投稿させて頂いた通りの配置で構築していければいいなと考えております。今回投稿させて頂きましたコードは一応動いてはいます！ちなみに今回のスマホページに関しては、自社サイトになりますので、外部へ納品する予定ではございません。

行動規範の内容に同意します