ローカルとWeb上で見え方が違うのですが…。

質問

こんにちは。

Webサイトを製作しているものです。今朝下記のような質問をしてしまったものです。

// 以下、引用-----------------------

題名：CSSが間違ってデザイン崩れ困っています

こんにちは。

http://okwave.jp/qa/q7315867.html で質問したものです。お世話になりました。

回答者のみなさんのアドバイスを参考に頑張っていたのですが、どうしてもデザインが崩れてしまいます。あげく、IE系(それを利用するSleipnir)以外はキチンとコンテナの外枠が表示されたのですが、IE系(それを利用するSleipnir)は100％で線が止まり、何とこれ100%以上、下に行けなくなりました。ただし中のコンテンツが何故か<object>化されたみたいになりスクロールが出来るようになったので、コンテンツは見ることが出来ます。

よく考えてみたのですが、私がfloatをする理由は無いように思われました。5～6年前に興味本位でfloatを利用しただけで、上記質問 http://okwave.jp/qa/q7315867.html のORUKA1951さんの仰る、
>> 例えば絶対配置による方法では、HTMLを記述する上で内容の配置順序が自由になることが回り込ませるボックスを先に記述する必要がある回り込みによる方法よりも優れている

ということは何も考えずに適当にfloatを利用していたのです。ですのでfloatを利用しない方法で移行に行こう(苦笑)と考え始めています。

ですが、肝心のhtmlファイルの中身が、

・3ペインの右側
・3ペインの真ん中
・3ペインの左側

と言う順序で書かれています。これを、

・3ペインの左側
・3ペインの真ん中
・3ペインの右側

と言う風にhtmlを巧く書き換えるフリーウェアがあるのかどうかというのを困っています。htmlファイルは確かに500ページ程と多いのですが、良いことに全て同じ構造(3ペインの順番等)になっています。私は『grep』というのでしょうか、その様なUNIXの知識は全くないので、フリーウェアを利用するしかないと考えています。ですが、どのフリーウェアを利用したらいいのかが『窓の杜』、『vector』を見ても分かりませんでした。

ここのカテゴリではもしかしたらカテゴリ違いかもしれませんが、この悩みの解決法、ご教示願えないでしょうか？

教えて君になっていることは重々承知しておりますが、昨日一日これで悩んで全く解決致しませんでした。

何卒よろしくお願い申し上げます。

失礼致します。

// 以上、引用-----------------------

1つのファイルを上記のようにやって、floatを消してみたんですが段落ち(と言うのでしょうか！？)をしてしまいました(当然？)。上記、多分バカな質問だったと思います。
-----------------------
質問1： floatなしで要素を横に揃えることなんて無理ですよね？
-----------------------
現状、ローカルではファイルが色々と重すぎるのかIEでは表示されません。それでSleipnir3でローカルとWeb上で確かめたのですが、ローカルではキチンと要素の上下左右が線で囲まれているのですが、Web上のは上記の質問内の状態になっています。IEも同様にダメです。Firefox、Safari、Chrome、Operaでは実現できています。

-----------------------
質問2： なぜ同じブラウザ(Sleipnir)でWeb上とローカルとで見え方が違うことがあるのでしょうか？(ファイルはもちろん同じ内容です。)
-----------------------

以上、何かご意見がある方、よろしくお願いいたします。

失礼致します。

回答No.6

DrFell · ベストアンサー

＞ページによっては左側、または右側の高さが一番高くなることがあるのですが、その場合の解決方法をご教示願えないでしょうか？
「高さを揃える　css」で検索してみてください。私が先に挙げたカラムレイアウトの手法つまり、
float
position
table-cell
のすべてで左右のみならず、３コラムになってどのコラムが高くなっても高さを揃えたり、そろえているように見せることが出来ます。table-cellが一番簡単ですがね。

お礼

DrFellさん、

改めましてご回答ありがとうございます。現在もCSS切り替えで乗り切っている次第です。本当に時間が空きましたら改めて最初からやっていきたいと思います。

その時はお書き下さったアドバイスも参考にさせて頂きます。

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

補足

DrFellさん、

ご回答ありがとうございます。緊急避難としてIEとそれ以外でCSSを分けておきました。後ほど時間が空きましたら検索してやってみようとおもいます。

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

回答No.5

ORUKA1951

＞ページによっては左側、または右側の高さが一番高くなることがあるのですが、その場合の解決方法をご教示願えないでしょうか？

body>div.section{position:relative;}/* このdivの子孫要素の位置基準とするため */

div.section{background-color:silver;min-height:400px;}
　　　　　　　　　　　　　　　　　　　　^^^^^^^^^^^^^^^^^
1) この最小高さを主文以外の高さの最大予想値よりも大きくしておく。
2) footerの巾を小さくして差し支えないようにする。
3) 常にもっとも長くなるものを基準にし、それ以外をabsoluteさせる。

　こんなところかな・・・・
positionの長所は、
★デザインのためにHTMLの構造が制約を受けない===＞本来の文書構造を保てる
★デザインの制約が少ない
と言うことでしょう。

　なお、ウィンドウ巾の制約も受けませんから、様々な解像度(ウィンドウ巾)でも確認してください。

お礼

ORUKA1951さん、

改めましてご回答ありがとうございました。一向に進まないので現在はCSSの切り替えで乗り切っております。後ろ向きの姿勢はいけないですが、しょうがありません。

大変お世話になりました。

またお世話になるかもしれませんが、その時はよろしくお願い致します。

補足

ORUKA1951さん、

ご回答ありがとうございます。
緊急対策として、IEとそれ以外でCSSを分けてやりました。時間が空きましたらやらせていただきます。

回答No.4

tracer

質問の趣旨とずれているかもしれませんが、段組(横並び)の方法として、positionとfloatで悩まれているのであれば、floatをおすすめします。段組の実装方法として、positionは汎用性が高いですが、初心者の方からすれば、実装の難易度はfloatよりもpositionの方が高いです。また、floatでしっかり組んであれば、ほとんどの場合、困ることはありません。floatで組みきれなかったといって、positionに逃げるのは、ちょっと違う気がします。

質問2は解決されているようなので、質問1だけにお答えします。数あるブラウザの中でもIEだけは特殊です。特殊というより間違った解釈をします。ご質問の内容も、IE(sleipnir)だけおかしいということなので、floatやpositionの前に、IEの挙動を理解することが解決策といえます。とはいえ、それほど難しいことはありません。たとえば以下のようなサイトの情報に目を通すだけでも十分ですよ。

http://css-bug.jp/win/ie/

お礼

tracerさん、

ご回答ありがとうございます。floatがオススメなのですね。ご意見、考えてみます。

ご提示のサイト、見てみました。こんなにあるのですね。大変参考になりました。

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

回答No.3

DrFell

htmlを最初の段階できちっとしていればｃｓｓで表示場所を変えることは、できます。htmlをいじらなくても、cssで表現を変えるだけです。そのあたりhtml+cssの基本概念を理解してください。

５年以上前のサイトを紹介します。
http://blog.html.it/layoutgala/index.html
下の方に薄紫色の、htmlがあります。そのhtmlはその１つのみで変化しません。そしてcssをいじるだけで、40ほどのパターンのカラムレイアウトの紹介を上でされてます。htmlは変えなくても柔軟にレイアウトが変化することが可能であること、文章構造と見た目は分離して管理することを理解し、柔軟に対応できるhtmlを最初に組むことは大切であることもご理解ください。

今は当時よりさらに、プロパティが充実してきています。より簡単に多彩な表現が可能になっています。
「
・3ペインの右側
・3ペインの真ん中
・3ペインの左側

と言う順序で書かれています。これを、

・3ペインの左側
・3ペインの真ん中
・3ペインの右側
」
htmlを変えなくても、単純にcss でfloat:leftをfloat:rightじゃダメなの？と思ってしまいます。
横並びにさせるには、floatの他に、positionを使ったり、displayで表の様に扱うプロパティがよく使われます。floatを嫌いな人がいるように、positionはもたつきだすから嫌いって言う人もいますし、想定外になった場合、文字が重なるので嫌う人もいます。displayは対応ブラウザが新しいものに限るからちょっと……という人も。どれを選ぶかはもう少しいろいろと経験してからでもいい気がします。floatは横方向には柔軟ですが、縦方向には無力です。（後ろに書いたものを右や左に持ってくることはできるが、後述のものを前述のものより上に表示することはfloat1ではできない。）

おっしゃっている症状下にいけない？はfloatが問題ではないです。他に問題があります。レンタルのスペースをつかっておられて、そこにアップすると自動で入る広告などの表現方法と、ローカルで作っておられる表現がぶつかってしまっている気がします。

position等を使ってレンタルスペース会社がサービス名や広告を固定配置させる時によくおきる症状に似ていますが、ソースがなければ憶測の域を超えません。どういうものを挿入されるのか知ってご自分のcssを組まないと作り直してもまた、崩れる可能性は大いにあります。自分の用意したhtmlとダウンロードしたhtmlでは変化があるはずです。比べてみてください。

そして、そのことは規約などで、了承しているからこそ、使える筈なのですが把握されていないのはまずいです。大切なことを読まずに承諾・契約されたのでしょうか？

横道、長文になってきましたので、この辺で

お礼

DrFellさん、

ご回答ありがとうございます。ご紹介のサイト見ました。すごいと単純に思いました。

>>柔軟に対応できるhtmlを最初に組むことは大切であることもご理解ください。
痛み入ります。

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

回答No.2

ORUKA1951

前の質問の続きということで・・・
絶対配置にすると、記述の順番に依存しないのですから、ひっくり返せば、
・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>

補足

ORUKA1951さん、

ご回答ありがとうございます。floatなしでも出来るのですね。

今、サンプルをやっているのですが、ページによっては左側、または右側の高さが一番高くなることがあるのですが、その場合の解決方法をご教示願えないでしょうか？

回答No.1

kmee

> 質問2： なぜ同じブラウザ(Sleipnir)でWeb上とローカルとで見え方が違うことがあるのでしょうか？(ファイルはもちろん同じ内容です。)

Sleipnirに限定するなら
・ローカルでチェックしたときとWebでチェックしたときとで、レンダリングエンジンが違う
(途中で変えたとか、サイト毎の設定があるとか)
というのがありそうです。

御存じかもしれませんが、ブラウザ毎に見えかたが違うのは、最終的な「絵」を作る部分(レンダリングエンジン)が違うからです。
Sleipnirは、IEと同じエンジンと、Firefoxと同じエンジンを使っていて、切り替えできます。
IEのエンジンを使った時はIEと同じ表示になり、FIrefoxのエンジンを使えばFirefoxと同じ表示になります。

IEでは期待通りではなく、Firefox等では期待通り、だとすると、Sleipnirの設定がWebではIE,ローカルではFirefoxのエンジンを使ったのでないか、という予測ができます。

お礼

kmeeさん、

ご回答ありがとうございます。Sleipnirがエンジンを替えることが出来るとは知っていたのですが、
>>WebではIE,ローカルではFirefoxのエンジン

というのは知りませんでした。不勉強、申し訳ございません。

ググって発見してこようと思います。

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