ホームページの構築に詳しい方、
是非ご教授ください!
タイトル通りスマートフォン用のサイトを構築したいと考えております。
しかし1からの構築が初めてで、
何から始めればいいかが分かりません。
サイトのデザイン自体は既に他のデザイナーにより作成済みです。
基盤として用意すべきHTMLやCSS、jQueryなどが全く分かりません。
もちろんスマートフォンやタブレットなど
様々なサイズでも可変して場合によっては、
パーツの入れ替えなどを行いたいと考えております。
※スマートフォン用のサイトを構築する上でのルールや注意点も
併せてご教授頂けましたら幸いです。
またヘッダーのグローバルメニューに関しては、
スマホサイトでよく見る「 三 」のボタンで開閉式にしたいと思っております。
※下へスクロールすると常に表示されるようにしたいです。
以上が簡単な説明とはなりますが、
宜しくお願い致します。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答3件
0
確実でない話で申し訳ないのですが
スマートフォン向けですよね?
大画面は想定しますか?
それによって違うのですが、
スマートフォンサイトの作成について、
PC向けサイトと比べて特別なことはないと思います。
ただし下の事をお勧めします。
よく、調べて完成してから、サイトアップした方が懸命でしょう。(もちろん実験は自由ですが、後から直すのは本当に大変です)
デザインは分からないのでCSSについては何とも言えないので
分かる範囲で載せます
グローバルMENU
jQueryはjquery-1.9.1.min.js
これは開閉用に使うファイル
サンプル
head内
lang
1 <!-- ================= --> 2 <!-- ▼jQuery 読み込み --> 3 <!-- ================= --> 4 <script type="text/javascript" src="./jquery-1.9.1.min.js"></script> <!-- ※自サイト上にアップロードしてある場合は、下の行をコメントアウトし、こちらの行を有効にして下さい。 --> 5 <!-- script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script --> <!-- ※CDNを利用する場合は、上の行をコメントアウトし、こちらの行を有効にして下さい。 --> 6 7 <!-- ==================================================== --> 8 <!-- ▼サブメニューを開閉するためのスクリプト(jQuery利用) --> 9 <!-- ==================================================== --> 10 <script type="text/javascript"> 11 $(function(){ 12 $("#menu li").hover(function(){ 13 $("ul",this).show(); 14 }, 15 function(){ 16 $("ul",this).hide(); 17 }); 18 }); 19 </script> 20 21 <!-- ======================= --> 22 <!-- ▼メニューを装飾するCSS --> 23 <!-- ======================= --> 24 <style type="text/css"> 25 /* ------------------ */ 26 /* メニューバーの装飾 */ 27 div.menubar { 28 background-color: #cc0000; /* バーの背景色 */ 29 border-top: 3px double #800000; /* バーの上端線 */ 30 border-bottom: 3px double #800000; /* バーの下端線 */ 31 min-width: 630px; /* メインメニュー全部が収まる最低横幅 */ 32 } 33 34 /* ------------------------ */ 35 /* メインメニュー項目の装飾 */ 36 div.menubar ul#menu { 37 margin: 0px 0px 0px 15px; /* メニューバー外側の余白 */ 38 padding: 0px; /* メニューバー内側の余白 */ 39 height: 40px; /* メニューバーの高さ */ 40 } 41 div.menubar ul#menu li { 42 width: 120px; /* メニュー項目の横幅 */ 43 height: 40px; /* メニュー項目の高さ(「メニューバーの高さ」と一致させる) */ 44 float: left; 45 list-style-type: none; 46 position: relative; 47 } 48 div.menubar ul#menu a { 49 background-color: #cc0000; /* メニュー項目の背景色 */ 50 color: white; /* メニュー項目の文字色 */ 51 line-height: 40px; /* メニュー項目のリンクの高さ(「メニュー項目の高さ」と一致させる) */ 52 text-align: center; /* メインメニューの文字列の配置(中央寄せ) */ 53 text-decoration: none; /* メニュー項目の装飾(下線を消す) */ 54 display: block; 55 width: 100%; 56 height: 100%; 57 } 58 div.menubar ul#menu a:hover { 59 background-color: #ffdddd; /* メニュー項目にマウスが載ったときの背景色 */ 60 color: #cc0000; /* メニュー項目にマウスが載ったときの文字色 */ 61 } 62 63 /* メニューバー直後の Clear Hack */ 64 div.menubar ul#menu { zoom:1; } 65 div.menubar ul#menu:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; } 66 67 /* ---------------------- */ 68 /* サブメニュー項目の装飾 */ 69 div.menubar ul#menu ul.sub { 70 background-color: #cc0000; /* サブメニュー全体の背景色 */ 71 border-width: 1px 1px 0px 1px; /* サブメニュー全体の枠線の太さ */ 72 border-style: solid; /* サブメニュー全体の枠線の線種 */ 73 border-color: #800000; /* サブメニュー全体の枠線の色 */ 74 margin: 0px; 75 padding: 0px; 76 display: none; 77 position: absolute; 78 } 79 div.menubar ul#menu ul.sub li { 80 width: 135px; /* サブメニュー1項目の横幅 */ 81 height: 35px; /* サブメニュー1項目の高さ */ 82 border-width: 0px 0px 1px 0px; /* サブメニュー1項目の枠線の太さ */ 83 border-style: solid; /* サブメニュー1項目の枠線の線種 */ 84 border-color: #800000; /* サブメニュー1項目の枠線の色 */ 85 } 86 div.menubar ul#menu ul.sub li a { 87 line-height: 35px; /* サブメニュー1項目の行高(「サブメニュー1項目の高さ」と合わせる) */ 88 text-align: left; /* 文字列の配置(左寄せ) */ 89 text-indent: 5px; /* 文字列前方の余白 */ 90 } 91 div.menubar ul#menu ul.sub li a:hover { 92 background-color: #ffff80; /* サブメニュー項目にマウスが載ったときの背景色 */ 93 color: #005500; /* サブメニュー項目にマウスが載ったときの文字色 */ 94 } 95 96 </style>
body内
lang
1> <!-- ======================== --> 2> <!-- ▼メニューを構成するHTML --> 3> <!-- ======================== --> 4> <div class="menubar"> 5> <ul id="menu"> 6> <li><a href="#">HOME</a></li> 7> <li><a href="#">ニュース</a></li> 8> <li><a href="#">製品・サービス</a></li> 9> <li><a href="#">会社情報</a> 10> <li><a href="#">お問い合わせ</a></li> 11> </ul> 12> </div> 13> <!-- ========== --> 14> <!-- ▲ここまで --> 15> <!-- ========== -->
単に開閉だけならば
lang
1<biv id="class"> 2 <img src="http://www.honda.co.jp/ACCESS/chums/images/menu_open_btn_sp.png" onclick="menu()"> 3 <biv id="menu"> 4 <a href="TOPページのURL">TOP</a><br> 5 <a href="2つ目のページのURL">タイトル2</a><br> 6 <a href="3つ目のページのURL">タイトル3</a><br> 7 <center>・<br>・<br>・</center> 8 </biv> 9</biv> 10<script> 11<!-- 12if i=0 13{ 14 var i="1" 15 document.getElementById("menu").innerHTML=""; 16} 17else 18{ 19 function menu(num) 20 { 21 if (document.getElementById) 22 { 23 var="" 24 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>"; 25 } 26 } 27} 28 29--> 30</script>
これはスマートフォンに限らずなのですがjavascriptが使えない場合があります。なので次のコードをどこかに入れてください
lang
1<noscript> 2 このページはJavascriptを使っています<br> 3 快適にご利用いただくにはJavascriptをオンにしてください 4</noscript>
まだ分からない事があったらコメントください。
投稿2015/05/09 07:15
退会済みユーザー
総合スコア0
0
おはようございます。
最初はなかなか苦労が多いでしょう・・・最初矢張り本を見たほうが良いでしょう。 やさしい本では、
1)iphone+androidスマートフォーン入門、たぐち まこと そして最近では、
2)スマートフォーンサイトのためのHTML+CSS3 エ・ビスコム これは、例が豊富です。
3)その後、HTML5$CSS3 ステップアップブック・・・これは、作り方が良く出ています。
最近は、レスポンシブが主体でありMOBから作るのが、基本となってきているので(google社でも推奨)、作ってから直すのは大変です。
よく、調べて完成してから、サイトアップした方が懸命でしょう。(もちろん実験は自由ですが、後から直すのは本当に大変です) その他の文献は、
4)実技面では、おしゃれなホームページデザイん、
5)魅せるWEBサイトのテンプレート
6)おしゃれなWEBサイトテンプレート集
7)WEBレイアウト3rd など、PCサイズから、MOBサイズに変更できる例が沢山あります。
しかし基本は自分で一つのベースを作ってゆくことが、大切です。それが出来れば、後はそれに従ってゆくだけですから・・・ あまりあせらず、じっくりとベースを固めてから、完成させてみてください。
自分で作ってゆく方法が、3)で輪詳しく出ています。 responsibleも良く出ていますが、最初は、少し難しいかな?
でもがんばってやってみてください。 成功を祈ります。
投稿2015/05/08 01:09
退会済みユーザー
総合スコア0
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
こんにちは。
ホームページの構築に全く詳しくない私で恐縮ですが。
レスポンシブデザインについてご存知なければ、
以下を参考にしてみては如何でしょう。
概念から基本的な作成方法まで情報がまとまっていました。
http://blog.idea-clippin.com/?p=830
その上で不明点があればご質問内容を更に絞っていただけると、
良い回答が得られやすいかと思います。
既にご存知であれば失礼致しました。無視して頂ければ。
投稿2015/05/07 16:29
総合スコア4791
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。