CSSのfloatを使用したHP作りについて教えて

質問

CSSのfloat（フロート）を使用したHP作りについて教えて下さい。

現在floatを使用してHPを作成していますが、リンクとフォルダ構成で悩んでいます。
floatを使用すると全ページにメニューを作成しリンクを貼ると思いますが、この場合絶対・相対どちらで貼るのが良いのでしょうか？

またフォルダ構成についてですが、昔のようにメニュー事にフォルダ分けをした場合、相対パスでリンクを貼るとメニュー部分のパスがページ毎に変わってしまったりします。
floatでHPを作る場合、HTMLを入れるフォルダはこのフォルダと決めて全てそこに入れるのでしょうか？

floatを使用したHPはメニューが一つ増えた場合でも全ページのメニューを作りなおさなくてはいけないと思いますが、みなさんどうやって管理しているのでしょうか？

参考になるページ等ありましたらそちらも教えて頂けると助かります。
よろしくお願いします。

回答No.3

ORUKA1951 · ベストアンサー

私は、管理がしやすいようにディレクトリ構成を行います。
/htdocs
　|-- index.html
　|-- object/
　|-- books/
　|　　|-- index.html
　|　　|-- images
　|-- products
　|　　|-- index.html
　|　　|-- images
　|　　|-- product2/
　|　　　　　|-- index.html
　|　　　　　|-- images
　|　　　　　|-- product2/

　各ページに記述するナビゲーションリストを絶対パスで記述すると
HTML5では
<nav>
　<h1>Navigation</h1>
　<ul>
　　<li><a href="/index.html">Top</a></li>
　　<li><a href="/books/index.html">books</a></li>
　　<li><a href="/product/index.html">product</a></li>
　</ul>
</nav>
HTML4,XHTML1とかなら
<div class="nav">
　<h1>Navigation</h1>
　<ul>
　　<li><a href="/index.html">Top</a></li>
　　<li><a href="/books/index.html">books</a></li>
　　<li><a href="/product/index.html">product</a></li>
　</ul>
</div>
になるでしょう。

　絶対パスで記述しておけば、将来の修正が楽です。
　この場合、変更があれば、下位フォルダーも検索置換できるテキストエディタで、

置換前
　<li><a href="/books/index.html">books</a></li>
置換後
　<li><a href="/books/index.html">books</a></li>
　<li><a href="/album/index.html">books</a></li>

として一括して変更できますね。相対パスだとできなくはないけど厄介です。

　絶対パスで記述すると、テストのためにサーバーにアップロードするか、ローカルにHTTPサーバーを作成しないとなりません。
　たとえば http://myPage/local.host/ とかでテストする。

お礼

お返事が遅くなり申し訳ありません。
詳しい説明ありがとうございます。

参考にさせていただきます。

回答No.2

naokita

#1さんのご指摘通り、floatは無関係です。
floatは表示上の枠組み・デザインの話で、
ナビメニューを単に横サイドバーなどに表示するCSSになります。
その他のページ構成には無関係です。

このサイト構成・ディレクトリマップですが、
ページが多くなければ、同じディレクトリに入れますが、
何項目にも分ける場合もあります。
全部個別にする必要は無いでしょう。

何か、Webオーサリングツールなどでサイト制作・管理すると、
相対パスでメニューを書き換える事も可能ですし、
Adobe Dreamweaverなどの置換ツールで全ページ一括で変更可能です。
また、
CMSなどは、元々ページを統一していますから一箇所で管理します。

フレームセットもメニューを一箇所で簡単に固定しますが、
古い手法なので避けた方が良いでしょう。

お礼

お返事が遅くなり申し訳ありません。

私は根本的にfloatがまだわかっていないようです。。。
floatを使っているページを色々みるとほぼ全てのページにメニューがあるようにみえるので、このような質問をしました。

HTMLのフレームみたいに常に右側にや上などにメニューを出すようなページを作成したいのですが、その場合どうすれば良いのでしょうか？

修正はオーサリングソフトを使用したいと思います。

回答No.1

notnot

＞floatを使用すると全ページにメニューを作成しリンクを貼ると思いますが、

根本的な勘違いがあるようです。
おそらく何か参考にしたいページがあって、そのページがfloatを使い、「全ページにメニューを作成しリンク」という構成だったのでしょうが、その２つには何も関係なく、たまたまそのページがそうであっただけです。

floatということは忘れて、「このサイトのような構成にしたい」という質問にした方が良いでしょうね。

お礼

お返事が遅くなり申し訳ありません。

私は根本的にfloatがまだわかっていないようです。。。
floatを使っているページを色々みるとほぼ全てのページにメニューがあるようにみえるので、このような質問をしました。

HTMLのフレームみたいに常に右側にや上などにメニューを出すようなページを作成したいのですが、その場合どうすれば良いのでしょうか？