レイアウト枠 (このページは多数のレイアウト枠で構成しています。) 安倍 09/11/11
設定法 |
注意:広告入りページの場合、上部にレイアウト枠を設けると広告枠が優先されて広告に
上書きされてしまう。
例:広告入りのこのページ http://1st.geocities.jp/kyokuyu/pc/hp/css/css-layout.htm
広告なしの場合 http://1939abe.web.fc2.com/pc/hp/css/css-layout.htm
HomepageBuilder の場合
挿入 → レイアウト枠
重ね順序: 画像を右クリック → 重なり で設定 あるいは
画像を右クリック → レイアウト枠の属性 →
layerの数値で決まる。
DreamWeaverと同じく、z-index の数値1が最下層。 ただしFlash に重ねる場合、通常のswfファイルでは問題ないが直リンクswfはダメ。 PDFはリンク文字が重ねられる。
swfファイルには上層に重ねられない。、z-index 数値に関わらずswfが上層になる。
テキスト、静止画像、MP4動画は表に入れて重ね合わせ可能
扱うファイルの大文字、小文字は統一すべし。Windowsは区別しないがサーバーOSによっては区別される。
DreamWeaver の場合
挿入 → レイアウトオブジェクト → AP Div(Ver.CS3)
/ レイヤー(Ver.MX)
重ね順序の指定:: 枠を指定、プロパティで、z-index の数値1が最下層。順次上層へ。
DreamWeaverCS3の問題:
・2つのレイアウト終了はそれぞれに</DIV>を挿入すべきだが、レイアウト枠の1つを位置指定しない(即ち、左上位置の)ままにすると、
まとめて2つ</DIV></DIV>が挿入される。そのため
z-index の数値が無効になり後に挿入したレイアウトが上層になる。 だから、左上端位置の場合も位置指定が必要。多分バグだろう。
・Flashと重ねると、z-index 数値は無視されFlashが必ず上層になる。 この現象は、</DIV>の位置を変えても、DreamWeaverのFlashに関わる固有のScriptを削除しても変わらない。Flashを下層にする場合はHomePage Builder
を使うべし。HomePage Builderで上下を決めた後にDreamWeaverで編集を続行しても問題ない。DreamWeaverのFlashに関わる固有のScriptが挿入されてもOK。
レイアウト枠の応用手法 |
HomepageBuilder
・「どこでも配置モード」
類似機能に「どこでも配置モード」があるが、横幅規制が
ないので
画面幅が狭くなった場合に文字が下に伸びて下と重なる場合がある。
「どこでも・・・」と「レイアウト枠」を組合せることで この問題は解決する。
この組合せで
「グリッド表示と、ページ枠表示があるレイアウト枠編集モード」になり、視認性も向上する。
この場合、コードは「レイアウト枠」に統一される。
すなわち、「レイアウト枠」を使用すれば「どこでも・・・」を使う意味は あまりないと思われる。
・スタイリッシュイフェクト
スタイリッシュイフェクトは、「表枠」と「レイアウト枠」を組合せたものでVer.10 から登場した。
「どこでも・・・」よりも、こちらが主流になる可能性あり。
DreamWeaver
・ページ上の自由配置
挿入 → レイアウトオブジェクト → AP Div(Ver.CS3)
で、 HomepageBuilderの「どこでも配置モード」+「レイアウト枠」 の機能が可能。
広告入りフリーサイトでの注意 |
広告入りのフリーサイトを利用する場合は、広告表示と重なるのであらかじめ広告部分のエリアを空けておく必要がある。
あるいは、広告の上に画像を置けるので、背景色画像を広告の上に置けば広告を消すことができる。 このページはそのようにして広告を消した。
| スタイルシート(CSS) | 表を使ったレイアウト | ホームページ作成体験メニュー |