
CSSのfloat(フロート)を使用したHP作りについて教えて下さい。
現在floatを使用してHPを作成していますが、リンクとフォルダ構成で悩んでいます。
floatを使用すると全ページにメニューを作成しリンクを貼ると思いますが、この場合絶対・相対どちらで貼るのが良いのでしょうか?
またフォルダ構成についてですが、昔のようにメニュー事にフォルダ分けをした場合、相対パスでリンクを貼るとメニュー部分のパスがページ毎に変わってしまったりします。
floatでHPを作る場合、HTMLを入れるフォルダはこのフォルダと決めて全てそこに入れるのでしょうか?
floatを使用したHPはメニューが一つ増えた場合でも全ページのメニューを作りなおさなくてはいけないと思いますが、みなさんどうやって管理しているのでしょうか?
参考になるページ等ありましたらそちらも教えて頂けると助かります。
よろしくお願いします。
No.3ベストアンサー
- 回答日時:
私は、管理がしやすいようにディレクトリ構成を行います。
/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
- 回答日時:
#1さんのご指摘通り、floatは無関係です。
floatは表示上の枠組み・デザインの話で、
ナビメニューを単に横サイドバーなどに表示するCSSになります。
その他のページ構成には無関係です。
このサイト構成・ディレクトリマップですが、
ページが多くなければ、同じディレクトリに入れますが、
何項目にも分ける場合もあります。
全部個別にする必要は無いでしょう。
何か、Webオーサリングツールなどでサイト制作・管理すると、
相対パスでメニューを書き換える事も可能ですし、
Adobe Dreamweaverなどの置換ツールで全ページ一括で変更可能です。
また、
CMSなどは、元々ページを統一していますから一箇所で管理します。
フレームセットもメニューを一箇所で簡単に固定しますが、
古い手法なので避けた方が良いでしょう。
お返事が遅くなり申し訳ありません。
私は根本的にfloatがまだわかっていないようです。。。
floatを使っているページを色々みるとほぼ全てのページにメニューがあるようにみえるので、このような質問をしました。
HTMLのフレームみたいに常に右側にや上などにメニューを出すようなページを作成したいのですが、その場合どうすれば良いのでしょうか?
修正はオーサリングソフトを使用したいと思います。
No.1
- 回答日時:
>floatを使用すると全ページにメニューを作成しリンクを貼ると思いますが、
根本的な勘違いがあるようです。
おそらく何か参考にしたいページがあって、そのページがfloatを使い、「全ページにメニューを作成しリンク」という構成だったのでしょうが、その2つには何も関係なく、たまたまそのページがそうであっただけです。
floatということは忘れて、「このサイトのような構成にしたい」という質問にした方が良いでしょうね。
お返事が遅くなり申し訳ありません。
私は根本的にfloatがまだわかっていないようです。。。
floatを使っているページを色々みるとほぼ全てのページにメニューがあるようにみえるので、このような質問をしました。
HTMLのフレームみたいに常に右側にや上などにメニューを出すようなページを作成したいのですが、その場合どうすれば良いのでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するQ&A
- 1 cssでフロートを使用した段組について。
- 2 【CSS】float:left; を使用した2カラム、本文中でclearすると間が空いてしまう
- 3 CSSのフロートを使ったレイアウト割
- 4 CSSを使用したHPの左メニューとフッターについて
- 5 CSSでfloatした要素の高さを100%にしたい
- 6 [CSS]リキッドレイアウト上で、floatさせたサイドバーの背景画像を高さ100%で敷き詰めたい
- 7 CSS floatについて教えて下さい。
- 8 CSSのfloatについて教えてください。
- 9 CSSのfloatでレイアウトしたページの印刷について
- 10 cssで定義したクラス情報をcssセレクタ内で使用
関連するカテゴリからQ&Aを探す
おすすめ情報
人気Q&Aランキング
-
4
ローカルでのhtmlチェックにつ...
-
5
ルート相対パス
-
6
トップディレクトリから相対パ...
-
7
画像欄にバツ印が・・・
-
8
<img src="相対パス">の絶対パ...
-
9
作成したhtmlファイルがローカ...
-
10
デスクトップにある画像のパス...
-
11
HTML5で画像をクルクル回したい。
-
12
HTML相対パスの設定方法について
-
13
HTMLからフォルダを開きたい
-
14
HTMLで別PCのフォルダを開く
-
15
大文字はできるだけ使わない方...
-
16
<a href=…></a>で表示されない。
-
17
リンク先に日本語フォルダがあ...
-
18
HTMLファイルの一部の画像だけ...
-
19
aタグのhrefにネットワークパス...
-
20
複数のindex.htmlを作ってもい...