• ベストアンサー

スマホ用のhtmlの覚え方

現在、私が作成したWebサイトはパソコン用になっており、スマホ用に最適化されておりません。 私が、なんとなく認識しているのは、UAごとに、htmlファイルを切り替えられるということくらいです。 パソコンだったらパソコン用のhtml、スマホだったらスマホ用のhtmlというように。 この切り替えはどうやって行うのでしょうか? もちろん早いうちにスマホ用のhtmlの書籍も買いますが、何か注意点などもあれば教えて下さい。 どうぞ、宜しくお願い致します。

noname#233083
noname#233083
  • CSS
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

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

すでにウェブページを作成してきた経験があれば、当然下記の一文は読まれていると思います。 【引用】____________ここから HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。 ・・・【中略】・・・  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をなぜ使ってウェブページを作成するかの、最も重要な部分を忘れてしまっている。  最も簡単なのは、率直にHTMLを書き、スタイルシートでデザインしていくだけです。  ⇒2.4 HTML 4による文書の著述( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4 )  ウィンドウの幅に関わらずページが利用できるようスタイルシートでデザインしていきます。スマホはmediaqueryというCSS3の機能が利用できますから、特別スマホ用にデザインが必要ならそれを利用してスタイルシートを切り替えます。

noname#233083
質問者

お礼

ありがとうございます! スタイルシートでデザインするように頑張ってみます!!

関連するQ&A

  • スマホとPCで表示画面を切り替えられますか?

    現在、Webサイトを作成しておりますが、気になることがでてきました。 それは、スマホユーザーとPCユーザーで表示する画面を切り替えることはできるのか?ということです。 私としては、スマホ用とPC用のHTMLファイルをそれぞれ作成し、スマホユーザーにはスマホ用のHTMLファイルを呼び出し、PCユーザーにはPC用のHTMLファイルを呼び出すことができればと思っております。 これは、もしかしてPHPを使えばできるのでしょうか? その場合、切り替え方を簡単にで良いので教えて頂けないでしょうか? 詳しく教えて頂ければ、何より幸いですが、どうぞ宜しくお願い致します。 ちなみに、PHPを使い、メールフォームは作成したことがあります。

    • ベストアンサー
    • PHP
  • スマホサイト作成について

    ワードプレスのレスポンシブではないサイトはいくつか 作成したことがありますがレスポンシブを使わずスマホサイトを 作ろうと思っています。 ワードプレスでレスポンシブを使わないでスマホサイトを作るには どうしたらよいでしょうか? 現在PCサイトがあるワードプレスの中にスマホサイトのファイルは 置けそうにないのですが実際に置くことはできないでしょうか? またいくつかスマホのサイトが簡単に作れるというサービスを見ましたが 既存の自社ドメインではないものになってしまうという認識でよろしいでしょうか? よろしくお願いします。

  • スマホサイト用の画像を作成する場合のサイズについて

    現在、個人で作成したWebサイトがあるのですが、パソコン用のみとなっております。 レスポンシブWebデザインで、スマートフォンにも対応するために、取り組んでいるところです。 パソコンサイトと同じ画像を、スマホのデバイスでも併用する場合はスタイルシートでサイズの縮小を指定すれば良いかと思います。 しかし、デバイスのサイズごとに、画像を切り分けることも必要かと思います。 この場合、スマホ用の画像を作成する場合、下記のdevicePixelRatioを考慮し、表示するサイズの2倍の解像度で画像を作成するという認識で問題ないでしょうか? iPhone 6 Plusのdevice-pixel-ratioは『3』ですが、ファイルサイズによる読み込み速度の影響をふまえて、2倍の解像度の画像で良いのかと思っております。 ■devicePixelRatioの例 iPhone 3GS: devicePixelRatio(1.0) iPhone 5S: devicePixelRatio(2.0) iPhone 6 Plus: devicePixelRatio(3.0) 初歩的な質問になりますが、ご回答のほど、宜しくお願い致します。 また、関連することや、他のことでのアドバイスなどもありましたら、是非宜しくお願い致します。

    • 締切済み
    • CSS
  • レスポンシブWebデザインでテキストの振分について

    現在あるPCサイトをスマホにも対応させたいので、スマホ用のファイルを別に作成するか、またはレスポンシブWebデザインにしようと考えております。 そこで疑問に思ったことがあります。 私が把握しているレスポンシブWebデザインのサイトは、例えば住友商事のようなサイトです。http://www.sumitomocorp.co.jp/ パソコンのブラウザで表示している場合、マウスを使ってカーソルを操作してブラウザを縮小すると、レイアウトが可変します。 ※もちろん、スマホで見れば、スマホに最適化された表示になっております。 一方、アマゾンのようなサイトの場合、パソコンでカーソルを操作してブラウザを縮小しても表示は変わりません。 しかし、PCとスマホで異なるデバイスで確認すると、表示しているテキストや画像が異なります。 私の認識では、このようなサイトはPC用とスマホ用で異なるファイルを作成し、PCとスマホで読み込ませるURLを振り分けるていると思っておりましたが、PCで確認してもスマホで確認してもアドレスバーに表記されているURLは同一の物です。 このアマゾンのようなサイトはレスポンシブWebデザインによって作られているのでしょうか? もし、レスポンシブWebデザインならば、デバイスごとに表示させる画像を振り分けることははもちろんのこと、テキスト(文章)の振り分もできるということなのでしょうか? レスポンシブWebデザインで画像もテキストも振り分けられるなら、PC用とスマホ用でファイルを分ける必要はないかと思うので、私が作成したPC用のサイトを、レスポンシブWebデザインにしようかと思っております。 以上となります。 どのようなご回答でも良いので、また質問の内容とはそれてしまってもよいので、なにかしらご回答を頂けると幸いです。 宜しくお願い致します。

    • 締切済み
    • CSS
  • スマホサイトでWEBサイトへのショートカット

    スマホサイトを作成しています。 パソコンサイトでは、「お気に入りに追加」ボタン(リンク)を設置して、それをクリックするとお気に入りに追加されるといったことができますが、スマホサイトで、ページにあるボタン(リンク)をクリックすると、WEBサイトへのショートカットがホーム画面に作成されるといったことは可能なのでしょうか? 方法が分かる方がおられましたら、ご教授いただけませんか。 よろしくお願い致します。

    • 締切済み
    • CSS
  • ガラケーから格安スマホへの切り替え

    現在使用中のガラケーの状況は次の通りです。  ソフトバンクの816SH、ホワイトプラン、月額3,000円程度 格安スマホへの切り替えを検討中ですが、次の条件にあう、お勧めの機種、格安SIMがあればご教示ください。 1:月額料金は、3,000~4,000円程度(現在と同水準) 2:現在と同じ電話番号で通話もしたい 3:スマホの用途は、メール、ツイッター、ウェブ閲覧(できれば楽天市場、食べログ、地図のサイト閲覧ができれば) 4:スマホのアプリも使えればなお良し また、ガラケーから格安スマホへの切り替えの手続きはどうすればいいのでしょうか。 以上、宜しくお願いします。

  • スマホに変えたい!!!

    現在、大学2回生の男です。大学入学時にケータイを変えて、1年とちょっとたつんですけど、そろそろスマホにかえたいなと。 現在auなんですが、おすすめのスマホとか、買うときの注意点とかあったら教えてほしいです!!

    • ベストアンサー
    • au
  • 作成中のWebサイトをスマホで見ると、突然消えます

    Webサイトを作成しており、パソコンではきちんとドメインを入力して確認することはできます。 そこで、私のイーモバイルのスマホでドメインを入力し、確認してみると、3秒くらいで突然消えます。 これは、なぜでしょうか?

    • ベストアンサー
    • CSS
  • スマホ向けのウェブサイトはどう思いますか?

    趣味でウェブ製作をしている者です。 さて、最近スマホからウェブを見る機会が皆さん増えているかと思います。 一般的にウェブサイトはパソコンからアクセスをすることが前提で作られてきましたが、スマホの普及により、スマホ向けのレイアウトで作られたサイトも増えてきました。 あくまで私の個人的な意見ですが、スマホからアクセスする場合であっても、パソコン向けにサイトを表示するほうが、情報量が多く、文字は細かくはなってしまいますが利便性は高いと感じています。 そこで質問なのですが、みなさんはスマホからウェブページを見る際、パソコン向けの画面がいいか、スマホ向けの画面が良いか、ご意見をお願いします。 *私の運営しているサイトではありませんが、丁度いいサイトがありましたのでイメージは以下のような感じです こちらがスマホ向けのレイアウト http://www.d-navi.info/dq4/ こちらがPC向けのレイアウト http://www.d-navi.info/dq6/ 是非参考にさせてください。よろしくお願いします。

  • スマホでDLしたデータをPCでみたあと見れなく・・

    よろしくお願いいたします。 スマホでダウンロードした動画をパソコンで見たかったのと、パソコンでアンドロイド用にリッピングしたファイルを取り込みたくてSDカードをパソコンに入れ見ておりました。 現在もパソコンでは認識し正常に見れるのですが、スマホはというと、ダウンロードした動画は見ることができなくなっており、実際にスマホで撮影した動画しか認識されなくなってしまいました。。。 元の状態に戻したいのですが、これは、パソコンで見れるように書き換えられたということでしょうか? 保存データはSDカードでの保存です。 パソコンの認識ではMP4かWMVとなっています。 元どおりにする解決策はありませんでしょうか!? パソコンはWindows7です。 スマホはGALAXY sIIです。 質問はできる限りお答えしますので、どうぞよろしくお願いいたします。

専門家に質問してみよう