• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:スマホとPCサイトの供用ページの最初の記載は?)

スマホとPCサイトの供用ページの最初の記載は?

このQ&Aのポイント
  • スマホとPCの供用のページを作ろうとしています。見よう見まねでヘッド部分の記載をしていますが、正しいのか不安です。
  • HTMLタグの中には、<HEAD>というタグがあります。この中には、ページの情報や検索エンジンに表示される情報を書くことができます。
  • また、<META>タグを使って、文字コードやキーワード、ページの説明文などを設定することもできます。

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

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

>スマートフォンとPCの供用のページを作ろうとしています。  いえ、元々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を記述すれば、本来はどのようなユーザーエージェントからも利用できるはずです。そのために、私たちはHTMLを公開手段に選択するのです。  たとえば、ディスプレイ幅が640px以上なら問題なく利用できるようにリキッドデザインで作成するのが当面はもっとも簡単でしょう。  その上でデザインに凝る必要が出てくるでしょうから、そのときになってスタイルシートで端末ごとにプレゼンテーションを変える工夫をすれば良いでしょう。 [例] <meta name="viewport" content="width=device-width"> <link media="only screen and (max-device-width:480px)" href="mobile.css" type="text/css" rel="stylesheet" /> <link media="screen and (min-device-width:481px)" href="wide.css" type="text/css" rel="stylesheet" /> <!--[if IE]> <link href="wide.css" rel="stylesheet" type="text/css" /> <![endif]-->  しかし、それは後回しにしても良いでしょう。  なぜなら、デザインで人が尋ねてくるわけではないからです。やはり決定的なものはコンテンツですからね。  こちらに良い説明があります。 少しのコードで実装可能な15のスマートフォンサイト用小技集 | Webクリエイターボックス ( http://www.webcreatorbox.com/tech/smartphone-snippets/ ) ★質問部分・・過ならずDOCTYPEは書きましょう。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>Untitled</title>  必ずstrictでね。いずれHTML5になるとtransitinal的な要素や属性はなくなりますから・・ 【引用】____________ここから HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Conformance: requirements and recommendations (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )]より

chanel888
質問者

お礼

ありがとうございました。 とても参考になりました。

その他の回答 (2)

  • tracer
  • ベストアンサー率41% (255/621)
回答No.2

誤解されていると思われますが、スマホ専用のhtml仕様とかpc専用のhtml仕様、あるいは共用のhtml仕様というものはありません。 考え方としては、まずは、htmlの基本形をつくって、そこに対応したいブラウザに必要な記述を追加していくだけです。 スマホサイトでなくてはならないものは存在しますが、PCサイト用の記述が問題になることはないからです。もちろん、PCサイトでも同様に、なくてはならないものは存在しますが、スマホ用の記述が増えて問題になることはありません。 従って、 <html> <head> <title>共用ですよ</title> </head> </html> これだけでも十分共用です。 実用的なサンプルが欲しいのであれば、参考にしているサイトのソースを見たほうが早いです。 最後に、この部分ですが、 <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <META http-equiv="Content-Style-Type" content="text/css"> html5を扱える新しいPC用ブラウザやスマホのブラウザでは、この記述は必要ありませんが(別の書き方がある)、IE8以下などの古いブラウザに対応(文字化けの原因)させるために記述します。

chanel888
質問者

お礼

ありがとうございました。 参考にさせていただきます。

回答No.1

いきなり共用サイトを作るのではなく、PC用サイト、スマホ用サイト、それぞれを作ってみてはどうですか? 失礼を承知で書きますが、これと同じような質問は過去に何度も出てきてます。 ほとんどの人が、html自体を理解していません。 いきなり難しい事をしようとせず、基礎をしっかりと身につけてから、応用してください。 その上で、どうしてもわからないことがあれば、ここで質問してください。 よろしくお願いします。

chanel888
質問者

お礼

ありがとうございました。

関連するQ&A

専門家に質問してみよう