Nagashima Laboratory

CSSによるページレイアウト2（position）

レイアウト２：Positionを使ったレイアウト

フォルダ：layout_sample_02

一部の要素にpositionを使い、固定表示をします

準備

  • layout_sample_01の完成時のHTML・CSSをそのまま使い、追記・修正します
  • layout_sample_01を作成していない場合は、先に作成してください

▼style.cssへの追記・修正

header {
  /* background: #EEE; */
  position: relative;
}

header h1 {
  /* text-align: center; */
  padding: 1rem;
  position: absolute;
  top: 0;
  left: 1rem;
}

nav {
  position: absolute;
  top: 2rem;
  right: 1rem;
}
  • 不要になるプロパティは/**/を使ってコメントアウトしています
  • visual studio codeでは、コマンド + /（スラッシュ）でコメントアウトができます

各プロパティの意味

  • position
    • static：何も指定していないときはstaticになります。通常通りの配置です
    • relative：相対配置。absoluteを使用したときの基準点になります
    • absolute：絶対配置。
    • fixed：固定表示
    • sticky：スクロールした際にブラウザの上部に固定表示されます
  • top/right/left/bottom：absoluteやfixedを指定したときの座標を指定します。topとrightなど、2箇所の座標を指定することで位置が決まります

【応用】スクロールしてもheaderが上部に残るようにする

stickyを使い、スクロールした際にもheaderがブラウザの上部に固定表示されるように設定します

▼index.htmlへの追記

<header>
  <div class="sticky">
    <h1>Site Title</h1>
    <nav>
      <ul>
	<li><a href="#">HOME</a></li>
	<li><a href="#">ABOUT</a></li>
	<li><a href="#">WORKS</a></li>
	<li><a href="#">CONTACT</a></li>
      </ul>
    </nav>
  </div>
  <img src="images/main-visual.png" alt="メインビジュアル">
</header>

▼style.cssへの追記・修正

.sticky {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000;
}

【応用】ページ上部に戻るリンクを設置する

fixedを使い、ページ上部に戻るボタンを画面右下に常駐させます

▼index.htmlへの追記

    <footer>
      <p>&copy; SampleSite</p>
    </footer>
    <a href="#" class="pagetop">▲</a>
  </div>

</body>
</html>

▼style.cssへの追記

a.pagetop {
  display: block;
  width: 50px;
  height: 50px;
  text-align: center;
  box-sizing: border-box;
  padding-top: 12px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: #666;
  color: #FFF;
  position: fixed;
  bottom: 0;
  right: 20px;
}

html {
  scroll-behavior: smooth;
}

各プロパティの意味

  • scroll-behavior
    • smooth：同じページ内でリンクによるスクロールが生じたときになめらかに移動するようになります
    • 各ブラウザの対応状況

参考リンク

() Category: 資料 Tags: