ホームページ レイアウトについて

質問

ホームページ作成について質問です。

複数ページのホームページの内、全ページ共通の罫線や画像（ヘッダー部、フッター部など）のレイアウト微調整を
スタイルシートで設定したい、というのが目標ですが、そのレイアウト微調整を position:absolute; で行っていますが間違っているのでしょうか？

上記を設定したオブジェクトは確かに完全に任意の位置に配置できるのですが、
位置を指定していないHTMLだけに記述されたオブジェクトとレイアウトが重なったりしてしまいます。

全てのオブジェクトの位置をスタイルシートで指定すればそれも回避できると思うのですが、
そうするとひとつのHTMLファイルだけのスタイルシートになってしまうし、スタイルシートはそういう使い方するものではないんじゃないか、と思ってます。。
（そもそも共通設定ファイルにポジションの固定値を記述する事自体、　間違ってる気がしてます）

スタイルシートの位置指定を使用しないで左寄せ、中央、右寄せ、以外の
レイアウト調整って可能なのでしょうか？
また、ホームページの完全な任意レイアウトの際のセオリー等が
ありましたら教えていただきたいです。

以上、宜しくお願い致します。

回答No.4

kyotokyo

positon:absoluteはIE6等でバグがあるようなので
出来るだけ使わないほうがよいと思います。

個人的には<div>タグとmarginやpadding、heightやwidthの組み合わせが
一番、レイアウトが崩れませんし、推奨されています。

>スタイルシートの位置指定を使用しないで左寄せ、中央、右寄せ、以外の
>レイアウト調整って可能なのでしょうか？

テーブルレイアウトといって
<table>タグを使ったレイアウトをする方法もありますが
HTMLはあくまで構造言語であるので、これも推奨されていません。
ただ、テーブルレイアウトはレイアウトが崩れにくいので
どうしてもうまくいかない場合はテーブルを使ってもよいと考えていますが・・

お礼

回答有難うございます。

margin については他の方の回答で今知りましたが、
padding という方法もあるんですね！

デザインは決まっているのですが、それを実現する構成について、
全然考えがたりないようです。。

教えて頂いた、<div>、<table>含めて再考いたします。

ありがとうございました！

回答No.3

noname#119957

複数ページのホームページの内、全ページ共通の罫線や画像（ヘッダー部、フッター部など）のレイアウト微調整を
スタイルシートで設定したい、というのが目標ですが、そのレイアウト微調整を position:absolute; で行っていますが間違っているのでしょうか？
>>position:absolute;はほとんど使う必要はありません。

普通は、ページ構成は、上から下へと段々に摘み重ねた形でOKです。
**

■外部CSSの場合
普通は、外部CSSにCSSの設定を定義します。
HTML側ではヘッダー部にCSSへのリンクを明記します。
■ヘッダー内にCSSを定義する場合
■HTMLタグにCSSを定義
の３種類の方法が使えます。一般的には外部CSSが多く使用されます。
３方式の混在は可能です。
**
ＨＴＭＬとＣＳＳを理解しないとホームページ作成は困難ですよ。
それだけは、確かです。^^

お礼

回答ありがとうございます。

自分としてはなるべく共通の設定は外だしにして、
保守性の高い構成ができれば。。と思っておりました。

>ＨＴＭＬとＣＳＳを理解しないとホームページ作成は困難ですよ。
ご指摘の通りです^^;
まだ質問するレベルではなかったかもです。。。

どうもありがとうございました。

回答No.2

abril

> 全ページ共通の罫線や画像（ヘッダー部、フッター部など）のレイアウト微調整を（省略）position:absolute; で行っていますが間違っているのでしょうか？

”絶対位置指定による微調整”が”可能な内容”に対して”適切な指定”をするなら、間違ってはいません。

> 上記を設定したオブジェクトは確かに完全に任意の位置に配置できるのですが、
> 位置を指定していないHTMLだけに記述されたオブジェクトとレイアウトが重なったりしてしまいます。

positionプロパティで位置指定を特にしてない要素のディフォルト値は"static"ですので、そのまま何もしなければ他の要素からはその絶対位置指定をした要素の領域を認識する事ができません。なので、「レイアウトが（意図しない形で）重なったり」しない為には、絶対配置をする要素がある場合は、その絶対配置をした要素の領域（高さ・幅）を具体的な数値で明示する、もしくは前後の（絶対配置ではない）要素に対して、絶対配置をした要素の領域と重ならない様な数値の余白を設ける、といった対処をしておく事が必要です。

> 全てのオブジェクトの位置をスタイルシートで指定すればそれも回避できると思うのですが、

HTMLによるWebコンテンツは印刷物とは全く異なる性質ですので、（HTML内の全ての要素が画像だったりFlashだったりするのでもなければ…）全ての要素を絶対配置にして指定するには不向きです。

> （そもそも共通設定ファイルにポジションの固定値を記述する事自体、　間違ってる気がしてます）

確認ですが、ヘッダーとかフッターとかの内部の各構成要素はファイル（ページ）によって”位置決め”自体は全て同じレイアウトになっていますよね？
だったらその事自体は別に間違ってないですよ（適切な指定さえしてあれば）。

> スタイルシートの位置指定を使用しないで左寄せ、中央、右寄せ、以外のレイアウト調整って可能なのでしょうか？

要素の記述順と表示順が揃っていて原則として上・左から順番に…というレイアウトであれば、positionではなくmarginによる調整で充分可能な場合が多いです。

> また、ホームページの完全な任意レイアウトの際のセオリー等がありましたら

（テキストデータを沢山含む）通常のコンテンツの内容に対して、ファイル内全ての要素を印刷物みたいに絶対値で指定したい、というのであれば「ない（というか、ナンセンス）」ですね。繰り返しになりますが、Webコンテンツはそういう性質を意図したメディアではないので。

まずpositionプロパティの概念をきっちり把握されるところから初めてはいかがでしょう。そうすれば、どういう局面で絶対配置を適切に使用できるか、といった事がイメージできる様になると思います。
下記の内容などを読んでも、もう理解はできてらっしゃる状態でしょうか？
【参考】http://w3g.jp/css/display_position/position

お礼

細かい回答ありがとうございます。

完全な自由なレイアウトはまさか全部 position:absolute; で設定しなきゃいけないの？
と思って質問させて頂きました。

当然そんなこともなく、勉強不足なだけでした。

まず、知りたかったのが margin です。
自分のしたいことはこれで十分出来そうだと思いました。

ただ、
>その絶対配置をした要素の領域（高さ・幅）を具体的な数値で明示する
この方法で実装してみようと思います。

明示することによって、その領域が使用されていると認識され、
他のものと重なることがなくなる、という認識でいいのかな？

後は自分で調べてみます。

提示して頂いたサイトも非常に参考になりそうです。
参考にしていたサイトは内部的な仕様に関する記述が全然なかったので。。。

有難うございました！

回答No.1

prpr002

一般的にそのような場合、インラインフレームを使用すると思います。
インラインフレームとは額縁があって、中の絵だけを変えるようなものです。

もしやりたいことが違ったらすみません。

参考URL：

http://www.tohoho-web.com/www.htm

お礼

早い回答ありがとうございます。

インラインフレームという方法があるんですね。。
自分がしたいことに対して、どういう方法をとるのが適切なのか
まだ全然わかっていない状態です。

調べて参考にさせて頂きます！！

有難うございました！