コード

HTML

<header> <a href="https://global.atserver186.jp"> <img src="https://global.atserver186.jp/Grobal/Logo/Logo_darkmode.png" alt="ATSERVER" style="width:100px;height:auto;"> </a> <nav class="nav"> <ul> <a href="https://global.atserver186.jp/index.html" class="btn1">ホーム</a>  <a href="https://global.atserver186.jp/Grobal/List_of_services/index.html" class="btn1">サービス一覧</a>  <a href="https://global.atserver186.jp/Grobal/Software/index.html" class="btn1">ソフトウェア</a>  <a href="https://global.atserver186.jp/Grobal/Administrator_info/index.html" class="btn1">管理者について</a>  <a href="https://backup.atserver186.jp/inquiry/index.html" class="btn1">お問い合わせ</a>            </ul> </nav> </header>

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; /* ヘッダーを前面に固定 */ } .btn1{ color: white; text-decoration: none;/*リンクの下線を消すやつ*/ } .nav { display: flex; justify-content: flex-end; align-items: center; width: 100%; }