css3のflexboxを使うと、ヘッダ・フッタ・３カラムが簡単に実装出来る。ドットインストールの有料動画(一ヶ月1080円)が分かりやすかったので課金！

css3のflexboxを使うと、ヘッダ・フッタ・３カラムが簡単に実装出来る。ドットインストールの有料動画(一ヶ月1080円)が分かりやすかったので課金！
https://dotinstall.com/lessons/basic_flexbox_v2/52811

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>ヘッダ・フッタ・３カラム</title>
  <style>
html {
  height: 100%; /* 縦方向に画面一杯に広げる */
}

body {
  margin: 0;
  display: flex; /* レスポンシブ */
  flex-direction: column; /* ヘッダ・メイン・フッタの順に並べて、余白を作らない */
  height: 100%; /* 縦方向に画面一杯に広げる */
}

header {
  background: pink;
}

.container {
  display: flex; /* 横方向へ */
  flex: 1; /* ヘッダ・フッタ以外の余白部分は全部使う */
}

main {
  background: skyblue;
  flex: 1; /* nav・aside以外の余白部分は全部使う */
}

nav {
  background: tomato;
  width: 100px;
  order: -1; /* デフォは0なので、一番左に表示 */
}

aside {
  background: orange;
  width: 100px;
}

footer {
  background: silver;
}
  </style>
</head>
<body>
  <header>Header</header>
  <div class="container">
    <main>Main</main>
    <nav>Nav</nav>
    <aside>Aside</aside>
  </div>
  <footer>Footer</footer>
</body>
</html>

<!DOCTYPE html>

<head>

<style>

html {

height: 100%; /* 縦方向に画面一杯に広げる */

}

body {

margin: 0;

display: flex; /* レスポンシブ */

flex-direction: column; /* ヘッダ・メイン・フッタの順に並べて、余白を作らない */

height: 100%; /* 縦方向に画面一杯に広げる */

}

header {

background: pink;

}

.container {

display: flex; /* 横方向へ */

flex: 1; /* ヘッダ・フッタ以外の余白部分は全部使う */

}

main {

background: skyblue;

flex: 1; /* nav・aside以外の余白部分は全部使う */

}

nav {

background: tomato;

width: 100px;

order: -1; /* デフォは0なので、一番左に表示 */

}

aside {

background: orange;

width: 100px;

}

footer {

background: silver;

}

</style>

</head>

<body>

<header>Header</header>

<aside>Aside</aside>

</div>

<footer>Footer</footer>

</body>

</html>

関連記事