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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

3回答

2076閲覧

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

mikio

総合スコア38

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

3クリップ

投稿2015/05/07 13:37

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

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

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

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

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

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

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

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

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答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

Tak1wa

総合スコア4791

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mikio

2015/05/08 00:01

Tak1waさん 早速のコメントありがとうございます。 参考URLを見て実践してみたいと思います。 その中で分からないことがあればまたコメントさせて頂きます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問