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で質問しましょう!
似たような質問が見つかりました
- Mac OS Macで今あるファイルの連番(ページ番号)に足し算をしてリネームしたい 1 2022/10/12 17:22
- HTML・CSS Dreamweaver のテンプレートでの相対パスの設定について 2 2023/06/13 17:28
- Visual Basic(VBA) エクセルのマクロについて教えてください 物件ごとのフォルダを作成してます そのフォルダ内にサブフォル 2 2023/07/02 17:58
- Google Drive GoogleWorkspaceについての質問 1 2022/12/16 17:57
- その他(コンピューター・テクノロジー) <a href="file:///フォルダ名/ファイル名">リンクテキスト</a>について 1 2023/04/06 22:40
- C言語・C++・C# C++言語の16進数の表現についておしえてください 1 2022/11/14 17:46
- Access(アクセス) Accessのリンクテーブルのパスを相対パスにする方法について教えて頂きたいです 1 2023/02/08 13:29
- Visual Basic(VBA) エクセルのマクロについて教えてください。 4 2023/07/02 11:48
- Excel(エクセル) フォルダ内の全ブックのシート名を変更したい 7 2022/09/22 21:34
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像にリンクを張ると画像がず...
-
ポップアップメニューを表のよ...
-
リストの数字のフォントサイズ...
-
ポップアップメニューの作成方...
-
HTMLで組織図を作成する方法
-
<li>でドロップダウンボタンを...
-
<table>の高さ固定。情報増加時...
-
html <ul></ul>の並びで一行空...
-
「olタグ」内に「hタグ要素」...
-
リンク文字同士の間隔を開ける...
-
バーナーヘッダーを固定する方法
-
罫線の長さが可変するテキスト...
-
タイトルの横にサブタイトルが並ぶ
-
css 横並びのナビゲーションバ...
-
ol、liをスタイルシートで中央寄せ
-
画像横のテキストをセンターに...
-
HTMLで語の先頭をそろえるには?
-
テーブル内のプルダウンの下に...
-
「・」(黒い点)を非表示にした...
-
CSSでリスト[li]の表示がズレる
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
番号付きリスト(<Ol><Li>・・...
-
liタグの中に<p>タグやら<dl>を...
-
レスポンシブWebデザインでリン...
-
<table>の高さ固定。情報増加時...
-
<ul><li></li></ul>にするメリ...
-
リストの数字のフォントサイズ...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
divタグ内のコンテンツが重なっ...
-
画像にリンクを張ると画像がず...
-
複数行にまたがる括弧を表示し...
-
ページを開いているときのリン...
-
html <ul></ul>の並びで一行空...
-
html/cssの、navを2段にする...
-
HTML5のfooterに見出しを付けて...
-
<ul>~</ul>が二つ続くと間に改...
-
htmlの<ol>タグで、数字などを...
-
リンク文字同士の間隔を開ける...
-
CSSでつくったメニューのアニメ...
おすすめ情報