webページの基本レイアウト - 小さなことからこつこつと。

よくあるレイアウト
背景色が全体に反映されない
- HTML
- CSS
- 実際の画面
背景色を全体に反映
- HTML
- CSS
- 実際の画面
課題
- サイドバーを固定してスクロール
サイドバーを固定してスクロール（解決！）

よくあるレイアウト

よく見るような、サイドバーのあるページの大枠を作成します。 f:id:bonoponz:20200424121731j:plain

背景色が全体に反映されない

私が苦戦したのが、背景色を全体に反映したいのに、サイドバーもしくはメインの内容量分しか背景色が反映されず、以下のようになっていました。 f:id:bonoponz:20200424125435j:plain

このときのコードを見てみましょう。

HTML

<body>
    <div class="wrapper">
        <div class="sidebar">
            <nav>
                <ul>
                    <li><a href="">sidebar</a></li>
                    <li><a href="">sidebar</a></li>
                    <li><a href="">sidebar</a></li>
                    <li><a href="">sidebar</a></li>
                    <li><a href="">sidebar</a></li>
                    <li><a href="">sidebar</a></li>
                    <li><a href="">sidebar</a></li>
                </ul>
            </nav>
        </div>
        <div class="mainContents">
            <div class="mainHeader">
                <span>mainHeader</span>
            </div>
            <div class="mainBody">
                <span>mainBody</span>
            </div>
        </div>
    </div>
</body>

CSS

.wrapper {
    display: flex;
}

.sidebar {
    background: #ffcbcc;
    min-width: 200px;
    text-align: center;
}

.sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mainContents {
    margin: 0;
    width: 100%;
}
.mainHeader {
    text-align: center;
    background: #ffa877;
}
.mainBody {
    background: #bdf0e4;
}

実際の画面

f:id:bonoponz:20200424124138j:plain

あああ。素人感丸出しですね。では全体に反映させてみましょう！

背景色を全体に反映

HTML

変更なし。

CSS

.wrapper {
    display: flex;
}

.sidebar {
    background: #ffcbcc;
    min-width: 200px;
    min-height: 100vh;  // 追加
    text-align: center;
}

.sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mainContents {
    margin: 0;
    width: 100%;
}
.mainHeader {
    text-align: center;
    background: #ffa877;
}
.mainBody {
    min-height: 100vh;  // 追加
    background: #bdf0e4;
}

上記のようにmin-height: 100vh;を追記するだけ！！

実際の画面

f:id:bonoponz:20200424124250j:plain

いかがでしょうか。あとはお好きにフォントなどの体裁を整えれば、バッチリです。

課題

サイドバーを固定してスクロール

~~これなかなか難易度が高く、まだ実装できません。できたらここに追記する予定です。~~

サイドバーを固定してスクロール（解決！）

.sidebar {
    position: fixed;　// 追加
    overflow-y: scroll;　// 追加
    background: #ffcbcc;
    min-width: 200px;
    min-height: 100vh;
    text-align: center;
}