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

QUESTION 1　ロゴを常に表示させろ！

　ロゴを左に表示して、右に文章を表示します。フレームやテーブルなどを使用したりせずに、CSS1のみで再現します。 ヒントを参考に、背景画像として表示してみました。
　なお、今回のロゴはShadeを使用して、独自に作成しました。

　CSS１の、background-image・background-repeat・background-position・background-attachmentを使用します。 このサンプルの設定値は以下の通り。

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

.text
{
    margin-left:305px;              /* 左マージンは305ピクセル */
}

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

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

エレメント

　一般にはタグと呼ばれていますが、正しくはエレメント、または要素と言います。 エレメントとは、開始タグと終了タグに挟まれた部分のことです。
　詳しくは、HTMLの注意事項の解説を参照してください。

トップページ