ホームページ作成について質問です。
複数ページのホームページの内、全ページ共通の罫線や画像(ヘッダー部、フッター部など)のレイアウト微調整を
スタイルシートで設定したい、というのが目標ですが、そのレイアウト微調整を position:absolute; で行っていますが間違っているのでしょうか?
上記を設定したオブジェクトは確かに完全に任意の位置に配置できるのですが、
位置を指定していないHTMLだけに記述されたオブジェクトとレイアウトが重なったりしてしまいます。
全てのオブジェクトの位置をスタイルシートで指定すればそれも回避できると思うのですが、
そうするとひとつのHTMLファイルだけのスタイルシートになってしまうし、スタイルシートはそういう使い方するものではないんじゃないか、と思ってます。。
(そもそも共通設定ファイルにポジションの固定値を記述する事自体、 間違ってる気がしてます)
スタイルシートの位置指定を使用しないで左寄せ、中央、右寄せ、以外の
レイアウト調整って可能なのでしょうか?
また、ホームページの完全な任意レイアウトの際のセオリー等が
ありましたら教えていただきたいです。
以上、宜しくお願い致します。
A 回答 (4件)
- 最新から表示
- 回答順に表示
No.4
- 回答日時:
positon:absoluteはIE6等でバグがあるようなので
出来るだけ使わないほうがよいと思います。
個人的には<div>タグとmarginやpadding、heightやwidthの組み合わせが
一番、レイアウトが崩れませんし、推奨されています。
>スタイルシートの位置指定を使用しないで左寄せ、中央、右寄せ、以外の
>レイアウト調整って可能なのでしょうか?
テーブルレイアウトといって
<table>タグを使ったレイアウトをする方法もありますが
HTMLはあくまで構造言語であるので、これも推奨されていません。
ただ、テーブルレイアウトはレイアウトが崩れにくいので
どうしてもうまくいかない場合はテーブルを使ってもよいと考えていますが・・
回答有難うございます。
margin については他の方の回答で今知りましたが、
padding という方法もあるんですね!
デザインは決まっているのですが、それを実現する構成について、
全然考えがたりないようです。。
教えて頂いた、<div>、<table>含めて再考いたします。
ありがとうございました!
No.3
- 回答日時:
複数ページのホームページの内、全ページ共通の罫線や画像(ヘッダー部、フッター部など)のレイアウト微調整を
スタイルシートで設定したい、というのが目標ですが、そのレイアウト微調整を position:absolute; で行っていますが間違っているのでしょうか?
>>position:absolute;はほとんど使う必要はありません。
普通は、ページ構成は、上から下へと段々に摘み重ねた形でOKです。
**
■外部CSSの場合
普通は、外部CSSにCSSの設定を定義します。
HTML側ではヘッダー部にCSSへのリンクを明記します。
■ヘッダー内にCSSを定義する場合
■HTMLタグにCSSを定義
の3種類の方法が使えます。一般的には外部CSSが多く使用されます。
3方式の混在は可能です。
**
HTMLとCSSを理解しないとホームページ作成は困難ですよ。
それだけは、確かです。^^
回答ありがとうございます。
自分としてはなるべく共通の設定は外だしにして、
保守性の高い構成ができれば。。と思っておりました。
>HTMLとCSSを理解しないとホームページ作成は困難ですよ。
ご指摘の通りです^^;
まだ質問するレベルではなかったかもです。。。
どうもありがとうございました。
No.2
- 回答日時:
> 全ページ共通の罫線や画像(ヘッダー部、フッター部など)のレイアウト微調整を(省略)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
- 回答日時:
一般的にそのような場合、インラインフレームを使用すると思います。
インラインフレームとは額縁があって、中の絵だけを変えるようなものです。
もしやりたいことが違ったらすみません。
参考URL:http://www.tohoho-web.com/www.htm
早い回答ありがとうございます。
インラインフレームという方法があるんですね。。
自分がしたいことに対して、どういう方法をとるのが適切なのか
まだ全然わかっていない状態です。
調べて参考にさせて頂きます!!
有難うございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- WordPress(ワードプレス) ワードプレスで記事を書くスペースの横幅を広げたいです。 1 2022/09/24 18:16
- Word(ワード) 表の縦罫線を移動するピッチ 1 2022/10/12 12:24
- Access(アクセス) Access2016のExcelインポートの機能のことで教えてください 1 2022/09/11 14:58
- 家具・インテリア 部屋のレイアウトに関する質問です。 3月からこのような間取りの部屋に引っ越す予定です。 この部屋の洋 1 2023/02/19 19:08
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- Illustrator(イラストレーター) Illustratorでオブジェクトの色が勝手に変わって困っています。 4 2022/09/04 18:47
- その他(IT・Webサービス) ホームページにカウント数を表示する 2 2022/10/28 10:37
- Excel(エクセル) 【エクセルマクロ】既に開いているIEの、サイズや表示位置を変更するには 4 2022/12/01 22:57
- Windows 10 Windowsのアイコンの整列が変になりました 2 2022/06/24 00:02
- HTML・CSS インクルードした要素がヘッダーにかぶってしまう 3 2022/09/13 17:35
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
含む含まないという概念自体の...
-
【ヒトの神秘】美男美女から何...
-
HTMLです
-
質問1.
-
テーブルタグを使わない、表作り。
-
C言語について。
-
マージソートの計算量について-...
-
HTMLの条件によって表示方向が...
-
CSSのセレクタに指定するbodyと...
-
HTMLページ上でiframeを最前面...
-
改行ほどは行かないけど、若干...
-
HTMLです次の意味を持つ要素ま...
-
textareaの幅を画面と合わせたい
-
HTMLです 四角みたいにして中に...
-
拡大してもはみ出さないコーデ...
-
smallにtext-allignが効かない
-
cssでhtml{width:100%;}...
-
CENTERタグは廃止になるんでし...
-
テキストボックスの中にリンク...
-
input type="hidden"で取得した...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
還暦を過ぎた方々に質問です。
-
【ヒトの神秘】美男美女から何...
-
質問1.
-
含む含まないという概念自体の...
-
smallにtext-allignが効かない
-
角丸画像の背景色を透明にした...
-
tdに対してmin-heightの定義、...
-
改行ほどは行かないけど、若干...
-
html タグの閉じスラッシュ前の...
-
テキストボックスの中にリンク...
-
「諸要素」とはどういう意味で...
-
input type="hidden"で取得した...
-
タグは大文字と小文字どちらが...
-
CSSで改行後の行間調整
-
H1タグを画像にしたい
-
2個のFormを横並びにしたい
-
textareaの幅を画面と合わせたい
-
border: noneでボタンの境界線...
-
CSS:overflow要素の印刷について
-
HTMLの・要素・属性・属性値 は...
おすすめ情報