質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.03%

スマートフォン用のサイト構築手順

受付中

回答 3

投稿

  • 評価
  • クリップ 3
  • VIEW 1,306

score 49

ホームページの構築に詳しい方、
是非ご教授ください!

タイトル通りスマートフォン用のサイトを構築したいと考えております。

しかし1からの構築が初めてで、
何から始めればいいかが分かりません。

サイトのデザイン自体は既に他のデザイナーにより作成済みです。

基盤として用意すべきHTMLやCSS、jQueryなどが全く分かりません。

もちろんスマートフォンやタブレットなど
様々なサイズでも可変して場合によっては、
パーツの入れ替えなどを行いたいと考えております。

※スマートフォン用のサイトを構築する上でのルールや注意点も
併せてご教授頂けましたら幸いです。

またヘッダーのグローバルメニューに関しては、
スマホサイトでよく見る「 三 」のボタンで開閉式にしたいと思っております。

※下へスクロールすると常に表示されるようにしたいです。

以上が簡単な説明とはなりますが、
宜しくお願い致します。



  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

0

こんにちは。
ホームページの構築に全く詳しくない私で恐縮ですが。

レスポンシブデザインについてご存知なければ、
以下を参考にしてみては如何でしょう。
概念から基本的な作成方法まで情報がまとまっていました。
http://blog.idea-clippin.com/?p=830

その上で不明点があればご質問内容を更に絞っていただけると、
良い回答が得られやすいかと思います。

既にご存知であれば失礼致しました。無視して頂ければ。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/05/08 09:01

    Tak1waさん

    早速のコメントありがとうございます。

    参考URLを見て実践してみたいと思います。

    その中で分からないことがあればまたコメントさせて頂きます。

    キャンセル

0

確実でない話で申し訳ないのですが
スマートフォン向けですよね?
大画面は想定しますか?
それによって違うのですが、
スマートフォンサイトの作成について、
PC向けサイトと比べて特別なことはないと思います。
ただし下の事をお勧めします。
よく、調べて完成してから、サイトアップした方が懸命でしょう。(もちろん実験は自由ですが、後から直すのは本当に大変です)
デザインは分からないのでCSSについては何とも言えないので
分かる範囲で載せます


グローバルMENU
jQueryはjquery-1.9.1.min.js
これは開閉用に使うファイル
サンプル
head内
    <!-- ================= -->
    <!-- ▼jQuery 読み込み -->
    <!-- ================= -->
    <script type="text/javascript" src="./jquery-1.9.1.min.js"></script> <!-- ※自サイト上にアップロードしてある場合は、下の行をコメントアウトし、こちらの行を有効にして下さい。 -->
    <!-- script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script --> <!-- ※CDNを利用する場合は、上の行をコメントアウトし、こちらの行を有効にして下さい。 -->

    <!-- ==================================================== -->
    <!-- ▼サブメニューを開閉するためのスクリプト(jQuery利用) -->
    <!-- ==================================================== -->
    <script type="text/javascript">
        $(function(){
            $("#menu li").hover(function(){
                $("ul",this).show();
            },
            function(){
                $("ul",this).hide();
            });
        });
    </script>

    <!-- ======================= -->
    <!-- ▼メニューを装飾するCSS -->
    <!-- ======================= -->
    <style type="text/css">
        /* ------------------ */
        /* メニューバーの装飾 */
        div.menubar {
            background-color: #cc0000;         /* バーの背景色 */
            border-top:    3px double #800000; /* バーの上端線 */
            border-bottom: 3px double #800000; /* バーの下端線 */
            min-width: 630px;                  /* メインメニュー全部が収まる最低横幅 */
        }

        /* ------------------------ */
        /* メインメニュー項目の装飾 */
        div.menubar ul#menu {
            margin: 0px 0px 0px 15px; /* メニューバー外側の余白 */
            padding: 0px;             /* メニューバー内側の余白 */
            height: 40px;             /* メニューバーの高さ */
        }
        div.menubar ul#menu li {
            width: 120px; /* メニュー項目の横幅 */
            height: 40px; /* メニュー項目の高さ(「メニューバーの高さ」と一致させる) */
            float: left;
            list-style-type: none;
            position: relative;
        }
        div.menubar ul#menu a {
            background-color: #cc0000; /* メニュー項目の背景色 */
            color: white;              /* メニュー項目の文字色 */
            line-height: 40px;         /* メニュー項目のリンクの高さ(「メニュー項目の高さ」と一致させる) */
            text-align: center;        /* メインメニューの文字列の配置(中央寄せ) */
            text-decoration: none;     /* メニュー項目の装飾(下線を消す) */
            display: block;
            width: 100%;
            height: 100%;
        }
        div.menubar ul#menu a:hover {
            background-color: #ffdddd; /* メニュー項目にマウスが載ったときの背景色 */
            color: #cc0000;            /* メニュー項目にマウスが載ったときの文字色 */
        }

        /* メニューバー直後の Clear Hack */
        div.menubar ul#menu { zoom:1; }
        div.menubar ul#menu:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; }

        /* ---------------------- */
        /* サブメニュー項目の装飾 */
        div.menubar ul#menu ul.sub {
            background-color: #cc0000;     /* サブメニュー全体の背景色 */
            border-width: 1px 1px 0px 1px; /* サブメニュー全体の枠線の太さ */
            border-style: solid;           /* サブメニュー全体の枠線の線種 */
            border-color: #800000;         /* サブメニュー全体の枠線の色 */
            margin: 0px;
            padding: 0px;
            display: none;
            position: absolute;
        }
        div.menubar ul#menu ul.sub li {
            width: 135px; /* サブメニュー1項目の横幅 */
            height: 35px; /* サブメニュー1項目の高さ */
            border-width: 0px 0px 1px 0px; /* サブメニュー1項目の枠線の太さ */
            border-style: solid;           /* サブメニュー1項目の枠線の線種 */
            border-color: #800000;         /* サブメニュー1項目の枠線の色 */
        }
        div.menubar ul#menu ul.sub li a {
            line-height: 35px; /* サブメニュー1項目の行高(「サブメニュー1項目の高さ」と合わせる) */
            text-align: left;  /* 文字列の配置(左寄せ) */
            text-indent: 5px;  /* 文字列前方の余白 */
        }
        div.menubar ul#menu ul.sub li a:hover {
            background-color: #ffff80; /* サブメニュー項目にマウスが載ったときの背景色 */
            color: #005500;            /* サブメニュー項目にマウスが載ったときの文字色 */
        }

    </style>
body内
>       <!-- ======================== -->
>     <!-- ▼メニューを構成するHTML -->
>     <!-- ======================== -->
>     <div class="menubar">
>         <ul id="menu">
>             <li><a href="#">HOME</a></li>
>             <li><a href="#">ニュース</a></li>
>             <li><a href="#">製品・サービス</a></li>
>             <li><a href="#">会社情報</a>
>                       <li><a href="#">お問い合わせ</a></li>
>         </ul>
>     </div>
>     <!-- ========== -->
>     <!-- ▲ここまで -->
>     <!-- ========== -->
単に開閉だけならば
<biv id="class">
 <img src="http://www.honda.co.jp/ACCESS/chums/images/menu_open_btn_sp.png" onclick="menu()">
 <biv id="menu">
  <a href="TOPページのURL">TOP</a><br>
  <a href="2つ目のページのURL">タイトル2</a><br>
  <a href="3つ目のページのURL">タイトル3</a><br>
  <center>・<br>・<br>・</center>
 </biv>
</biv>
<script>
<!--
if i=0
{
 var i="1"
 document.getElementById("menu").innerHTML="";
}
else
{
 function menu(num)
 {
   if (document.getElementById)
   {
   var=""
   document.getElementById("menu").innerHTML="<a href="TOPページのURL">TOP</a><br><a href="2つ目のページのURL">タイトル2</a><br><a href="3つ目のページのURL">タイトル3</a><br><center>・<br>・<br>・</center>";
   }
 }
}

-->
</script>

これはスマートフォンに限らずなのですがjavascriptが使えない場合があります。なので次のコードをどこかに入れてください
<noscript>
 このページはJavascriptを使っています<br>
 快適にご利用いただくにはJavascriptをオンにしてください
</noscript>

まだ分からない事があったらコメントください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

-1

おはようございます。
最初はなかなか苦労が多いでしょう・・・最初矢張り本を見たほうが良いでしょう。 やさしい本では、
1)iphone+androidスマートフォーン入門、たぐち まこと そして最近では、
2)スマートフォーンサイトのためのHTML+CSS3 エ・ビスコム これは、例が豊富です。
3)その後、HTML5$CSS3 ステップアップブック・・・これは、作り方が良く出ています。

最近は、レスポンシブが主体でありMOBから作るのが、基本となってきているので(google社でも推奨)、作ってから直すのは大変です。
よく、調べて完成してから、サイトアップした方が懸命でしょう。(もちろん実験は自由ですが、後から直すのは本当に大変です) その他の文献は、
4)実技面では、おしゃれなホームページデザイん、
5)魅せるWEBサイトのテンプレート
6)おしゃれなWEBサイトテンプレート集
7)WEBレイアウト3rd など、PCサイズから、MOBサイズに変更できる例が沢山あります。

しかし基本は自分で一つのベースを作ってゆくことが、大切です。それが出来れば、後はそれに従ってゆくだけですから・・・ あまりあせらず、じっくりとベースを固めてから、完成させてみてください。

自分で作ってゆく方法が、3)で輪詳しく出ています。 responsibleも良く出ていますが、最初は、少し難しいかな?
でもがんばってやってみてください。 成功を祈ります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.03%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る