サイドメニュー【position:fixed】

サイドメニューを固定するレイアウトページです。

レスポンシブ使用になっているので、横幅768px以上のブラウザで確認してね。

○index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <title>タイトルだよ</title>
    <meta name="description" content="ディスクリプションだよ">
    <meta name="keywords" content="キーワード1, キーワード2">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
  </head>
  <body>
    <!--header-->
    <header>
      <nav>
        <ul>
          <li><a href="#">トップ</a></li>
          <li><a href="#">コンテンツ1</a></li>
          <li><a href="#">コンテンツ2</a></li>
        </ul>
      </nav>
    </header>
    <main ontouchstart="">
      <div class="block"></div>
      <div class="block gray"></div>
      <div class="block green"></div>
      <div class="block red"></div>
    </main>
    <!--footer-->
    <footer>
      <p class="footerText">フッターだよ</p>
      <script src="js/jquery-2.0.0.min.js"></script>
      <script src="js/common.js"></script>
    </footer>
  </body>
</html>

・header、main、footerをわけて作成してください

○header.css

/*
header
*/
header {
  background-color: #ff8d8d; }
  @media screen and (min-width: 768px) {
    header {
      position: fixed;
      top: 0;
      width: 200px; } }

li a {
  text-decoration: none;
  color: #fff; }

・メニューを左側に固定するので、header全体にpositon:fixed;を指定する。

また、メニューの幅を指定する。

○index.css

@media screen and (min-width: 768px) {
  main {
    margin: 0 0 0 200px; } }

.block {
  width: 100%;
  height: 200px;
  background-color: #74ffdb; }

.block.gray {
  background-color: #dfdfdf; }

.block.green {
  background-color: #38ff38; }

.block.red {
  background-color: #ffc1c1; }

・headerにposition:fixed;を指定いるので、その右隣にmainをもってきたいのでmargin:0 0 0 200px;を指定し、mainコンテンツの左にheaderのメニュー幅を確保します。

○footer.css

/*
footer
*/
footer {
  background-color: #f8ff38; }
  @media screen and (min-width: 768px) {
    footer {
      margin: 0 0 0 200px; } }

.footerText {
  height: 200px;
  color: #444; }

・footerもメインコンテンツと同じようにしたいので、mainと同様にmarginを指定します。

あとは、通常通りコーディングしていけば、おっけーです。

今回は以上です。