@blog.justoneplanet.info

日々勉強

CSSでレイアウトをする前に(CSSの基本)

■作業フロー

1.ワイヤーフレーム(orカンプ)を用意する
ここで3カラムや2カラムレイアウトなど決定
ワイヤーフレームとは枠組みだけでデザインしたものは含まれない
カンプとはphotoshopやfiireworksなどで作った静止画像で完成イメージ画像
2.XHTML制作(意味上のタグを中心)
ページに掲載する文字情報に見出しや段落といった意味づけをする(ここは経験が出る部分でもあり侮ってはいけない)
3.div要素を1番で用意した画像にidやclassとセットで書き込む
いわゆる「まとまり(ヘッダー、フッター、メニューバー)」を画像上で括る
4.HTMLに3番の通りに反映
<div id=”header”>などとし、HTML上で括っていく
5.CSSを編集
ページ内の部品ごとにCSSを分けるといった構築方針も決める
6.必要環境でレンダリング
文字の大きさを変えたりして入念にチェック
7.表示の不具合が発生した箇所についてCSSを調整
CSSハックはあくまでも最終手段とし、ハックの基準も決めておく
※但し、クロスブラウザ対策は思ったより面倒なので見捨てるブラウザも考慮する

■CSSレイアウトのメリットとデメリット

メリット
・スタイル管理の効率化
HTMLファイル内でなく外部ファイル化されている場合、別個にファイルを開き修正しなくて良い
場合によっては1箇所の修正で全HTMLファイルに適応できる
・広範なユーザーへの適合
ハンドヘルドディスプレイやテレビなどメディアに応じたcssを別個に指定できる
・デザインクォリティの向上
各要素に背景が別個に指定できる
line-heightで行間を調整し読みやすくできる
デメリット
・コーディングにかかる作業時間の増加
ターゲットブラウザの個数による(web標準に準拠しているIE7、Safari、Firefoxなどは大きく問題にならないが、IE6などブラウザごとの表示の違いを吸収する時間は意外にかかる)

■文章構造の整理について

・構造化の重要性
機械処理が可能になり、大量の情報の選別、ユーザーに恩恵がある
・div等による要素のグループ化(ヘッダー、フッター等)
構造をより詳細に定義できる
段組レイアウトへの補助

絶対的な位置にメニューなどを固定配置しよう

■サンプル

サンプルファイルの表示

■解説-基本編

#menu {
    position:fixed;
    top:100px;
}

と記述すればブラウザの内枠上から100pxで表示される

但し、IE6では全く効果が無い

■解説-IE6ハック

<!--[if lt IE 7.0]>
<style type="text/css">
body {
    filter:expression('');
}
#menu {
    position:expression('absolute');
    top:expression(document.documentElement && document.documentElement.scrollTop || document.body && body.scrollTop || 0 + 0 + 'px');
}
</style>
<![endif]-->

とhead内へ追記する

■長所

  • expressionを使用するとCSS内にJavaScriptを記述できる(但し、IE5.0以降の独自拡張)
  • IE6で未対応であったCSSプロパティを補完できる

■短所

  • 当然ながら独自拡張であるのでIEのみ対応
  • IEを互換モードで動かさない場合は固定配置部分がちらつく
  • 上記理由によりIEを互換モードで動かす場合、レイアウト用に全く別のCSSを用意しなければならない(BOXモデルの解釈が異なるため)
  • 同じ画面のFirefoxよりもマシンパワーを必要とし重くなる可能性がある
  • expressionの使用は表示などを回数を重ね検証する必要がある
  • document.documentElement && document.documentElement.scrollTop || document.body && body.scrollTopの部分は互換モードと標準モード時での違いを吸収するための記述である

■おまけ

IE6を捨てるというのも立派な選択肢の一つとして取っておく事を勧める。

なぜならばクロスブラウザ対策は思ったよりもコストがかかり、それに見合った効果が得られるとは必ずしも言えないからである。

■参考サイト

ダイナミックプロパティ expression() のまとめ

CSSで2カラムレイアウトを実現しよう

■前置き

  • 横2列(2カラム)レイアウトをしたいと考えている方対象
  • テーブルレイアウトからCSSに移行してる方など対象
  • HTMLを書いた事があればまぁ大丈夫かな

■見本

※あくまでも見本なので記載のソースとは異なります。

ヘッダー
サイドバー
コンテンツ
フッター

■HTMLソース(上記レイアウトをスタイル属性で:非推奨

<div style="width: 400px;">
<div style="background-color: orange">ヘッダー部分</div>
<div style="width: 100px; float: left; background-color: red">サイドバー</div>
<div style="width: 300px; float: right; background-color: yellow">コンテンツ部分</div>
<div style="clear: both; width: 400px; background-color: orange">フッター部分</div>
</div>

もしくは

<div style="width: 400px;">
<div style="background-color: orange">ヘッダー部分</div>
<div style="width: 100px; float: left; background-color: red">サイドバー</div>
<div style="width: 300px; float: left; background-color: yellow">コンテンツ部分</div>
<div style="clear: both; width: 400px; background-color: orange">フッター部分</div>
</div>

なんで非推奨なのかというとスタイルシートとは文章とデザインを分ける目的で作られたのに上記だとHTML内にある。しかもタグの中に書いてあって見にくい。スタイルシートを使うメリットが少ない。

■HTMLソース(ヘッド内へ記述タイプ)

headタグ内に以下の記述をする。

<style type="text/css">
#wrapper {
width: 400px;
}
#header {
background-color: orange;
}
#menubar {
float: left;
width: 100px;
background-color: red;
}
#content {
float: right;
width: 300px;
background-color:blue;
}
#footer {
clear: both;
background-color: orange;
}
</style>

bodyタグ内に以下の記述をする。

<div id="wrapper">
<div id="header">ヘッダー部分</div>
<div id="menubar">サイドバー</div>
<div id="content">コンテンツ部分</div>
<div id="footer">フッター部分</div>
</div>

まぁ、書き方は色いろあると思うけど。

■解説

  • コンテンツの量(分量)に応じて縦の長さは変化します
  • 最終的には<link rel=”stylesheet” type=”text/css” href=”” media=”” />や@importなどを使って外部のCSSファイルを読み込むようにしましょう。(上記、headタグ内のCSSは属性よりも編集しやすく論理構造から切り離されてはいますが、文章の論理構造を記述するべくHTMLファイル内にデザインがある事には変わりません)
  • 上記ソースのメリットの一つとしてid=”content”をHTML上でmenubarより上に持っていける事があります。(音声ブラウザが上から読み上げる際、最初にコンテンツを読み上げてくれるため)

背景が表示されない(親BOXからはみ出す)!?

さてCSS初心者ならば一度は経験するこの現象。。。
floatさせた内側のボックスが外側のボックスからはみ出してしまうというものだ。仕様的にははみ出すのが正しい。この仕様が便利かは微妙だが・・・

■こう表示したい(チャント親ボックスに含まれている)

left

right

■失敗例(親ボックスが潰れ、子ボックスがはみ出す:背景も適用されない)

left

right

■解決策(HTMLソース)

<div class="clearfix" style="border: 1px solid black; padding: 1px">
<div style="border: 1px solid black; margin: 0pt; float: left; background-color: red; width: 45%">left</div>
<div style="border: 1px solid black; margin: 0pt; float: right; background-color: blue; width: 45%">right</div>
</div>

■CSSソース

.clearfix:after{
    content:".";
    display:block;
    height:0px;
    clear:both;
    visibility:hidden;
}
.clearfix{
    display:inline-block;
}
/*Hides from IE-mac\*/
*html .clearfix{
    height:1%;
}
.clearfix{
    display:block;
}
/*End hide from IE-mac*/

■解説

  • HTMLソースにはクラスにclearfixを付け足す
  • CSSソースの.clearfix:afterで見えない要素を.clearfix後に付け足しボックスを拡張する(ただしIEはこの記述を適用できない)
  • IE7用にdisplay:inline-blockを付け足す
  • IE6以前用にdisplay:block;を付け足す
  • もっとも一般的なCSSハックである!?

ちなみに上記\(バックスラッシュ)は半角の¥マークのことです。

■注意点

clearfix(クリアーフィックス)とはハックのテクニック名なので本来は、例えば親BOXに(class=”setsumeibun”)としたらCSSのセレクタのclearfix部分をsetsumeibunで置換してあげるのがよい。何故ならばHTMLは文章の意味をマークアップする言語でありデザイン上のclearfixというものを挿入するのは多少矛盾する。したがって、もし仮に同じハックが必要な要素があるなら、CSSのセレクタに追記してあげるやり方の方が教科書に書けるような正しい記述といえるかもしれない。

■こんな感じ

.setsumeibun:after{
    content:".";
    display:block;
    height:0px;
    clear:both;
    visibility:hidden;
}
.setsumeibun{
    display:inline-block;
}
/*Hides from IE-mac\*/
*html .setsumeibun{
    height:1%;
}
.setsumeibun{
    display:block;
}
/*End hide from IE-mac*/