AtelierKanae トップページに戻るbit-edge - WEBクリエイターのためのサイト -What's New? - 新着情報・お知らせ等 -for Beginner - 初心者の方はまずこちらへ -Works - アトリエ鼎の制作物 -Garage - ガレージ -
for Beginner - 初心者のためのエリア -
仕切り線

コンテンツリスト
Webサイトリフォーム入門

ch.01準備はOK?

ch.02コンテンツは質が命

ch.03デザインCheck

ch.04タグはどうなってる?

ch.05最後はおさらい

初心者向け厳選リンク集
リスト終了
大見出し:Ch.4タグはどうなってる? Ch: I II まとめ
前のページに戻るpage16/21次のページに進む
仕切り線

左揃え伸縮自在幅レイアウト

左揃え伸縮自在幅の例の解説図

このレイアウトはCSS2で実現するにはあまり向いていません。(CSS3では解消されるらしい)ですが、どうしてもスタイルシートを用いたい場合は下記のように振舞う事を前提に用いましょう。

このレイアウトの振る舞い

  • 横幅は基本的にウィンドウサイズ。
  • 横が限界に達しても縦は伸び続ける。
  • 縦のエリア分けは、コンテンツの長さに追随。
  • コンテンツがウィンドウサイズ未満の時はウィンドウサイズまでエリア分け。
  • ウィンドウ幅<コンテンツ幅の場合はコンテンツエリアにスクロールバーを出して閲覧性とエリア分けを擬似的に維持。

まずは、エリアごとに<DIV>タグを作ってみましょう。

基本構造

<DIV ID="lefttop">
左上
</DIV>
<DIV ID="righttop">
右上
</DIV>
<DIV ID="leftbottom">
左下
</DIV>
<DIV ID="contents">
コンテンツ
</DIV>

次に各エリアのスタイルを設定します。 lefttopは150×100の完全固定エリアとしてみましょう、righttopは縦100固定、leftbottomは横150固定になるわけです。

突然ですがここで、色々スタイルシートの限界・ブラウザのバグ等を回避するためにさまざまな工夫を施します。一つ一つ説明するととても長くなるので、ソースを見て勉強してください。

完成

構造が分かりやすいバージョン

伸縮への対応が分かりやすいバージョン

※このレイアウトは完全なエリア分けを目指しているため複雑ですが、このサンプルをヒントにタグを削っていけば簡単なバージョンも作りだせます。


※テーブルタグでのレイアウト方法もありますが、推奨されていませんので互換性が重要である場合など、どうしても必要なとき以外は使わないようにしましょう。


次は画像の扱い方です>>

仕切り線
前のページに戻るpage16/21次のページに進むCopyright 1999-2002 Ateiler Kanae. All rights reserved.