CSS: 課題解答

positionを使った固定幅２段組(左右入れ替え、menu：右静的配置、contents：左絶対配置)のスタイルを作成せよ。

#contentsが絶対配置の基本形を考えます。

1a 基本形 - 配置サンプルファイル style.css

#block {
    position:relative; /* 基準点に */
    margin:10px; /* 上下との余白調整 */
}
#menu {
    margin:0;
}
#contents {
    position:absolute;
    top:0px;
    left:0px;
    margin:0;
}
#menu2 { display:none; }

重なっている静的配置の#menuを右に動かし、全体の調整をします。

1b 解答 - 配置サンプルファイル style.css

#page { width:584px; }
#block {
    position:relative; /* 基準点に */
    margin:10px; /* 上下との余白調整 */
}
#menu {
    margin:0;
    margin-left:412px;
}
#contents {
    position:absolute;
    top:0px;
    left:0px;
    margin:0;
}
#menu2 { display:none; }

positionを使った固定幅３段組（menu：左絶対配置、contents：中央静的配置、menu2：右絶対配置）のスタイルを作成せよ。

左右のメニューが絶対配置となる基本形を考えます。

2a 基本形 - 配置サンプルファイル style.css

#block {
    position:relative; /* 基準点に */
    margin:10px; /* 上下との余白調整 */
}
#menu {
    position:absolute;
    top:0px;
    left:0px;
    margin:0;
}
#contents {
    margin:0;
}
#menu2 {
    position:absolute;
    top:0px;
    left:0px;
    margin:0;
}

重なっている静的配置の#contentsを右に動かし、絶対配置の#menu2を右に動かし、全体の調整をします。

2b 解答 - 配置サンプルファイル style.css

#page { width:746px; }
#block {
    position:relative; /* 基準点に */
    margin:10px; /* 上下との余白調整 */
}
#menu {
    position:absolute;
    top:0px;
    left:0px;
    margin:0;
}
#contents {
    margin:0;
    margin-left:162px;
}
#menu2 {
    position:absolute;
    top:0px;
    right:0px;
    margin:0;
}

このサンプルでは#contentsの縦が短いため#footerがメニューと重なってしまいます。

左から順に#menu, #menu2, #contentsの順で３段組を作成せよ。

#menuを左、,#contentsと#menu2を右に寄せます。右寄せする２つのブロックの間に10pxのマージンが必要となるので、どちらかにマージンを設定します。

3 解答 - 配置サンプルファイル style.css

#page {
    width:746px;
}
#block {
    margin:10px;
}
#menu {
    float:left;
    margin:0;
}
#contents {
    float:right;
    margin:0;
    margin-left:10px; /* #menu2との間のマージン*/
}
#menu2 {
    float:right;
    margin:0;
}
#block:after {
    content: "";
    display: block;
    clear: both; /* 左右の回り込みを解除 */
}

左から順に#contents, #menu, #menu2の順で３段組を作成せよ。#menuは絶対配置を使うこと。

#contentsを左、#menu2を右に寄せます。中央に#menuを入れる余白を確保しておき、絶対配置でおきます。

4 解答 - 配置サンプルファイル style.css

#page {
    width:746px;
}
#block {
    position:relative;
    margin:10px;
}
#menu {
    position:absolute;
    top:0;
    left:412px;
    margin:0;
}
#contents {
    float:left;
    margin:0;
}
#menu2 {
    float:right;
    margin:0;
}
#block:after {
    content: "";
    display: block;
    clear: both; /* 左右の回り込みを解除 */
}

３段組（menu：左固定幅絶対配置、contents：中央可変幅、menu2：右固定幅絶対配置)を作れ。

まずはメニューを絶対配置にした基本形を考えます。

5a 基本形 - 配置サンプルファイル style.css

#block {
    position:relative; /* 基準点に */
    margin:10px; /* 上下との余白調整 */
}
#menu {
    position:absolute;
    top:0px;
    left:0px;
    margin:0;
}
#contents {
    width:auto;
    margin:0;
}
#menu2 {
    position:absolute;
    top:0px;
    left:0px;
    margin:0;
}

#contentsの左右にマージンをとります。右にもマージンが必要なところが固定幅との違いです。また、#menu2を右から0の距離に指定します。

5b 解答 - 配置サンプルファイル style.css

#block {
    position:relative; /* 基準点に */
    margin:10px; /* 上下との余白調整 */
}
#menu {
    position:absolute;
    top:0px;
    left:0px;
    margin:0;
}
#contents {
    width:auto;
    margin:0;
    margin-left:162px;
    margin-right:162px;
}
#menu2 {
    position:absolute;
    top:0px;
    right:0px;
    margin:0;
}

３段組（先：左固定幅左寄せ、中：中央可変幅、後：右固定幅絶対配置)を作れ。

左の２段組を作り、#menu2が入るスペースを#contentsの右マージンとして確保して、#menu2を右から0の位置に絶対配置します。

6 解答 - 配置サンプルファイル style.css

#block {
    position:relative; /* 基準点に */
    margin:10px; /* 上下との余白調整 */
}
#menu {
    float:left;
    margin:0;
}
#contents {
    width:auto;
    margin:0;
    margin-left:162px;
    margin-right:162px;
}
#menu2 {
    position:absolute;
    top:0px;
    right:0px;
    margin:0;
}
#block:after {
    content: "";
    display: block;
    clear: both; /* 左右の回り込みを解除 */
}