コード

HTML

CSS

body{
            padding-top: 60px;
        }
        header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 30px;
        background-color: #212121;
        display: flex;
        align-items: center;
        padding: 10px;
        z-index: 1000; /* ヘッダーを前面に固定 */
        }
        .btn_ATS{
        color: white;
        text-decoration: none;/*リンクの下線を消すやつ*/
        }
        
        .nav {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: 100%;
        }
    
        .menu-toggle {
      font-size: 1.5em;
      background: none;
      border: none;
      color: white;
      cursor: pointer;
      display: none; /* デフォルトでは非表示 */
      margin-left: auto; /* 右寄せ */
    }
    
    .nav-menu {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      width: 100%;
    }
    
    .nav-menu ul {
      list-style: none;
      display: flex;
      gap: 20px;
      padding: 0;
    }
    
    .nav-menu a {
      text-decoration: none;
      color: white;
    }
    
    /* 画面幅が768px以下になったらメニューを隠し、ハンバーガーを表示 */
    @media (max-width: 768px) {
      .menu-toggle {
        display: block;
        position: absolute;
        right: 20px; /* 右端に配置 */
        top: 50%;
        transform: translateY(-50%);
      }
    
      .nav-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background: #333;
      }
    
      .nav-menu ul {
        flex-direction: column;
        text-align: center;
        padding: 0;
      }
    
      .nav-menu a {
        display: block;
        padding: 10px;
        color: white;
      }
    
      .nav-menu.show {
        display: flex;
      }
    }

コード

HTML

CSS

javascript