［CSS style］スタイルのポイント解説 01 import で管理に配慮

3-1
固定ナビゲーションを持つコーポレートサイトスタイル
ソース 1
［CSS style］スタイルのポイント解説 01
index.html
サンプル CSS
import.css / styles.css
width: 978px;
margin-left: auto;
3 Web 標準で実現するスタイリッシュなレイアウト
サンプル XHTML
div#container {
【import.css】
margin-right: auto;
padding-top: 27px;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
background: #ffffff url(../images/
bcg_container.gif) repeat-x;
}
【styles.css】
ませると強制終了など不安定な動作
方向に引いており、これは container
が発生する可能性があるからだ。
の背景として指定する。さらに帯の高
さの ぶ んだ け（padding-top: 27px;）
で余白をとっている
container は div で囲まれたレイアウ
レイアウト右上のナビゲーションが帯
トの基本領域部分のスタイルである
と重ならないために必要な仕掛けで
。作例のレイアウトは、ブラウ
もある。ここで上部の色帯を背景画
ザのウィンドウサイズを広げるとつね
像で作っている理由は、遠目に 1 色
にコンテンツが中央に寄る設定となっ
に見える色帯をドットパターンの中間
て い る。 こ れ は container 左 右 の
混色で作っているからだ。border プ
margin 設定を auto に設定して実現
ロパティでは 1 色塗りつぶししか使え
した。ページの上には水色の帯を横
ず、スタイルの微妙なニュアンスが作
ソース 1
<link rel="stylesheet" type="text/css"
href="css/import.css" media="screen,
projection, tv" />
import.css
@
stylescategory
website.css
styles.css
stylescategory.css
01
01 import.css を中心としたスタイルの管理方法
02 スタイルを適用させないで表示した作例
chap3-1.indd 52-53
1. import.css
する読み込み方法は、IE 4、NS 4 な
スタイル解説の前に、スタイルシート
どの 4 シリーズブラウザで解釈できな
の読み込みに使用したテクニックにつ
い。この点を逆手にとって、モダンブ
いて説明しよう。作例の XHTML は
ラウザと CSS の表示品質に隔たりの
import.css という共通の CSS を参照
大きい 4 シリーズブラウザに対しては
している。このファイルがすべての
スタイルを適用しないことも可能だ。
CSS のハブとなり、XHTML にスタ
シンプルな構造の XHTML で書かれ
イル を 反 映 さ せ て い る の だ
たデータであれば、スタイルの無い
01
。
XHTML により参照している CSS が
状態でも閲覧に支障はない
異なると、CSS のファイル名を変更す
お、Netscape 4 で は、XHTML の link
るといった修正がある場合、リンク切
要 素 で media 属 性 の 値 が「screen」
れが発生する恐れがある。参照する
以 外 の場 合（ たとえば「screen, tv」
スタイルを１つにまとめておけば管理し
や「all」）、外部 CSS が読み込まれな
やすい。画面数の多いサイトを作るな
い。@import だけでなく link 要素で
ら必ずやっておきたい設定である。
も対応しておく理由は、
「Netscape 4
ま た、CSS か ら CSS を 参 照 す る
には CSS を適用しない」という本来
@import で二重引用符でパスを指定
の目的に加えて、外部 CSS を読み込
02
。この余白は、
03
04
03 帯部分は padding を設定して他の要素と重
ならないようにした
04 帯部分をズームすると、2 色のドットでで
きているのがわかる
position プロパティ
div#box {
div#box {
position: relative;
position: relative;
top: 10px;
top: 10px;
}
}
position は、レイアウト上の要素の位置を決めるためのプロパティ
だ。top、left、right、bottom の位置プロパティと併せて使用する。
このプロパティを与えたいボックスが、親のボックスに内包されて
い る 場 合、 そ の 親 の position 値 に 影 響 を 受 け る。 親 ボ ッ ク ス が
position の指定を含まなければ、基準となる位置はウィンドウ全体
となる。
position プロパティでは、以下の値が利用できる。
absolute
absolute の場合
の場合
・static
・relative
div#box {
div#box {
position: absolute;
position: absolute;
top: 10px;
top: 10px;
}
}
。な
・absolute
・fixed
static は初期値で、この値を適用している際は位置指定ができず本
来の位置に表示される。つまり、この値は position プロパティを使っ
ていないのと同じ、ということだ。relative は本来の位置からの移動
距離となる、という指定となる。親ボックスの設定を気にせず使え
fixed
fixed の場合
の場合
るため使い勝手がよい。absolute は親のボックスが static 以外の値
を持っていれば、親の左上を基準として位置プロパティ通りに配置
するという指定である。親が position を持たない時は、ブラウザの
div#box {
div#box {
position: absolute;
position: absolute;
top: 200px;
top: 200px;
}
}
表示領域全体の左上が基準だ。fixed は、absolute と同じ条件で位
置を決める方法だが、スクロールアウトせず常に表示領域上で位置
をキープする指定方法となる。
［CSS style］
02
52
relative
relative の場合
の場合
import で管理に配慮
index.html
03
1 固定ナビゲーションを持つコーポレートサイトスタイル
2. div#container
a position プロパティの値の種類
a
53
07.1.15 10:53:30 PM