こんにちは、
WEB制作に関する質問です。
今制作しているサイトをフルスクリーンにしようと考えています。
#wrapper {
width: 100%;
height: 任意の値
}
また#header、#content、#footerなどにもwidth: 100%の値を同様に入れました。
その中にdivなどのブロックを置いてデザインをしました。
そこで、疑問なのですが、わたしが使っているPCの画像解像度が1366/768です。
この解像度に合わせて作っているので、自分のPCでは問題なく、画面に表示されますが、
例えば他の解像度のPCや、あるいは他のディスプレイのサイズだと、形が崩れていたり、自分のパソコンで映っていた時のものと見栄えが変わってしまいます。
そこでディスプレイや解像度が変わっても、それに合わせてサイトが自動で調節してくれるような、コード(例えばjavascript)のようなコード記述ってあるのでしょうか?
画像解像度やディスプレイサイズが変わっても、サイトのデザインを崩したくないです。
もしあれば、教えていただきたいと思っています。
よろしくお願いします。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
そもそもHTMLは
【引用】____________ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
なのですよ。一切スタイルシートを除けば、どのブラウザにも無関係に画面いっぱいに表示されるはずです。携帯電話のような240px幅でも、1900pxを超える幅広ディスプレイでも。もちろん点字端末でも、スクリーンリーダー(読み上げソフト)でも。
そもそも「画像解像度やディスプレイサイズが変わっても、サイトのデザインを崩したくない」のでしたら、その目的の画像やPDFがあります。
HTMLの目的は、ディスプレイのみならず、様々なユーザー--もちろん検索エンジンも含む---に対して、情報を伝えるためのもので、デザインを伝えるものではありません。
幅の狭いディスプレイには、横並びして表示されていたものを縦に並ばせて表示させたり、あるいは一部のデータを表示させなくするなどします。
また幅広ディスプレイには中央に1000px程度の幅で表示させるとか、視覚弱者がフォントサイズを大きくしたり、色をハイコントラスト--白黒ニ値--で表示させることもできます。
私は、基本的に「CSSのレイアウトについて - Webデザイン・CSS - 教えて!goo ( http://oshiete.goo.ne.jp/qa/7847891.html#a2 )」で示したサンプルのように、640-900pxで中央表示としてscreen端末全般に対応させ、それ以下のscreen端末(スマホ縦)などはまったく余談(aside)は表示させないなど別のデザインにして、携帯電話などには素の状態で、印刷時にはA4に印刷できるように指定します。
「画像解像度やディスプレイサイズが変わっても、サイトのデザインを崩したくないです。」
ではなくて、
「画像解像度やディスプレイサイズが変わったら、デザインを変えて情報が利用しやすい」ように考えるほうが良いです。そのためのHTML+CSSなのですから。
もし前者のデザインを優先されるのでしたらHTMLはよい方法ではありません。
#wrapper,#header,#content,#footerのようなHTMLのマークアップ、CSSの使い方は良くないです。
・idはclass名は文書構造を補完するためのものです。
「id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
・#(一意セレクタ)は詳細度が高く一箇所しか指定できませんから、CSSが冗長化します。
HTML5を読めばわかるように、.header、.section、.footer、.articleなどです。
※「CSSのレイアウトについて - Webデザイン・CSS - 教えて!goo ( http://oshiete.goo.ne.jp/qa/7847891.html#a2 )」で示したサンプルのスタイルシートに
html,body{margin:0;padding:0;}
div.header,div.nav,div.section,div.footer{
width:100%;max-width:1330px;min-width:640px;
}
を最後に追加すれば、とりあえずは期待通りになるはずです。
最大1330px最小640px
それ以上だと、中央に1330px
それ以下だと、横スクロール
色々アドバイスありがとうございます。
そのようにマークアップしてみます。
今後の参考にさせていただきたいと思いますので、
また何かの機会にアドバイスをよろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- フリーソフト 倍率自動調整して全画面表示できるフリーの画像ビューアー 1 2023/08/24 10:55
- Visual Basic(VBA) 【VBA】写真の貼り付けコードがうまく機能しません。 5 2022/09/01 18:43
- モニター・ディスプレイ ワイドモニターの解像度が合わずMacの画面が横に伸ばされて表示されてしまう 2 2022/08/09 07:53
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- モニター・ディスプレイ NVIDIA Geforce GT 710の解像度設定について教えて下さい 3 2022/06/19 13:00
- モニター・ディスプレイ PCのマルチディスプレイで複製はできますが拡張ができません 1 2023/08/09 01:29
- Windows 10 VirtualBoxで起動できないゲームがあります 2 2022/12/17 06:13
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リンクの下線は消すのが普通?
-
カラム落ちの何が悪いのか
-
ホームページを作っているので...
-
HPビルダーのフレームページ...
-
スマホ横幅が720px だけ 横が...
-
ホームページ、iPadやiPhoneで...
-
Excelで、社外秘(閲覧のみ)と...
-
HTMLからフォルダを開きたい
-
ホームページでファイルをダウ...
-
htmlファイルの表示が真っ白
-
フレーム内のPHPへPOSTで情報を...
-
htmlの中にexcelが埋め込むには...
-
Dreamweaverでページ全体が文字...
-
googleドライブで、PDFファイル...
-
Webサイトから、txtファイルを...
-
HTMLで別PCのフォルダを開く
-
iPadの標準ブラウザでローカルH...
-
html リンクを別フレームに表...
-
医療画像(Windows用)をMacで...
-
form action="#"
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ホームページを作っているので...
-
ホームページ、iPadやiPhoneで...
-
スマホでPCサイト見たらスマホ...
-
ブラウザ切り替え
-
スマホだけメニューが開く設定...
-
ガラケーサイトの一般的な画面...
-
ホームページ制作、SPサイトの...
-
Safariで、ボタンが丸くなるの...
-
リンクの下線は消すのが普通?
-
趣味でhtmlを勉強するのに適し...
-
平均的なウィンドウサイズとは?
-
画面は固定と可変のどちらがい...
-
スマートフォン制作の画像サイ...
-
HPビルダーのフレームページ...
-
レスポンシブ 横1080px高解像度...
-
PC・ガラケー・スマホの振り分け
-
厳しいご意見を下さい!
-
(Webデザイン)ボタンのレイアウ...
-
PCとスマホで列の数を使い分け...
-
WEB閲覧中のPCの解像度を...
おすすめ情報