- 締切済み
web 画面レイアウト
web 画面レイアウト http://www.monkey-works.com/ こちらのwebサイトのように、画面サイズに合わせたwebサイトの作り方(width)の指定の仕方を教えて下さい。 最近このような作りのサイトをよく見かけますので、気になってまして。 何卒、お願いします。
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞最近このような作りのサイトをよく見かけますので、 これは逆です。最近は、ホームページビルダーのようなソフトに頼る人が多くなったため、幅の狭いディスプレイや広いディスプレイに対応できないページを作る人が増えました。 日本最初のホームページ ( http://www.ibarakiken.gr.jp/www/ )をご覧になると、ウィンドウ幅は関係ないですね。 というのは、 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで2.2.1 HTMLの略歴 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )より が元もとの目的なのですからね。 Ｑ：なぜ、ウィンドウ幅に制約されるページが多いのか？ 一言で言うと ★HTMLを理解せずに、オーサリングツール--特に低俗なもの--を利用してページを作成するため でしょうね。下記にサンプル揚げておきます。 ↓このあたりからはじめれば、後で真実を知って全部書き直す心配はないかも はじめてのWebドキュメントづくり ( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ ) ★対策 1) きちんと正しいタグでマークアップすること(下記サンプルの<body></body>内参照 2) スタイルシートでデザインする。 ★サンプル HTML4.01Strict厳密型 ※タブを全角スペースで置換してあります。元のタブに戻してテストすること ※お約束で下記サイトでチェックしておきました。 Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input ) W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) <!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>サンプル</title> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="MADE" href="mailto:hoge@hoge.com"> <style type="text/css"> <!-- html,body{padding:0px;margin:0px;} body{ background-color: rgb(180,180,180);} h1{text-align:center;} div#top{ width:100%;background-color:blue;color:white; margin:0px;height:60px;border:solid 1px blue; } div#bodyText,div#info{ position:relative;width:60%;margin-left:auto; margin-right:auto;border: solid 1px red; background-color: white;padding: 2px 1em; } ul#nav,div.note{ font-size: 0.9em;position: absolute; top:0px;width: 22%;margin: 0px;height:100%; border: solid green 1px; } ul#nav{ display:block;padding:5px; right: 101%;border-color: blue; background-color: rgb(255,180,180); } ul#nav li{ padding:0px;margin:0px;display:block;list-style:none; } div.note{ padding:5px;left: 101%; background-color: rgb(180,180,255); } div.note h2{margin: 0.2em;font-size: 1.2em;} --> </style> <link rel="START" href="../index.html"> </head> <body> <div id="top"> <h1>見本</h1> </div> <div id="bodyText"> <h2>サンプル</h2> <p>ここから本文</p> <ul id="nav"> <li>目次1</li> <li>目次2</li> <li>目次3</li> </ul> <div class="note"> <h2>ノート</h2> <p>脚注</p> </div> </div> <div id="info"> <h2>文書情報</h2> <h3>更新履歴</h3> <dl id="document-version"> <dt id="first-published">First Published</dt> <dd>2010-01-28</dd> </dl> </div> </body></html>
