【ソースコード】番外編：positionの練習

style.css

style.css

@charset "UTF-8";

html {
  font-size: 100%;
}
body {
  background-color: #efeded;
  color: #35383a;
  font-family: 'Noto Serif JP', serif;
}
a {
  color: #35383a;
  text-decoration: none;
}
img {
  max-width: 100%;
}

/*
【要素の重ね合わせ（親要素）】
positionで要素を重ね合わせると高さがなくなるので、
高さを残したい場合は親要素で「height」を指定。
*/
.content {
  max-width: 1000px;
  height: 698px;
  margin: 100px auto;
  position: relative;
}
/*
【要素の重ね合わせ（子要素）】
「position: absolute;」と「left」で左に配置。
*/
.text {
  max-width: 680px;
  background-color: #fff;
  padding: 84px 160px 84px 84px;
  position: absolute;
  left: 0;
}
.text p {
  line-height: 1.8;
  margin-bottom: 35px;
}
/*
「display: inline-block;」で下線をテキスト幅に合わせる。
*/
.text .title {
  border-bottom: solid 1px #35383a;
  display: inline-block;
  font-size: 1.875rem;
  font-weight: normal;
  margin-bottom: 30px;
}
.text .large {
  font-size: 1.875rem;
}
/*
「display: inline-block;」でボタンをテキスト幅に合わせてから
paddingでサイズを調整。
「transition」で、ホバーをふわっとさせる。
（※transitionの詳細については調べてみてくださいね。）
*/
.text .btn {
  display: inline-block;
  border: solid 1px #35383a;
  border-radius: 30px;
  padding: 16px 50px;
  transition: all 0.3s ease;
}
.text .btn:hover {
  background-color: #efeded;
}
/*
【要素の重ね合わせ（子要素）】
「position: absolute;」と「top」「right」で、
親要素の上から140px、右から20pxに配置。
*/
.img {
  max-width: 400px;
  position: absolute;
  top: 140px;
  right: 20px;
}
/*
「vertical-align: bottom;」で、画像の下の隙間を消す。
「top」を指定してもOK。
（※画像の下の隙間を消す方法は、実務でもよく使うので
覚えておいてください。）
*/
.img img {
  vertical-align: bottom;
}

/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 1000px) {
  /*
  スマホ時はテキストエリアと画像を縦に並べるので、
  「position: static;」で位置の固定を解除する。
  「height: auto;」で高さの固定も解除する。
  */
  .content {
    height: auto;
    position: static;
    margin: 0;
  }
  .text {
    max-width: 100%;
    padding: 60px 20px;
    position: static;
  }
  .img {
    max-width: 100%;
    position: static;
  }
}