HTML TIPS & TRICKS 2000/08
固定配置を制する

QUESTION 2　リンク集を常に表示させろ！

　QUESTION 1に加えて、リンク集の枠組みを表示します。もちろん、フレームなどによる方法は使えません。スタイルシートのみによる再現です。

　枠組みはDIVエレメント *1で構成し、CSS2で追加されたプロパティで表示位置を固定します。 なお、このプロパティは2000/07/10現在、IEではサポートされていません。
　このサンプルの設定値は以下の通り。 


BODY                                /* 表示全体に対する指定 */
{
    color:#333322;
    background-color:#FFFFCC;
    background-image:url(logo.png); /* 背景イメージファイルの指定 */
    background-repeat:no-repeat;    /* 繰り返さない設定 */
    background-position:5px 14em;   /* 表示位置を左から5ピクセル　上から14emに */
    background-attachment:fixed;    /* ウインドウ内での位置固定 */
    margin-top:5px;                 /* 左マージンは5ピクセル */
    margin-left:5px;                /* 左マージンは5ピクセル */
}

#links                              /* リンクリスト */
{
    color:#444444;
    background-color:white;
    width:300px;                    /* 幅は300ピクセル */
    height:13em;                    /* 高さはmの13文字分 */
    border-style:solid;             /* ボーダーはベタ */
    border-color:black;             /* ボーダーの色は黒 */
    border-width:1px;               /* ボーダーの幅は1ピクセル */
    float:left;                     /* テキストは右に回りこませる */
    position:fixed;                 /* 表示位置は固定 */
}

.text                               /* 通常のテキスト部分 */
{
    margin-left:305px;              /* 左マージンは305ピクセル */
}

　マージンの値は画像ファイルによって変わります。今回は300*200なので、 それに合わせてマージンを300+BODYの左マージンとしました。リンク集の枠のサイズもこれに合わせてあります。 画像ファイルの表示位置が X=5, Y=14em になっているので、 背景画像はマージンの隙間に合わせる形で表示されます。

　リンク集の枠は前述のようにDIVによって構成してあります。デザイン的要素はもちろん、そのサイズもCSSで指定しています。
　なお、枠組みのスタイルシートがクラスではなくIDになっているのは、このファイルでは唯一のスタイル定義となるからです。 テキスト部分がクラスを用いているのは、IDは重複が許されないためです。

　今回重要なのは、#links の最後で使用しているプロパティ"position"です。これが新しくCSS2から導入されたもので、 メディアタイプがSCREEN *2のときには、viewpoint *3に対しての絶対位置扱いになります。これによって、 リンク集の枠組みは最初に表示された位置から動かなくなり、スクロールしても常に表示されます。

　マージンは、クラスtextに対して指定するようにしました。 BODYエレメント *1に対して直接行ってもよかったのですが、なぜかセンタリングされてしまったため、 その対策として別々に指定するようにしたためです。

*1 エレメント
　一般にはタグと呼ばれていますが、正しくはエレメント、または要素と言います。 エレメントとは、開始タグと終了タグに挟まれた部分のことです。
　詳しくは、HTMLの注意事項の解説を参照してください。
*2 SCREEN
　CSS2からは表示するメディアの種類によってスタイルを定義することが出来ます。いくつかのメディアタイプが定義されていて、 SCREENはページの概念がなくスクロールが可能なメディアで、コンピュータの画面がこれに当たります。 このほかには、TV（家庭用テレビ）・PROJECTION（プロジェクタ）・PRINT（紙やページ概念のあるコンピュータ画面）・ BRAILLE（ページ概念のない点字）・AURAL（音声出力）などがあります。
*3 viewpoint
　CSS2で新たに導入された概念で、連続メディアの表示されている範囲のことです。

トップページ