ページ内リンクで位置を調整する方法

プログラミングの勉強日記

2020年6月27日　Progate Lv.148
ポートフォリオ作成中
前回作成したwebページの調整をしている

ページ内リンクの作成

　<nav>を利用してナビゲーションを作成する。ナビゲーションはページ内外のリンクのことである。

<nav>
  <ul>
    <li><a href="#iceland">Iceland</a></li>
    <li><a href="#aurora">Aurora</a></li>
    <li><a href="#blueLagoon">BLUE LAGOON</a></li>
  </ul>
</nav>

<h1 id=aurora>Aurora in Iceland</h1>
<h1 id=iceland>Iceland</h1>
<h1 id=blueLagoon>BLUE LAGOON</h1>

　しかし、このままだと写真の上に書かれている文字がヘッダーと重なってしまって見えなくなってしまっている。なのでリンク先をもう少し下に指定したい。

ページ内リンクの位置を変更

CSSでpaddingやmarginを指定することでリンク先の位置を変えることができる。

#iceland, #aurora, #blueLagoon{
    padding-top:100px;
}

このように指定することでリンク先の位置を調整することができた。