ブラウザーの大きさに合わせる方法。

Question

今日は。実は、ホームページなのですが「どんな大きさに合わせることの出来る方法」が
有るとの事と聞きました。調べるとCOLISという所など色々出てはきますが、何処に書いて
いいものかが分かりません。
SAMPLEが付いていますが見てその通りしても上手くいきません。
何か一緒に保存しておかないといけないファイルとかあるのでしょうか。
お教え頂ければ幸いです。宜しくお願い致します。
＜見た参考ページ＞
http://coliss.com/articles/build-websites/operation/css/css-full-page-background-image.html

ORUKA1951 · Accepted Answer

というか、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 )］よりが、最大の目的なのですから、発想が逆ですよ。　前後しますが「【相互運用性確保の】努力が成されなければ、Webは互換性のないフォーマット毎に分け隔てられた世界に分割され、すべての関係者にとっての商業的可能性が減少することとなるであろう、大きなリスクを負うこととなる。」　参考に示されたページは色々な意味であまり参考にはならないと思います。 1) class名が文書構造を示すものではない。　『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』　　⇒More on developing naming conventions, Microformats and HTML5 — Stuff & Nonsense, And All That Malarkey( http://stuffandnonsense.co.uk/blog/about/more_on_developing_naming_conventions_microformats_and_html5/ ) 　　⇒Preparing for HTML5 with Semantic Class Names — Jon Tan 陳( http://v1.jontangerine.com/log/2008/03/preparing-for-html5-with-semantic-class-names ) 　の下の方に具体的なclass名のつけ方があります。(もちろんまもなく勧告されるHTML5を念頭においてあります) 2) デザインのためにHTMLを書くこと自体間違い。　初学者でしたら、まず仕様書に目を通すとか、ちゃんとしたサイトで学ばれたほうが無駄になりませんし、上達が早い。 ※ごく簡単なな例です。 ★スマホから、超幅広ディスプレイ対応 ★印刷にも・・(印刷プレビューで確認) ★スクリーンリーダーや点字端末も HTML4.01strict と HTML5の二つを上げておきます。HTML5は次回 ※タブは＿に置換してあるので戻す。 ※背景画像8./images/A.jpg)は別途用意する。 ※文字コードはいずれもUTF-8 ※Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html ) 　W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input ) 　で検証済み＿＿サンプル＿＿＿＿＿＿＿＿

＿＿

見出し

＿＿

＿＿＿今日は。実は、ホームページなのですが「どんな大きさに合わせることの出来る方法」が有るとの事と聞きました。調べるとCOLISという所など色々出てはきますが、何処に書いていいものかが分かりません。＿＿

＿＿

＿＿＿SAMPLEが付いていますが見てその通りしても上手くいきません。＿＿

＿＿

＿＿＿・・・・・・【中略】・・・ここに沢山、段落を追加してみてください。＿＿

＿＿

＿＿＿何か一緒に保存しておかないといけないファイルとかあるのでしょうか。＿＿

＿

＿＿

最新のブラウザだとbackground-sizeが楽

＿＿

＿＿＿初学者でしたら、まず仕様書に目を通すとか、ちゃんとしたサイトで学ばれたほうが無駄になりませんし、上達が早い。＿＿

＿

taloo · Answer

解説サンプルやフレームワーク（デザインテンプレート）を使うには、
HTMLやCSSの基礎知識が必須です。

http://www.htmq.com/
http://www.tohoho-web.com/www.htm

もっと基礎から順を追って勉強しないと、何も出来ないですよ。

四角形の面積を求めるのだって、足し算や掛け算という基礎知識が無いと、
高さ×幅などと言われても掛け算の計算方法がわからない人には解けませんから。それと同じです。

nanden1548 · Answer

レスポンシブレイアウト（グリッドレイアウトも含む）の方法ですね、グリッドレイアウトの場合は、表示幅を、１２００ｐｘとか９６０pxに合わせ１２分割+マージンを設定したものとか、16分割＋マージンを設定したものが多いようです。

結局は、MediaQueryの応用にすぎません！
px単位で設定するか、%で設定するかの違い程度の差です。

有名なものには、Bootstrap、Foundation、Skeiton、Yaml4、Titanといったフレームワークがあります。
好みのものを使用されてはいかがでしょうか？・・・・・

kiyomac#1 · Answer

可変グリットレイアウトの事ですね。
http://design-spice.com/2011/08/31/web-layout7/#tpx7

CSSを記載してスマフォ画面サイズからPC画面サイズまで表示する事を
解説しているサイトも有ります。

参考
http://r360studio.com/dgcr/dgcr-extra22/test3.html

作成する場合はCSSファイルを合わせてDLします。

ORUKA1951 · Answer

先ほどの回答--文字コード指定をShift_JISにしてました。Shift_JISで HTML5の場合・・・こちらはUTF-8です。＿＿サンプル＿＿＿＿

＿＿

タイトル

＿＿

このページでは・・・・

＿

＿＿

見出し

＿＿

＿＿＿今日は。実は、ホームページなのですが「どんな大きさに合わせることの出来る方法」が有るとの事と聞きました。調べるとCOLISという所など色々出てはきますが、何処に書いていいものかが分かりません。＿＿

＿＿

＿＿＿SAMPLEが付いていますが見てその通りしても上手くいきません。＿＿

＿＿

＿＿＿・・・・・・【中略】・・・ここに沢山、段落を追加してみてください。＿＿

＿

＿＿

ブラウザーの大きさに合わせる方法。

というか、HTMLは元々

解説サンプルやフレームワーク（デザインテンプレート）を使うには、

可変グリットレイアウトの事ですね。

先ほどの回答--文字コード指定をShift_JISにしてました。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング