HTML･CSS｜分かりやすいレイアウトサンプル

1カラムのページ

index.html

<!--------------------------------------------------------->
<!--  body  -->
<!--------------------------------------------------------->
<body>
    <!--------------------------------------------------------->
    <!--  header    -->
    <!--------------------------------------------------------->
    <header>
        <h1>ヘッダー</h1>
    </header>
    <!--------------------------------------------------------->
    <!--  main    -->
    <!--------------------------------------------------------->
    <main>
        <h2>メインカラム</h2>
    </main>
    <!--------------------------------------------------------->
    <!--  footer    -->
    <!--------------------------------------------------------->
    <footer>
        <h3>フッター</h3>
    </footer>
</body>

styles.css

@charset "UTF-8";
*
{
    margin: 0;
    padding: 0;
}
body
{
    width: 100%;
}
header
{
    height: 130px;
    background-color: skyblue;
}
main
{
    height: 450px;
    background-color: pink;
}
footer
{
    height: 77px;
    background-color: lightgreen;
}
h1
{
    text-align: center;
    line-height: 130px;
}
h2
{
    text-align: center;
    line-height: 450px;
}
h3
{
    text-align: center;
    line-height: 77px;
}

ブラウザー表示

2カラム左サイドバー

index.html

<!--------------------------------------------------------->
<!--  body  -->
<!--------------------------------------------------------->
<body>
    <!--------------------------------------------------------->
    <!--  header    -->
    <!--------------------------------------------------------->
    <header>
        <h1>ヘッダー</h1>
    </header>
    <!--------------------------------------------------------->
    <!--  main    -->
    <!--------------------------------------------------------->
    <main>
        <div id="content">
            <div id="leftcolumn">
                <h2>左サイドバー</h2>
            </div>
            <div id="maincolumn">
                <h2>メインカラム</h2>
            </div>
        </div>
    </main>
    <!--------------------------------------------------------->
    <!--  footer    -->
    <!--------------------------------------------------------->
    <footer>
        <h3>フッター</h3>
    </footer>
</body>

styles.css

@charset "UTF-8";
*
{
    margin: 0;
    padding: 0;
}
body
{
    width: 100%;
}
header
{
    height: 130px;
    background-color: skyblue;
}
main
{
    height: 450px;
}
footer
{
    height: 77px;
    background-color: lightgreen;
}
h1
{
    text-align: center;
    line-height: 130px;
}
h2
{
    text-align: center;
    line-height: 450px;
}
h3
{
    text-align: center;
    line-height: 77px;
}
#content
{
    display: flex;
}
#leftcolumn
{
    width: 25%;
    background-color: yellow;
}
#maincolumn
{
    width: 75%;
    background-color: pink;
}

ブラウザー表示

2カラム右サイドバー

index.html

<body>
    <!--------------------------------------------------------->
    <!--  header    -->
    <!--------------------------------------------------------->
    <header>
        <h1>ヘッダー</h1>
    </header>
    <!--------------------------------------------------------->
    <!--  main    -->
    <!--------------------------------------------------------->
    <main>
        <div id="content">
            <div id="maincolumn">
                <h2>メインカラム</h2>
            </div>
            <div id="rightcolumn">
                <h2>右サイドバー</h2>
            </div>
        </div>
    </main>
    <!--------------------------------------------------------->
    <!--  footer    -->
    <!--------------------------------------------------------->
    <footer>
        <h3>フッター</h3>
    </footer>
</body>

styles.css

@charset "UTF-8";
*
{
    margin: 0;
    padding: 0;
}
body
{
    width: 100%;
}
header
{
    height: 130px;
    background-color: skyblue;
}
main
{
    height: 450px;
}
footer
{
    height: 77px;
    background-color: lightgreen;
}
h1
{
    text-align: center;
    line-height: 130px;
}
h2
{
    text-align: center;
    line-height: 450px;
}
h3
{
    text-align: center;
    line-height: 77px;
}
#content
{
    display: flex;
}
#rightcolumn
{
    width: 25%;
    background-color: yellow;
}
#maincolumn
{
    width: 75%;
    background-color: pink;
}

ブラウザー表示

3カラム左右サイドバー

index.html

<!--------------------------------------------------------->
<!--  body  -->
<!--------------------------------------------------------->
<body>
    <!--------------------------------------------------------->
    <!--  header    -->
    <!--------------------------------------------------------->
    <header>
        <h1>ヘッダー</h1>
    </header>
    <!--------------------------------------------------------->
    <!--  main    -->
    <!--------------------------------------------------------->
    <main>
        <div id="content">
            <div id="leftcolumn">
                <h2>左サイドバー</h2>
            </div>
            <div id="maincolumn">
                <h2>メインカラム</h2>
            </div>
            <div id="rightcolumn">
                <h2>右サイドバー</h2>
            </div>
        </div>
    </main>
    <!--------------------------------------------------------->
    <!--  footer    -->
    <!--------------------------------------------------------->
    <footer>
        <h3>フッター</h3>
    </footer>
</body>

styles.css

@charset "UTF-8";
*
{
    margin: 0;
    padding: 0;
}
body
{
    width: 100%;
}
header
{
    height: 130px;
    background-color: skyblue;
}
main
{
    height: 450px;
}
footer
{
    height: 77px;
    background-color: lightgreen;
}
h1
{
    text-align: center;
    line-height: 130px;
}
h2
{
    text-align: center;
    line-height: 450px;
}
h3
{
    text-align: center;
    line-height: 77px;
}
#content
{
    display: flex;
}
#leftcolumn
{
    width: 20%;
    background-color: yellow;
}
#rightcolumn
{
    width: 20%;
    background-color: yellow;
}
#maincolumn
{
    width: 60%;
    background-color: pink;
}