スタイルシートによるレイアウトのバリエーション

作成したスタイルシートを使って、どの様にレイアウトを指定できるかを確認してみましょう。
そして、公開するWebサイトを、どのようなレイアウトにするかを決めてください。
もう一度、スタイルの作成・管理画面を開き、定義済みスタイルのリストから、"myStyle"を選びます。

デフォルト (myStyle) での設定

layout_001.jpg

これが、デフォルトのレイアウトで、設定は以下のようになっています。
  • バナーエリアを表示
  • グローバルナビを左寄せで表示
  • ローカルナビを左右とも表示
  • フッタを表示
  • コンテントボディの幅は、ブラウザの幅に併せて表示
スタイルシート myStyleには、
@import url(/design/161/default.css);
@import url(/design/161/globalnavi_left.css);
@import url(/design/161/bothsidebarmenu.css);
と記述されています。これは、"default.css"、"globalnavi_left.css"、"bothsidebarmenu.css"という3つのcssファイルを読み込んで（@import)、スタイルを定義する、という意味です。
  • 最初の"default.css"というのは、全体のレイアウトやデザインの基本を設定しているもので、必ず最初に読み込む必要があります。このcssで、バナーエリアやフッタの基本設定、コンテントボディの幅を可変にする、見出しやリンクの表示のさせ方のデフォルトを設定しています。
    • デフォルトでは、バナーエリアの高さは70px、左右のローカルナビの幅は200pxになっています。変更の方法は、後で説明します。
    • 文字の大きさは、ブラウザの［表示］－［文字のサイズ（拡大・縮小）］で相対的に変化します。Webサイトによっては、文字のサイズを固定している例も見受けられますが、Webサイトにおけるユニバーサルデザインを考慮し、文字のサイズが可変であることが望ましいと言われています。
  • 次の行の"globalnavi_left.css"で、グローバルナビを左寄せで表示させる設定をしています。
  • 最後の"bothsidebarmenu.css"では、ローカルナビを左右とも表示させる設定をしています。

バナーエリアを表示させない設定

バナーエリアを表示させないようにできます。即ち、以下のような設定です。
  • バナーエリアを非表示
  • グローバルナビを左寄せで表示
  • ローカルナビを左右とも表示
  • フッタを表示
  • コンテントボディの幅は、ブラウザの幅に併せて変化して表示
スタイルシート myStyleの、design.cssの定義の内容に、
@import url(/design/161/default.css);
@import url(/design/161/no_banner.css);
@import url(/design/161/globalnavi_left.css);
@import url(/design/161/bothsidebarmenu.css);
layout_002.jpgと、１行追加します。そして【スタイルの修正】ボタンをクリックしてください。これで、スタイルシート"myStyle"で表示するように設定されているページは、すべてバナーエリアが非表示になります。
※注：公開されているページについても、スタイルシートの変更はすぐに反映されますので、修正は、充分に注意して行ってください。
実際に、“メインページ”へ戻り、右のように表示されていることを確認してください。
このように、スタイルの作成・管理画面でスタイルシートを修正し、“メインページ”へ戻ってその表示を確認する、という手順で、以降のレイアウトのバリエーションを試してみてください。

フッタを表示させない設定

layout_003.jpg

フッタを表示させないようにできます。即ち、以下のような設定です。
  • バナーエリアを表示
  • グローバルナビを左寄せで表示
  • ローカルナビを左右とも表示
  • フッタを非表示
  • コンテントボディの幅は、ブラウザの幅に併せて変化して表示
スタイルシート myStyleには、
@import url(/design/161/default.css);
@import url(/design/161/no_footer.css);
@import url(/design/161/globalnavi_left.css);
@import url(/design/161/bothsidebarmenu.css);
と、記述します。

グローバルナビを右寄せで表示する設定

layout_004.jpg

以下のような設定です。
  • バナーエリアを表示
  • グローバルナビを右寄せで表示
  • ローカルナビを左右とも表示
  • フッタを表示
  • コンテントボディの幅は、ブラウザの幅に併せて変化して表示
スタイルシート myStyleには、
@import url(/design/161/default.css);
@import url(/design/161/globalnavi_right.css);
@import url(/design/161/bothsidebarmenu.css);
と、記述します。

グローバルナビを表示させない設定

layout_005.jpg

以下のような設定です。
  • バナーエリアを表示
  • グローバルナビを非表示
  • ローカルナビを左右とも表示
  • フッタを表示
  • コンテントボディの幅は、ブラウザの幅に併せて変化して表示
スタイルシート myStyleには、
@import url(/design/161/default.css);
@import url(/design/161/no_globalnavi.css);
@import url(/design/161/bothsidebarmenu.css);
と、記述します。

ローカルナビ（左）を表示させない設定

layout_006.jpg

以下のような設定です。
  • バナーエリアを表示
  • グローバルナビを左寄せで表示
  • ローカルナビ(右）だけを表示
  • フッタを表示
  • コンテントボディの幅は、ブラウザの幅に併せて変化して表示
スタイルシート myStyleには、
@import url(/design/161/default.css);
@import url(/design/161/globalnavi_left.css);
@import url(/design/161/rightsidebarmenu_right.css);
と、記述します。

ローカルナビ（右）を表示させない設定

layout_007.jpg

以下のような設定です。
  • バナーエリアを表示
  • グローバルナビを左寄せで表示
  • ローカルナビ(左）だけを表示
  • フッタを表示
  • コンテントボディの幅は、ブラウザの幅に併せて変化して表示
スタイルシート myStyleには、
@import url(/design/161/default.css);
@import url(/design/161/globalnavi_left.css);
@import url(/design/161/leftsidebarmenu_left.css);
と、記述します。

ローカルナビを左右とも表示させない設定

layout_008.jpg

以下のような設定です。
  • バナーエリアを表示
  • グローバルナビを左寄せで表示
  • ローカルナビを両方とも非表示
  • フッタを表示
  • コンテントボディの幅は、ブラウザの幅に併せて変化して表示
スタイルシート myStyleには、
@import url(/design/161/default.css);
@import url(/design/161/globalnavi_left.css);
@import url(/design/161/no_sidebarmenu.css);
と、記述します。

ローカルナビ（左）を右側に表示させる設定

layout_009.jpg

以下のような設定です。
  • バナーエリアを表示
  • グローバルナビを左寄せで表示
  • ローカルナビ(左）を右側に表示
  • フッタを表示
  • コンテントボディの幅は、ブラウザの幅に併せて変化して表示
スタイルシート myStyleには、
@import url(/design/161/default.css);
@import url(/design/161/globalnavi_left.css);
@import url(/design/161/leftsidebarmenu_right.css);
と、記述します。

グローバルナビを左側に表示し、ローカルナビ(右）を右側に表示させる設定

layout_010.jpg

以下のような設定です。
  • バナーエリアを表示
  • グローバルナビを左側に縦に表示
  • ローカルナビ(右）を右側に表示
  • フッタを表示
  • コンテントボディの幅は、ブラウザの幅に併せて変化して表示
スタイルシート myStyleには、
@import url(/design/161/default.css);
@import url(/design/161/globalandrightsidebarmenu_leftright.css);
と、記述します。

グローバルナビを左側に表示し、ローカルナビ(左）を右側に表示させる設定

layout_011.jpg

以下のような設定です。
  • バナーエリアを表示
  • グローバルナビを左側に縦に表示
  • ローカルナビ(左）を右側に表示
  • フッタを表示
  • コンテントボディの幅は、ブラウザの幅に併せて変化して表示
スタイルシート myStyleには、
@import url(/design/161/default.css);
@import url(/design/161/globalandleftsidebarmenu_leftright.css);
と、記述します。

グローバルナビを左側に表示し、ローカルナビ(左）ローカルナビ(右）表示しない設定

layout_012.jpg

以下のような設定です。
  • バナーエリアを表示
  • グローバルナビを左側に縦に表示
  • ローカルナビ(左）ローカルナビ(右）をいずれも非表示
  • フッタを表示
  • コンテントボディの幅は、ブラウザの幅に併せて変化して表示
スタイルシート myStyleには、
@import url(/design/161/default.css);
@import url(/design/161/globalandnosidebarmenu.css);
と、記述します。

全体の幅を特定のピクセル数で固定する設定

パソコンの画面は多様化しており、ホームページもブラウザの画面の幅に併せて表示される方がよいのですが、デザイン等の都合から、どうしても画面の幅を固定にしたい場合、たとえば、デフォルトのレイアウトで800ピクセルに固定するならば、上記のimportの設定の後に、
@import url(/design/161/default.css);
@import url(/design/161/globalnavi_left.css);
@import url(/design/161/bothsidebarmenu.css);

#contentFrame {
   width:800px;
}
と記述を追加してください。800pxよりブラウザの画面が広い場合には、全体が左寄せで表示されます。
ブラウザの画面の中でセンタリング（中央揃え）したい場合には、
@import url(/design/161/default.css);
@import url(/design/161/globalnavi_left.css);
@import url(/design/161/bothsidebarmenu.css);

#contentFrame {
   width:800px;
   margin:0 auto;
}
と記述してください。

Copyright © 2008- All rights reserved.

《無断転載・引用等はお断わりいたします》