このサイトについて

ホーム

WEB制作支援

WEBデザイン

WEB運営

特集・トピックス

リンク集

Home >> Webデザインテクニック >> ページのサイズを固定して中央に配置する

ページのサイズを固定して中央に配置する

サンプルと機能

コンテンツページの四方をフレームで囲むことでページを中央に固定して、
あらゆる環境でレイアウトを保ちます。
ブラウザのサイズがコンテンツページのサイズを下回らない限り、
四方のフレームが変化するだけで、コンテンツページに影響はありません。

画像をクリックするとページが表示されます。

サンプル・ソース

緑の文字が変更箇所で、赤い文字が対応するソースです。
"/* */"内はコメントです。削除しても影響ありません。
必要な箇所をコピー＆貼り付けして編集してください。

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<FRAMESET rows="*,400,*" border="0" frameborder="0">
  <FRAME src="out.html" scrolling="no">         /* 左 */
  <FRAMESET cols="*,600,*" border="0" frameborder="0">
    <FRAME src="out.html" scrolling="no">       /* 上 */
    <FRAME src="main.html" name="main">         /* 中央 */
    <FRAME src="out.html" scrolling="no">       /* 下 */
  </FRAMESET>
  <FRAME src="out.html" scrolling="no">         /* 右 */
</FRAMESET>
<BODY>
このページはフレーム対応のブラウザでご覧ください。
</BODY>
</HTML>

解説・注意点など

サンプルでは、まず横方向に３分割して、
その中央を縦方向に３分割することで実現しています。
中央のコンテンツページの横は600ピクセル、縦は400ピクセルです。
また"*"は任意のサイズであることを表します。

out.htmlには背景色や背景画像を設定します。

← Webデザインテクニックに戻る

eWeb