• 締切済み

スマートフォンサイトの作り方

現在Media Queriesをつかった方法や jquery mobileを使用した方法など様々な方法で PC、タブレット、スマートフォンに対応する方法がありますが それぞれの使い分けや、メリット、デメリットを整理したサイトや 書籍などありましたら教えていただきたいともいます。 また体験談などもご教示いただけましたら幸いです。 中小企業の会社ホームページを作成するということでは やはり理想はjqueryでの構築がよいのでしょうか。 (個人的にはMedia Queriesのほうが重くなるのかなとも考えています) 非常にざっくりした質問で恐縮ですが 皆様のご経験を伺いたく質問させていただきました。

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

現在はjqueryに依存しなくてもよいはずです。なぜならスマートホンはCSS3に対応しているためメディアクエーリーが使えるからです。特に企業サイトの場合、jquery(javascript)を使う場合には内容に影響がない範囲にとどめるべきだから 【引用】____________ここから Lynx などのテキスト ブラウザを使用して、サイトを確認します(ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります)。JavaScript、Cookie、セッション ID、フレーム、DHTML、Flash などの特殊な機能が使用されているためにサイトの一部がテキスト ブラウザで表示されない場合、検索エンジンのスパイダーがサイトをうまくクロールできない可能性があります。  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[ウェブマスター向けガイドライン - ウェブマスター ツール ヘルプ( http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=35769#2 )]より  しかもどうしても動作が重くなります。(jqueryのほうが重いです)  それ以前に、HTML自体をきちんと作成しましょう。すなわち、文書を読み解き内容を理解して、文書構造だけをきちんとマークアップすること。--極論すればデザインは一切考えない--。デザインはHTMLさえきちんとできていれば、はるかに自由度が高く高度なデザインがHTMLに手を加えることなく可能ですし、SEO的にも最善です。

iewmmxnb99bb63
質問者

お礼

ORUKA1951さんご回答ありがとうございます! >スマートホンはCSS3に対応しているためメディアクエーリーが使えるからです。特に企業サイトの場合、jquery(javascript)を使う場合には内容に影響がない範囲にとどめるべきだから なるほど。SEOの観点から言っても、製作過程の効率化から言ってもメディアクエリーのほうがよいのですね! メディアクエリーを中心に考えてみます! まずはHTMLをきっちりとですね^^ ありがとうございましたm(_)m

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • Media Queries ってDBあるのですか?

    メディアクエリってジャバクエリみたいにデータベースがあるのですか? ホームページを持っているのですが、リアルで知り合いの人に、スマホで見るときPC表示で見づらいといわれてしまいました。( ;∀;) 前々からメディアクエリというものがあるのは知っていたのですが、どう探してもDLページにたどり着けません。 一応それらしきサイトは見つけたのですがこちらであっているでしょうか?⇒(http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/)Media Queriesと書いてあるので、おそらくここなのかなと思いますがいかがでしょうか。 本題に戻りますが、Media QueriesってメディアごとにCSSを振り分けるやつらしいのですが、記述方法がよくわかりません。(ここ見ました:http://dev.classmethod.jp/smartphone/device-media-queries/) JQueryみたいにDB(データベース)は無いのでしょうか?あるとすると、どのサイトにあるか教えてください。DBが存在しない場合、http://dev.classmethod.jp/smartphone/device-media-queries/に書かれていた通り<link href="css/iphone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" >でいいのでしょうか。また、下記のように書く際はどのように記述すればよいのですか?”セレクタ@media ~”でいいのでしょうか? <style type="text/css"> <!-- //--> </style> よろしくお願いします。(´・ω・`)

    • ベストアンサー
    • CSS
  • レスポンシブwebデザインでユーザに選択肢を与える

    解像度別でスタイルが自動適用されるレスポンシブwebデザインについて、詳しい方へお伺いいたします。 例: http://www.webdesignerwall.com/demo/media-queries/ ※上の参考URLは違いますが、Media QueriesはjQuery Media Queries Plugin利用利用・W3C準拠前提。別の方法があればその方法も知りたいです。 端末別に4種類ほどデザインを用意した場合で、 例 http://mediaqueri.es/ ・携帯ユーザが最初にアクセスした時自動適用されたのが携帯用デザインで、 ・しかし携帯ユーザがその端末でく別サイズ用デザインを望んだとき、 ・携帯端末でも任意にCSSを選ぶことができ、 ・一度選んだら画面遷移後もPCサイズのCSSを適用 とすることはできるのでしょうか。 できるとしたら、そのためにはどのような方法(Javascript/Plugin)があるでしょうか。 そのようなサイトがあれば、参考URLも教えて頂けますと幸いです。 よろしくお願いいたします。

    • 締切済み
    • CSS
  • 中小企業と大企業の違い

    漠然とした質問で恐縮ですが、 中小企業と大企業の違い(それぞれのメリット・デメリット)を教えてください。 また給料もかなり違ってくるのでしょうか?

  • 電子書籍リーダーと、タブレット端末の違いは?

    いまさらな質問をさせていただきます。 幾つか質問がございますのでお答え頂けるものだけでも構いませんのでよろしくお願いします。 *質問1 電子書籍リーダーと、タブレット端末の違いを教えて下さい。 一見見た感じでは、この二つは似ています。 どう違うんでしょうか。 *質問2 電子書籍リーダーと、タブレット端末、いずれもネットに繋げられるんでしょうか。 *質問3 ネットに繋げられるという場合、それぞれどのような回線を使いますか。 幾つかあれば、全て教えて下さい。 どんな時どんな所ではどんな回線で繋ぐことが多いですか。 どんな時どんな所ではどんな回線で繋ぐことが便利ですか。 それぞれの接続のしかたはどんな風に構築し確立しますか。 お付き合いありがとうございました。

  • Media Queries スマホでのPC版表示

    初心者ですので、おかしな質問かもしれませんが…。 Media Queriesを利用し、スマートフォンとパソコンで自動的にスタイルシートの切り替えをしたいと思っています。 更に、スマートフォン版、PC版への切り替えボタンを作成したいのですが、 スマートフォンでサイトを観覧した場合、Media Queriesによって強制的に読み込まれたスタイルシートを PC版のスタイルシートに切り替える良い方法はないでしょうか? その方法自体(javascriptなどのプログラミングに関し知識が乏しいため、可能であれば詳しく 教えて頂るとありがたいです。)や、その解説もしくはヒントになるウェブサイトの紹介をして 頂けると助かります。 もしくはこの用語で検索すればヒントが得られるかもなどのアドバイスでも構いません。 よろしくお願い致します。

    • ベストアンサー
    • CSS
  • jQueryで印刷用の条件分岐などできますか?

    cssであれば media="print" @media print などの方法がありますが、jQueryでも似たようなことはできますでしょうか? 印刷用にcssを作れないほど複雑になってしまっているので、印刷の時のみjQueryでサイト内全てのタグにstyle="overflow:visible;"などと追記してはどうだろうと考えています。 調べたのですが、見つけられなかったのでこちらで質問させていただきました。 よろしくお願いいたします。

  • スマートフォンは何のためにあるのか?

    スマートフォンに興味深々の40代オヤジです。 パソコンを扱うのが趣味なので、スマートフォンは自分に合うのかと思ったりするのですが、スマートフォンについて調べれば調べるほど、何でそんなに売れるのか?と思ってしまいます。 まず、何ができるのか、、、 ドコモのHPとか見てもよくわかりません。 教えてgooの過去の質問もかなり読みましたが、結局何がメリットかよくわかりません。 人気アプリもいろいろ見てみましたが、特に興味があるものもありません。 周りにも、スマートフォンを持つ人が増えてきましたが、使いにくい、不便、でかい、などデメリットをあげる人が多いです。 ただ、流行ってるから使っている、、、だけ、、、 しかし、一度手にしたら、もう離せない、という人がいるのも事実。 そんな人の声が聞きたいです。 具体的に何をしているのか知りたいです。 一度手にしたら、もう離せない人、何をしてそんなにはまっているのか教えていただけませんでしょうか? ゲームですか?ネットですか? そんなにやみつきになるアプリとかあるのですか? 過去の質問の回答等を見ても、具体的な答えは少なく、いまひとつよくわかりません。 実際持ってる人で、本当に満足してる人って少ないのではないでしょうか? そもそもスマートフォンは何のために開発されたのでしょう? 各メーカーはスマートフォンを普及させて人々に何をさせようとしてるのでしょう? (タブレットも同じように不思議な存在ですが・・・) パソコンが大好きなので、ぜひ知りたいです。 スマートフォンが単に携帯の延長ではない、こんなことに使ったら、スマートフォンの本当のメリットを最大限に生かせる、というようなお話が聞きたいです。 私がちょっと思っているのは、 ・都会の人が長時間電車の通勤で動画を見たり電子書籍を読んだりして、暇つぶしにいいのかなとか、 ・外出が多く、家や会社でパソコンをする時間がないので、スマートフォンでがまんしている、とか。 そんな人たちが本当に使いこなしてるのかな???って気もしますが。 私は田舎もので通勤も車で20分だし、家でも会社でもパソコンが使えるので、こんな私にはスマートフォンは不便な携帯にしかならないのかな?

  • jquery.mobile 画像を中央に表示

    <!DOCTYPE html> <html lang="ja"> <head> <title>test</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"> </script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"> </script> </head> <body> <div id="home" data-role="page" data-theme="d"> <ul data-role="listview" data-dividertheme="a"> <li data-role="list-divider">test </li> <li> <a href="#"> <img src="C:\1.jpg"> test </a> </li> <li> <a href="#"> <img src="C:\2.jpg"> test </a> </li> </ul> </div> </body> </html> ------------------------- 上記のようなコードで携帯サイトを構築しているのですが 正方形ではない画像が、右上に寄ってしまうのですが これを回避する方法はありますか? 例で言うのであれば 添付画像の黄色い四角を画像表示エリアの中央に表示させたいです。

    • ベストアンサー
    • HTML
  • タブレット(アンドロイド)が変なんです

    タブレット(GALAXYTab7.7)の立ち上げを行うと、「http;//media.solowweb-media.com」のページが表示されて更に添付画像の様なメッセージが出ます。 また、「楽天kobo:電子書籍/小説・漫画・無料本が読める!」のタブも作成されて、インストールさせようとします。 非常に迷惑しています。 これらが出ないようにする方法を教えて下さいお願いします。

  • iphone向け動画配信サービスについて

    自社で構築したサーバにて、iphone向けに動画配信サービス【ストリーミング配信】をやりたいのですが、最も手軽に構築出来る方法を教えて頂けますでしょうか?…ざっくりとした質問で大変恐縮なのですが、どうぞ宜しくお願いいたします。

このQ&Aのポイント
  • ip8730のドライバーがインストールできない。WifiでもUSBでも
  • ip8730のドライバーがインストールできない問題について解説します。Wifi接続やUSB接続でのインストール方法を詳しく説明します。
  • ip8730のドライバーがインストールできない場合の対処法をご紹介します。Wifi接続やUSB接続でのインストール方法を確認し、問題が解決するか試してみてください。
回答を見る