position: sticky

position: fixed

top, bottom

right, left

bottom

<div class="container01">
  <section class="section01">
    <article class="article">
      <h2>タイトル01</h2>
    </article>
    <article class="article">
      <h2>タイトル02</h2>
    </article>
    <article class="article">
      <h2>タイトル03</h2>
    </article>
  </section>
  <aside class="aside">
    <nav class="navigation">
      <ul>
        <li>・タイトル01</li>
        <li>・タイトル02</li>
        <li>・タイトル03</li>
      </ul>
    </nav>
  </aside>
</div>
<div class="container02">
  Container02
</div>
<button class="button">TOP</button>


.container01 {
  background-color: #1e90ff66;
  display: flex;
  justify-content: space-between;
}

.section01 {
  width: 65%;
  margin: 20px 0 60px 10px;
}

.article {
  margin-bottom: 10px;
  padding: 10px 10px 50px;
  background-color: #fff;
}

.aside {
  width: 30%;
  position: relative;
}

.navigation {
  display: inline-block;
  padding: 10px 20px 10px 10px;
  background-color: #fff;
   /* 問題1. ナビゲーションを固定 */
   /* この下に解答してください */
  position: sticky;
  top: 20px;
}

.navigation ul li {
  line-height: 1.5;
}

.container02 {
  height: 400px;
  padding: 30px 0 0 10px;
  background-color: #faf0e6;
}

.button {
  background-color: #ff6347;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  color: #fff;
  text-align: center;
  font-weight: 700;
  /* 問題2. ボタンの表示位置を固定 */
  /* この下に解答してください */
  position: fixed;
  right: 20px;
  bottom: 10px; 
}


.container01 {
  background-color: #1e90ff66;
  display: flex;
  justify-content: space-between;
}

.section01 {
  width: 65%;
  margin: 20px 0 60px 10px;
}

.article {
  margin-bottom: 10px;
  padding: 10px 10px 50px;
  background-color: #fff;
}

.aside {
  width: 30%;
  position: relative;
}

.navigation {
  display: inline-block;
  padding: 10px 20px 10px 10px;
  background-color: #fff;
   /* 問題1. ナビゲーションを固定 */
   /* この下に解答してください */
}

.navigation ul li {
  line-height: 1.5;
}

.container02 {
   height: 400px;
   padding: 30px 0 0 10px;
   background-color: #faf0e6;
}

.button {
  background-color: #ff6347;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  color: #fff;
  text-align: center;
  font-weight: 700;
  /* 問題2. ボタンの表示位置を固定 */
  /* この下に解答してください */
}

要素の表示位置を固定

position: relative

position: absolute

left

絶対配置の基準と指定

ラベルの位置を絶対配置に指定

inset

margin

margin: 10px 20px 30px 40px;

上記のような場合、余白は上が$(1)px、下が$(2)px、左が$(3)px、右が$(4)pxとなる。

モーダルウィンドウの実装

z-index

コンテンツの重なり順を指定

スタッキングコンテキスト

スタッキングコンテキストとz-index

カードに画像を重ねるレイアウトの実装

テキストの背景に画像を重ねるレイアウトの実装

ヘッダーを固定

スクロールの途中で要素を固定

CSSのpositionプロパティを活用し、要素を任意の位置に固定するテクニックを習得します。
モーダルウィンドウや画像の重ね合わせなど、実用的なケースを学びます。

0からWebサイト制作のコツを学び、案件獲得までに必要なスキルをキャッチアップします。