HTML＋フレーム構成のページを、HTML+CSSで書き換えるには？

質問

HTML＋フレーム構成のページを、HTML+CSSで書き換えるには？
コンテンツはそのままに、HTML＋フレーム構成のページを、HTML+CSSで書き換えることになりました。

ヘッダー、フッター、上部に画像ロゴ、左にメニューを配置したいと思ってます。
メインコンテンツ部分以外はSSIでインクルードしたいと思っています。

案外簡単だと思ったのですが・・・すぐ配置が崩れて悩んでます。
さらに、CromeとIEで確認をするたびに配置が違ってしまいます。
merginとpadsdingを0にしてから始めるらしいことまでは調べたのですが、
そうするととても配置が変で面倒になります。

現在はFFFTPと秀丸とブラウザで作業してます。

ほかに、PhotoShop6とホームページビルダー14とMicrosoftExpressionweb3は手元にライセンスがあります。

HTMLは分かりますが、CSSは初めてです。多少がんばれば、javaScriptも使えるかもしれません。

お薦めの本や、作り方、フリーウェアなどありましたらご指導ください。よろしくお願いいたします。

回答No.2

nori_007 · ベストアンサー

CSS に関して、リセットに関して調べて見てください。
以下のサイトが参考になると思います。

http://ps60.blog109.fc2.com/blog-entry-31.html

他にも色々調べて見てください。

お礼

ありがとうございます。
@importを使った例が気になります。試してみます。

回答No.5

vancunt

フレーム構成のページを1枚のHTMLのページにしたいというこでよろしいでしょうか？
HTML＋フレーム構成のページにもCSSは利用されていると思うのですがどうでしょう。

で、あればテーブルで組んでしまうのはダメでしょうか？
配置をテーブルで組んでしまえば、フレームで作られたそれぞれのページのCSS適応箇所をうまく統合してあげるところができれば、うまくいくと思います。

全てをCSSのみでやるのは、かなりヘビーかと。

お礼

なるほどですね。テーブルを組むことも考えてみます。ありがとうございます。

回答No.4

ORUKA1951

＞CSS本を数冊買ったのですが、デザイン中心なので、選んだデザインに関する説明は少しなんですよね。
　初期のHTMLマニュアル本と同じで、仕様書を読んでいるのか疑問のマニュアル本がたくさんあります。
　仕様書を読んで、理解して書かれているか否かはちょっと読めばわかる。

　まあ、詳細度とか、子孫セレクタや隣接セレクタ、擬似クラスとか、親コンテナブロックとか・・きちんと説明してあるものを購入すること。
　やたらめったら
.contents{}
#menue{{
　のようにクラスセレクタや一意セレクタだけで、プロパティを記述しているのも駄目!!

たとえば本文(div class="body">内のliと他の場所のliでも、
.body ul li
.body ol li
.body ul li ul li
と、
いちいちliに<li class="red">なんて書かなくても特定できる。

お礼

＞子孫セレクタや隣接セレクタ、擬似クラスとか、親コンテナブロック

・・・なんのことやらわかりません。（汗）

買ったのは「MdNムック」ばかりでした。みていて楽しいのですが。
例が単体ではきちんと動くのに、手を入れるとあっという間に崩れていくので・・・悩んでました。

アドバイスをふまえて、Amazonで「現場のプロから学ぶXHTML+CSS」を注文しました。_(__)_

回答No.3

ORUKA1951

＞margin-left:15%;
＞　　margin-right:auto;
＞　　width:75%;
という指定が気になりました。
　max-width:900px;も追加すると、幅広画面で必要以上に広がらないかも

説明だけ
　absoluteやfixを指定するとき、その親コンテナブロックがstatic以外だと、その親コンテナブロックに対して配置されるから。

＞CSSの表現の仕方って難しいのですね・・。
　HTMLよりは略してないので、英語の勉強になるので楽しんでください。
　bgcolor よりは、background-color のほうがわかりやすい。
　とにかく、メンテナンスのためにも(しいてはSEOのためにも)HTMLが、文書構造に率直に書けるので、慣れればこれほど楽なものはない。

お礼

max-width:900px;

この表現知りませんでした。
CSS本を数冊買ったのですが、デザイン中心なので、選んだデザインに関する説明は少しなんですよね。
Webで調べながら読んでましたが・・。

この私の仕事が終わると、Webサイトのメンテナンスはされる予定がないので、なるべく分かりやすく作ろうと思ってます。

ありがとうございます。

回答No.1

ORUKA1951

＞ヘッダー、フッター、上部に画像ロゴ、左にメニューを配置したいと思ってます。
　標準的なサイトデザインだと思います。あまり奇抜なものにすると利用者が困る。

まず大事なことは適切なマークアップです。たとえば
<div id="header">
　<h1></h1>
</div>
<div class="body">
　<div id="nav">
　　<ol>
　　</ol>
　</div>
　<h2></h2>
　<p></p>
</div>
<div id="info">
</div>
だとすると、
html.body{margin:0px;padding:0px;}/* 私は使わないですが */
div.body{
　　position:relative;
　　margin-left:15%;
　　margin-right:auto;
　　width:75%;
}
div.Text div#nav{
　　position: fixed;
　　left: 0%;
　　width: 15%;
　　border: solid 1px red;
}
div.Text div#nav ol{}
div.Text div#nav ol li{}

あたりを基本にしています。
　デザインのためのidやclassを使わず、詳細度だけでセレクトしていくほうが後々楽ですね。

お礼

margin-left:15%;
　　margin-right:auto;
　　width:75%;
という指定が気になりました。早速試してみようと思います。
ありがとうございます。

CSSの表現の仕方って難しいのですね・・。