PC用サイトをスマホに最適化するための方法とは？
- PC用サイトをスマホに最適化するためには、HTML5への移行とCSSやJavaScriptを活用する必要があります。
- HTML5への移行が時間のかかる場合でも、既存のページをスマートフォンで閲覧できるようにすることが重要です。
- CSSやJavaScriptを使用して、スマートフォンと判断した場合は専用のページにリダイレクトする方法もあります。
- ベストアンサー
PC用サイトをスマホに最適化するためには？
こんにちは。 私は400ページくらいのサイトを運営しております。内容は映画関係。 どうやらHTML4.01にさえ準拠していないので、HTML5にするには相当時間がかかると存じます。それからCSSなどでスマホ用にも作れたらと思っています。 そのためにまずは既存の準拠していないページをスマートフォンで見られればいいかな！って思った次第です。でも見に来た人がスマホなのかパソコンなのか判断するのにCSSやJavaScriptが必要なんではないのかな！？と考えています。 で、CSSやJSでスマホと判断したらスマホ用のページに飛ばすという。ただ、これは1つのページにつきPC用とスマホ用の2つのページを用意しなければならないのではと困惑しています。 どなたか、道を照らして頂けませんでしょうか？ よろしくお願いいたします。
- shoshin01
- お礼率85% (141/164)
- HTML
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
HTML4.01であってもスマホで問題ないのですが、大事なことはHTML4.01であってもstrictに準拠というか・・・HTMLにはプレゼンテーション--見栄え---に関わることは一切無くて、文書構造だけ記述してあり、プレゼンテーションはスタイルシートでのみ指定してあるか・・だけです。 そうすれば、スタイルシートを用意するだけで、幅広のディスプレイやスマホのみなせず、携帯電話もスクリーンリーダーも・・・ 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTMLでは、著者は出力メディアの別を問わない文書作成ができる。これによりユーザは、非常に多様な装置やメディアによってWebページにアクセスできる。多様な環境とは、例えば、Windows、Mac OS、X11などのシステムが走っているコンピュータのグラフィックディスプレイや、インターネットテレビ、携帯電話組込み機器やPDAベースのモバイル機器、音声ブラウザ、点字出力環境、などである。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )］より 長くなりましたが、 ＞まずは既存の準拠していないページをスマートフォンで見られればいいかな！って これは、無理です。 ＞これは1つのページにつきPC用とスマホ用の2つのページを用意しなければならない ますますもって無駄です。 文書構造とプレゼンテーションを分離することで、たった一つのHTMLを作成するだけで、様々なユーザーエージェントに対応できますし、ユーザーが任意のスタイルを選択することもできます。 「なぜならただ1種類の文書しか作る必要がなくなるからだ。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )」 折角作成するなら、いずれにも対応したHTMLを作ればよいです。そして順次切り替えていく。時間的にも労力的にも無駄にならないでしょう。 ＞
その他の回答 (4)
- b0a0a
- ベストアンサー率49% (156/313)
最近のスマホは高解像度です今年度中にフルHDの機種も続々と出ます 縦持ちでもよこ1080dotあるわけです よって比較的文字の少ないページなら横のスクロールがないよう ページ毎拡大縮小させて画面にフィットさせるだけでいいです 実際そうしている超大手企業サイトもありますし、最高ではないですがそれで案外困りません あとは沢山文章があるところは文字サイズをインチとかで指定すればいいんじゃないですかね
お礼
お返事が遅れまして申し訳ございませんでした。 ご回答ございました。
r360studioさんがCSSを使いPCからスマフォまで対応サイトサンプルを公開してます。 http://r360studio.com/dgcr/dgcr-extra22/test3.html CSSはこちら http://r360studio.com/dgcr/dgcr-extra22/grid.css PC上で画面サイズを変更すると変化します。 ＊ページは一つでメタタグで切り替えてます。
お礼
お返事が遅れまして申し訳ございませんでした。 ご回答ございました。
- lv4u
- ベストアンサー率27% (1862/6715)
「Webサイトのスマートフォン対応 7つの基本ルール」というのがありました。 http://web-tan.forum.impressrd.jp/e/2011/01/31/9607 これをみると、ＣＳＳを駆使するとしても、やはりスマホで使いやすいページにするためには、それ相応の修正が必要になるようです。 地道にスマホ対応に修正していくって手もあるでしょうけど、これを機会に、新しいサイト構築の環境に乗り換えるってのもありかもしれません。 新しいもの、メジャーなものは、プラグインとかテンプレートなどで、スマホ対応を可能としているみたいです。 ちなみに、私は、concrete5っていうＣＭＳを使ってサイトを作っていますが、これにはiPhone用のプラグイン？みたいなのが提供されていて、お手軽にＰＣ用サイトをスマホ対応にできるみたいです。私はiPhoneユーザではないのですが、アクセスする人にiPhoneユーザが増えてくると思えるので、試してみようかな、なんて思っています。
お礼
お返事が遅れまして申し訳ございませんでした。 ご回答ございました。
- axuaxua
- ベストアンサー率36% (82/223)
スマホ用に作成するのが、ユーザーとしては使いやすいです。(軽量化が出来る） ちゃんとCSSで作っているならCSSをスマホ用に用意すれば一応できます。以下URL参照。 http://mnemoniqs.com/web/one-css-smartphone/ 画面サイズが変わっただけでかなり大変ですが頑張ってください。
お礼
お返事が遅れまして申し訳ございませんでした。 ご回答ございました。
関連するQ&A
- 画像拡大機能のjsをスマホで読み込まない
ホームページの画像拡大表示に、shadowbox.jsを使っています。 このような画像拡大機能を持つJavaScriptjsをスマホで読み込まないHTMLの書き方を教えてください。 <head>内に、以下のように記述しています。 <link type="text/css" href="../css/shadowbox.css" rel="stylesheet" media="all" /> <script type="text/javascript" src="../js/shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init(); </script> PCでこのホームページを表示させた場合は問題無いのですが、スマホではshadowbox.jsを動作させたくありません。 そのための手法を教えてください。 PC・iPadで動作、スマホ（iPhone・Android）で動作させないの区分けで考えています。 または、shadowbox.jsと同じような画像拡大表示jsのケースでも、結構です。 以上、ソースで書いていただけると助かります。 よろしくお願いいたします。
- 締切済み
- その他（インターネット・Webサービス）
- CSSでPC用、他のスマホ用、PC用を扱うには？
こんにちは。 html5を準拠するようにサイトを構築している者です。CSSでPC用、スマートフォン用、iPhone用に分けようと考えています。 http://mnemoniqs.com/web/one-css-smartphone/ 上記のサイトにて、 1 <!--メインCSS--> 2 <link rel="stylesheet" href="css/style.css" type="text/css" media="all"> 3 <!--スマホ用CSS--> 4 <link media="only screen and (max-device-width:480px)" href="css/smartphone.css" type="text/css" rel="stylesheet"/> この様に書いてありますが、私はauのAndoroidスマホを使用していまして、widthが481px以上になる環境です。それで自サイトをみると、PCでは3ペイン、スマホでも縮小された左右のペインがあります。iPhone、他のスマホでは左右のペインをなくして、メインだけを表示したいのです。 例として http://blog.livedoor.jp/dqnplus/archives/lite/1750885.html では、スマホで見ると左右のカラムが消えて、文字が大きくなり見やすく見やすいです。ですが私のサイトではそれが出来ていないのでそうはいきません。 ちなみにPCブラウザで http://blog.livedoor.jp/dqnplus/archives/lite/1750885.html を表示するとリダイレクトでPC用サイトに行ってしまいますので調べることが出来ませんでした。 どなたか1ページをCSSを使ってPC用、iPhone用、普通のスマホ用にする事が出来ないでしょうか？ お導きの事よろしくお願い申し上げます。
- ベストアンサー
- CSS
- HTML PCサイトをスマートフォンサイトへ飛ばす
詳しい方教えて下さい。 HTML記述でPCサイトへアクセスしたスマートフォンを別に用意したスマートフォンページに飛ばす方法を教えて下さい。.htaccess以外でHTMLの記述で実現したいです。 宜しくお願いします。
- ベストアンサー
- HTML
- スマホからアクセスしたサイトの表示について
質問お願いいたします。特にスマホに特化しているわけではなく、通常のＰＣサイト(HTML4+CSS）があるとします。 iOS、アンドロイドやブラウザに関係はしていないとおもいますが、サイトにより、いきなり全画面（横幅いっぱい）で表示される場合と、ページの左上（例えばこのページだと教えて!gooのアイコン周辺）が拡大されて表示される場合があります。 これらはなにか条件によって異なるのでしょうか？ 現在、サイトを複数運営していますが、後者のように、どのページでも最初のアクセスでは拡大して表示が可能であればアドセンス広告などをその位置に貼りたいと考えています。 詳しい方、よろしくお願いいたします。
- 締切済み
- CSS
- 静的なPCサイトをスマホ対応にする手法
まだスマホもCMSも流行っていない時期に作成した、 単純なｈｔｍｌとcss構築のPCサイトをスマホ対応(デザインやレイアウトの最適化)しようと思います。 以下のような条件の場合、どういった手法が最善でしょうか？ ・PCサイトの全体のページ数は100P以上。ほぼ静的なhtmlで、一部aspによる更新システムあり。 ・すべてのページを最適化しようとは考えていない。トップページと主要なコンテンツ数ページのみ最適化したい。 ・頻繁に修正の入るコンテンツ内容については、PC版を修正したらスマホも同様に変わるようにしたい。(修正の二度手間を無くすため) ・メインナビゲーションなど、ほぼ固定の箇所についてはPCとスマホそれぞれ別ソースでもかまわない 更新の二度手間がかなり気になる箇所なので、できればワンソースでcssによる切り替え対応したいところですが、もともとスマホのことなんて全く考慮していないhtml設計なので、正直cssだけでどこまで最適化できるのか微妙なところです。 希望の形としては、 PCサイト用の大枠のhtmlと、スマホ用の大枠のhtmlがそれぞれ存在していて、 その中のパーツパーツをワンソースで管理できたらベストだなーと思っています。 (PHPファイルとかで部分的なソースをインクルードして使う、みたいな感じでしょうか。) 上記のような方法は可能なのでしょうか？ 可能であるとしたら、どのように実現すれば良いでしょうか。 参考URLなどでも結構ですので教えていただきたいです。 また、上記手法が一般的ではない場合、どういう手法がベストなのでしょうか。 ご教授いただけますと幸いです。
- 締切済み
- その他([技術者向] コンピューター)
- HTML＋CSS＋JSでのアプリ開発
HTML＋CSS＋JavaScriptでAndroidやiOSアプリを作る事は可能だと聞いたことがあるのですが、ネイティブアプリとHTML＋CSS＋JSアプリとではできることにどのような違いがあるのでしょうか?僕が今作ろうと考えているのは募金アプリですので、ネイティブアプリだと募金額の30％取られてしまうのであればHTML＋CSS＋JSで行きますが、有料アプリを出す気は無いです。長期的な事を考えたらJavaから入る方がいいかもしれないですね。あとWebページを作りたいって訳じゃ無くて、募金アプリだったらどっちの方が良いかってこととネイティブに対してHTML＋CSS＋JSでする事にどういうメリットどデメリットがあるのかって事です。長くなってしまいましたが、ご回答頂けると嬉しいです。よろしくお願いします。
- 締切済み
- JavaScript
- HTML5で、メニューボタンを固定位置にする方法
HTML5で、メニューボタンをスクロールしても固定位置に表示する方法を教えてください。 今回はスマートフォン向けのサイトです。 CSSやJavascriptで実現できる方法はいくつかあるのですが、スマートフォンではうまく機能しません。 HTML5では機能しなかったり、スマホブラウザでは機能しなかったり・・・。 よろしくお願いいたします。
- 締切済み
- JavaScript
- PC用サイトと携帯用サイトの運営には？
こんにちは。 私は以前から音楽に関することのホームページを、手打ちにて作成していました。この頃、iPhone、androidなどのスマートフォンからのアクセスが全体の1/3くらいになってきました。これは大変嬉しいことなのですが、『PC用』サイトであるために、スマホからだと若干見づらくなっております。 そこで私は現在考えたのは、『PC用サイト』と『スマホ用サイト』の2つに分割できないかな！？と…。管理としましては1つの方が楽だと思いますが、みなさんはどのように思われますか？もしくは1つのHTMLページを、『PC用』『スマホ用』と見る側がかってに判断して下されば楽かな？と。 また少し検索をしてみて感じたのは「Dreamweaver」を用いての『jQuery…』というようなものがあるのかと。管理が楽になるのでしたら「Dreamweaver」の購入もやぶさかではないと考えております。 以上、よろしくお願い申し上げます。
- ベストアンサー
- HTML
- HPで各頁に共通したヘッダーhtml全部をつけたい
ホームページで各ページに共通したヘッダーを JavaScriptのdocument.write()を利用してつけようとしています。 OSはwindows Xpで、制作ツールは、alphaEDITを使用しています。 １．「header.js」ファイルを用意 document.write("<header.html>header"); ２．「index.html」を用意 <html> <head></head> <body> <script language="JavaScript" src="header.js"></script> 中身 </body> </html> ３．スタイルシートsample3.cssを用意 ４．header.html を用意 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html><head><title>ヘッダー</title> <meta content="text/html; charset=shift_jis" http-equiv="Content-Type"> <link rel="stylesheet" type="text/css" href="sample3.css"> <script language="JavaScript" src="func.js"></script> </head> <body> （かなり長いので省略） <p> </p></body></html> これで「index.html」を実行しますと、 header 中身 と表示されます。 headerという文字ではなく、header.html 全部を表示し、かつスタイルシートも反映させたいのですが、どうすればいいですか？ 教えて下さい。 参考にしたＵＲＬ 各ページに共通したヘッダー(フッター)をつける http://tagland.net/technique/common_header.html
- ベストアンサー
- JavaScript
- 外部ファイルを読み込ませるための記述方法を教えてください！
(1)index.html (2)「index.html」以降のページのフォルダ(の中にhtml) (3)css.js (4)cssファイル を同じ階層に置いています。 htmlには<SCRIPT LANGUAGE="javascript"src="css.js"></SCRIPT> と書かれており、css.jsファイルからcssファイルを読み込み htmlにcssが適用されてるように設定されています。 この階層のhtmlにはcssが反映されるのですが (2)のフォルダの中のhtmlにとってはcss.jsの階層は一つ上になるのですが、 <SCRIPT LANGUAGE="javascript"src="css.js"></SCRIPT> と書いてもcssが反映されません。 srcの指定を正しくするにはどのように記述したらいいのでしょうか？ <SCRIPT LANGUAGE="javascript"src="../css.js"></SCRIPT> と記述してもダメでした。 Javascriptの言語がほとんどわからず困ってしまっています。 大急ぎで知りたいのですが、わかる方いらっしゃいましたら 教えてくださると大変助かります。 どうかよろしくお願い致します。
- ベストアンサー
- JavaScript
お礼
お返事が遅れまして申し訳ございませんでした。 ご回答ございました。