質問: ローカルとweb上で見え方が違うのですが...。 こんにちは。 webサイトを製作しているものです。今朝下記のような質問をしてしまったものです。 // 以下、引用----------------------- 題名:cssが間違ってデザイン崩れ困っています こんにちは。 http://oshiete.goo.ne.jp/qa/7315867.html で質問したものです。お世話になりました。 回答者のみなさんのアドバイスを参考に頑張っていたのですが、どうしてもデザインが崩れてしまいます。あげく、ie系(それを利用するsleipnir)以外はキチンとコンテナの外枠が表示されたのですが、ie系(それを利用するsleipnir)は100%で線が止まり、何とこれ100%以上、下に行けなくなりました。ただし中のコンテンツが何故か化されたみたいになりスクロールが出来るようになったので、コンテンツは見ることが出来ます。 よく考えてみたのですが、私がfloatをする理由は無いように思われました。5~6年前に興味本位でfloatを利用しただけで、上記質問 http://oshiete.goo.ne.jp/qa/7315867.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上とローカルとで見え方が違うことがあるのでしょうか?(ファイルはもちろん同じ内容です。) ----------------------- 以上、何かご意見がある方、よろしくお願いいたします。 失礼致します。
回答: htmlを最初の段階できちっとしていればcssで表示場所を変えることは、できます。htmlをいじらなくても、cssで表現を変えるだけです。そのあたりhtml+cssの基本概念を理解してください。 5年以上前のサイトを紹介します。 http://blog.html.it/layoutgala/index.html 下の方に薄紫色の、htmlがあります。そのhtmlはその1つのみで変化しません。そして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では変化があるはずです。比べてみてください。 そして、そのことは規約などで、了承しているからこそ、使える筈なのですが把握されていないのはまずいです。大切なことを読まずに承諾・契約されたのでしょうか? 横道、長文になってきましたので、この辺で