- ベストアンサー
ローカルとWeb上で見え方が違うのですが
ORUKA1951の回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
前の質問の続きということで・・・ 絶対配置にすると、記述の順番に依存しないのですから、ひっくり返せば、 ・3ペインの右側 ・3ペインの真ん中 ・3ペインの左側 であろうと ・3ペインの左側 ・3ペインの真ん中 ・3ペインの右側 であろうと、まったく関係ないことになります。 たとえば、 <body> ＿<div class="header"> ＿＿<h1>見出し</h1> ＿</div> ＿<div class="section"> ＿＿<div class="news"><!-- float時代の左--> ＿＿＿<h2>新着情報</h2> ＿＿＿<p>記事</p> ＿＿</div> ＿＿<div class="section"><!-- float時代の中央 --> ＿＿＿<h2>本文見出し</h2> ＿＿＿<p>記事</p> ＿＿</div> ＿＿<div class="tableContent"><!-- float時代の右 --> ＿＿＿<h3>新着情報</h3> ＿＿＿<ol> ＿＿＿＿<li><a href="#top">ページトップへ</a></li> ＿＿＿＿<li><a href="#section1">１章</a></li> ＿＿＿＿<li><a href="#section2">２章</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿</div> </body> (注)タブは＿に置換してあります。 だったとしますが、position:absoluteだと、<div class="section">内のサブブロックがどのような順番で並んでいても、デザインは変化しません。 ★これが、文書構造が正しければどのようにも配置できる。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ★デザインのために文書構造を変える必要がないという意味です。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ★大事なことはHTMLが文書構造にしたがってきちんとかかれているかだけです。これさえできていれば、どのようにもデザインできます。 全体をborderで囲むときは<div class="article">ででも囲んでください。 下記CSSを一宣言ごとに記述して、表示の変化を確認してください。 HTMLは、 「ＨＴＭＬで並べるテーブルに関して - HTML - 教えて！goo ( http://okwave.jp/qa/q7318537.html#a3 )」と同じです。 <!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 name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;}/* おまじないを書いておきます */ body{background-color:gray;}/* わかりやすくするため背景に色を付けておきます。 */ h1,h2,h3,h4{margin:0;line-height:1.4em;}/* 見出しのmarginがはみ出すのを防ぐ */ /* これは、下のborderを消してみると効果がわかる */ div{border:solid 1px red;margin:0;}/* わかりやすくするためすべてのdivに枠線を引きます。 */ /* 同様にわかりやすくするため、それぞれのブロックに背景色を付けておきます。 */ div.header{background-color:aqua;min-height:100px;} div.section{background-color:silver;min-height:400px;} div.section div.section{background-color:white;min-height:0;} div.section div.tableContent{background-color:green;} div.footer{background-color:lime;min-height:100px;} /* ここまで、わかりやすくするため色・枠づけ・高さ--これをしておくとわかりやすいです。 */ /* ただし、borderのサイズだけそのブロックの外周サイズが大きくなっています */ /* 全体のサイズを決めます */ div.header,div.section,div.footer{ width:80%;min-width:640px;max-width:900px; margin:0 auto;/* ウィンドウの中央に */ } body>div.section{position:relative;}/* このdivの子孫要素の位置基準とするため */ div.section div.section{ min-width:0; /* 上での指定を消しておく */ width:auto; margin:0 20%;/* 左右に余白を開ける */ } div.section div.news, div.section div.tableContent{ position:absolute; /* 絶対配置を指定します。 */ height:100%; /* 高さは親要素の高さを参照します。(親がrelativeなので */ width:19%; top:0;/* 親要素の一番上 */ } div.section div.news{ right:0;/* 親要素の右 */ } div.section div.tableContent{ left:0;/* 親要素の左 上と入れ替えれば逆になる */ } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>見出し</h1> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="./">Top</a></li> ＿＿＿＿<li><a href="./book">Books</a></li> ＿＿＿＿<li><a href="./profile">Profile</a></li> ＿＿＿＿<li><a href="./contact">Contact</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<div class="news"><!-- float時代の左--> ＿＿＿<h2>新着情報</h2> ＿＿＿<p>記事</p> ＿＿</div> ＿＿<div class="section"><!-- float時代の中央 --> ＿＿＿<h2>本文見出し</h2> ＿＿＿<p>記事</p> ＿＿＿<h2>本文見出し</h2> ＿＿＿<p>記事</p> ＿＿＿<h2>本文見出し</h2> ＿＿＿<p>記事</p> ＿＿＿<h2>本文見出し</h2> ＿＿＿<p>記事</p> ＿＿</div> ＿＿<div class="tableContent"><!-- float時代の右 --> ＿＿＿<h3>新着情報</h3> ＿＿＿<ol> ＿＿＿＿<li><a href="#top">ページトップへ</a></li> ＿＿＿＿<li><a href="#section1">１章</a></li> ＿＿＿＿<li><a href="#section2">２章</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿</div> </body> </html>
関連するQ&A
- webサイトにある“QuickTimeMovie”をローカルに保存するには
webサイトにある“QuickTimeMovie”をIE5でローカルにファイルとして保存するのには、どうしたら良いのでしょうか？わかる方、よろしくお願いします。
- ベストアンサー
- オフィス系ソフト
- Webページをローカルに保存したい
あるサイトのWebページをローカルに保存したいと思っています。 IEの「ファイル＞名前を付けて保存」で ひとまず保存はできましたが、保存したファイルを開いたら 実際のWebの画面とはフォントなどが異なっていました。 Webの画面のイメージ通りに保存するために 何か良い方法はありますか？ 実現するためのフリーソフトなどありましたら、教えてください。 よろしくお願いいたします。
- ベストアンサー
- その他（インターネット接続・通信）
- webブラウザからローカルファイルの読み込み
はじめまして、質問します。 webブラウザからローカルファイルの読み込みを行いたいのですが、 セキュリティーの問題でアクセスを拒否されました。 その回避法として、FileAPIによって htmlのinput要素かドラッグアンドドロップを用いて ローカルファイルを読み込めることが分かりました。 しかし、私がやりたいことは 絶対パスでローカルファイルを読み込むことです。 そのようなことは可能でしょうか？ 上記の方法だとinputからフォルダをたどってファイルを選択するので 原理的には可能なような気がするのですが・・・・ 言語はjavascriptです。 よろしくお願いします。
- ベストアンサー
- JavaScript
- ショートカットからWebページが開けなくなりました
使用中のブラウザは「Sleipnir」です。 アドレスバーの左端にあるアイコンのショートカットからWebページを開いて利用していました。 昨日スパイウェアの削除を実行したところ、それまでできていたのにできなくなりました。 「ファイルを開くプログラムの選択」のウィンドウが開くので、「Sleipnir」を指定すると「…（ショートカットのパス）…は有効なwin32アプリケーションではありません」と表示されます。 ｛IE」を指定すると「IE」では開くことができるようになりましたが、メインのブラウザを「Sleipnir」に指定しなおしてもこちらでは開けません。 とりあえず削除前の状態に戻しましたが、改善できませんでした。 解決策をご存知の方、宜しくご指導ください。
- ベストアンサー
- ブラウザ
- 「履歴」にローカルのファイルも表示されるのがイヤ
お世話になります。 これまで、Windows98+IE5.0の環境では、InternetExplorerの「履歴」に残るのは、InternetExplorerでアクセスしたWebサイトだったのですが、WindowsME+IE5.5環境にしてから、Explorerや一般のアプリケーションからアクセスしたローカルファイルまでも履歴に残るようになりました。 私は、履歴の「サイトを表示した回数順」「今日表示したページ順」などを重宝して利用していたので、ローカルファイルがここに入ってきて、一般のWebサイトの履歴をノックアウトしていくのが非常にいやなのです。 それだけならばまだいいのですが、ＦＤのローカルファイルも履歴に残るので、「履歴」を表示するたびにＦＤにアクセスしにいって、うるさい＆ハード的にもソフト的にもいらぬ負担がかかるため困っています。 どなたか、「履歴」にローカルファイルは残さない設定をご存じでしたらお教え下さい。
- ベストアンサー
- Windows Me
- IEで画像が一部表示されない（ローカルでhtmlファイルを見る時）
こんばんは。 Webサイトを作っているのですが、作ったページをローカルで見ようとすると画像が一部表示されず困っています。教えてgooでもよく「画像が表示されない」という質問があるのですが、今回はネットを接続している状態のことではなく、ローカルでの事で少し違うので新たに質問させていただきました。 状態は、 1.IEでだけ表示されない。（firefox、NNでは表示されます） 2.ほとんどの画像は表示されているのに、2つだけ表示されない 3.画像のアドレスなどは間違っていません（画像はdreamweaverで挿入し、ソースの確認もしました） 4.よく対処法として挙げられる、「ファイルの削除（全てのオフラインコンテンツを削除）」をやったのですが、その後該当のhtmlファイルを開くと1回目はきちんと表示され直ったと思ったものの、2回目からはまた出なくなりました。その後何回「ファイルの削除（全てのオフラインコンテンツを削除）」をやっても出ません。。 5.ちなみに、数日前に作った別のサイトはきちんと全部の画像が表示されます。 IEのキャッシュ関係が怪しいとは思っているのですが、一通り色々やってみても直らず困っています。 IEを一度アンインストールしてインストールしなおしたいのですが、コントロールパネルの「アプリケーションの追加と削除」でIEが無くてアンインストールできません。どうすればいいでしょうか？アドバイスお願いいたします。 また、もしこのまま直らなくても、そのサイトのファイル（htmlファイル+画像）をメールなどで添付して送った場合相手の方は問題なく見られるでしょうか？ 私のIEがおかしいだけでしたら、大丈夫だとは思うのですが・・・ OSはwindows XP、IEは6.0です。
- 締切済み
- Windows XP
- ウェブブラウザーの比較
ウェブブラウザーには、 Internet Explorer Firefox Safari Opera Sleipnir Chrome とイロイロな種類がありますよね そこで質問なんですが 僕はIEを利用しています。 そしてホームページを作成しています。 自分が作成したホームページを他のウェブブラウザーで 見たらどんな風になっているか知りたいです。 知りたいからと言って これらの種類を全部ダウンロードするのはチョット・・・ IEで見たらこんな感じ Firefoxで見たらこんな感じ Safariで見たらこんな感じ・・・ って判るようなツール的な物はありませんか？ (もしくは、そんなサービスをしているページとか) よろしくお願いします。
- ベストアンサー
- Windows系OS
- ウェブメールから保存したファイルはどこへ？
おはようございます。さっそく質問させて下さい！ yahooウェブメールからファイルをダウンロードし”開く”で表示させた後に保存をしました。保存されたファイルはどこに行ったのでしょうか？ 保存先を調べる為に何度か同じ事をして、どうやらローカルディスクＣ⇒DocumentandSetting⇒Local setting⇒temporary⇒contents内に保存している様なのですが、エクスプローラーでディスクＣ内を探しても見つける事ができません（>_<） 質問検索してみましたが、似た質問を見つける事ができず質問させて頂きました。どうか宜しくお願い致します。
- ベストアンサー
- その他（メールサービス・ソフト）
- 入れ子にしたfloatのclear
初めてこちらを利用させていただきます。 CSSで縦3段、例えば上から『HEADER』、『MAIN』、『FOOTER』などとの段組を作成し、中央の『MAIN』内に『MENU』と『CONTENTS』の左右2段の段組をfloat:leftを利用して作成し、テンプレートとして利用しようとしています。 このテンプレート部分は、『MENU』の幅のみ固定で、『CONTENTS』は可変幅のレイアウトとしております。ここまでは順調に作成できたのですが、肝心のコンテンツの作成でつまづきました。 『CONTENTS』内に、更にfloat:leftで左右にDIVを配置したブロックを複数作ろうとした場合、2つ目のブロックを配置した時、1つ目の右側DIVの高さが1つ目左側DIVよりも高さが低い場合、2つ目以降のブロックが1つ目左側のDIV右に回りこんで表示されてしまいます。これは1つ目のブロックを配置した後、float:leftをclearしていないから当然だと思います。 そこで、1つ目のブロックの後にclearを摘要（<br />などに）させると、テンプレートの、『FOOTER』直上に2つ目のブロックが配置されてしまいます。1つのclearで入れ子になったfloat:leftが全てclearされてしまう様です。 これが『仕様』と言われればそれまでですが、TABLEや、固定幅のfloat：right等を使用すれば回避できそうですが、TABLE脱却・リキッドレイアウトをここまで実現できたのに、肝心のところで妥協するのも悔しい気がします。 まさか、こんな単純な事で丸一日悩むとは思いませんでした。web上を検索して回ったのですが、良い解決策が見つからず、こちらにおすがりした次第です。文章ではうまく表現できずわかりにくいかもしれませんが、何か回避作があれば教えて下さい。
- ベストアンサー
- CSS
- ローカル画像を参照したい
単純に、<body>の中に <img src="file:///D:/test.jpg alt="" /> というタグがあります。 このHTMLファイルは、Cドライブ直下に配置しています。 勿論、test.jpgもDドライブ直下に配置しています。 IEだと、このローカル画像を表示することができましたが、 Firefoxでは表示することができません。 原因が分かる方、ご教示いただけますでしょうか？
- ベストアンサー
- HTML
補足
ORUKA1951さん、 ご回答ありがとうございます。floatなしでも出来るのですね。 今、サンプルをやっているのですが、ページによっては左側、または右側の高さが一番高くなることがあるのですが、その場合の解決方法をご教示願えないでしょうか？