番外編：画像を斜めに表示する練習

DEVELOPMENT
都市開発

私たちは、明るい経済社会を実現するための都市・
地域づくりという観点から未来に残していけるような
都市作りを行っていきます。

ポイント

疑似要素（after）で白いボックスを作りテキストブロックの後ろに配置して、画像の上に重さなったようにみせる
「transform: skewX(-18deg);」で角度をつけて平行四辺形にする
positionとrightで画像の上に斜めに重なるように左にずらす

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>【コーディング練習】画像を斜めに表示する練習</title>
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Heebo:wght@400;700&family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="content">
  <div class="text-block">
    <div class="text-area">
    <h2 class="title">
      <span class="en">DEVELOPMENT</span><br>
      <span class="ja">都市開発</span>
    </h2>
    <p class="copy">
    私たちは、明るい経済社会を実現するための都市・<br>
    地域づくりという観点から未来に残していけるような<br>都市作りを行っていきます。
    </p>
    </div>
  </div><!-- /.text-block -->
  <div class="image-block">
    <img src="img/development.jpg" alt="">
  </div><!-- /.image-block -->
</div><!-- /.content -->
</body>
</html>

@charset "UTF-8";

/* ----------------------------------------
  reset
---------------------------------------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul, li {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
  border: none;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}


/* ----------------------------------------
  body
---------------------------------------- */
body {
  color: #333;
  font-size: 16px;
  font-family: 'Noto Sans JP', serif;
  line-height: 1.0;
}


/* ----------------------------------------
  layout
---------------------------------------- */
.content {
  margin: 100px auto;
}
  .text-block {
    margin-bottom: 20px;
    padding: 0 16px;
  }
  .text-block .title {
    margin-bottom: 56px;
  }
    .title .en {
      margin-bottom: 12px;
      font-size: 36px;
      font-family: 'Heebo', sans-serif;
      letter-spacing: 3.2px;
    }
    .title .ja {
      margin-bottom: 56px;
      font-size: 14px;
      font-family: 'Heebo', sans-serif;
      letter-spacing: 3.2px;
    }
  .copy {
    font-size: 14.6px;
    line-height: 1.5;
    letter-spacing: 2.5px;
  }
  .copy > br {
    display: none;
  }
.image-block > img {
  width: 100%;
  height: 500px;
  object-fit: cover;
}

@media screen and (min-width: 768px) {
  .content {
    display: grid;
    grid-template-columns: 35% 65%;
  }
  .text-block {
    position: relative;
  }
    .text-block::after {
      content: "";
      width: 200px;
      height: 500px;
      background: #fff;
      position: absolute;
      right: -80px;
      top: 0;
      transform: skewX(-18deg);
    }
      .text-block > .text-area {
        position: absolute;
        top: 60px;
        left: 60px;
        z-index: 1000;
      }
        .title .en {
          font-size: 70px;
          font-family: 'Heebo', sans-serif;
          letter-spacing: 3.2px;
        }
      .copy {
        font-size: 14.6px;
        line-height: 1.5;
        letter-spacing: 2.5px;
      }
      .copy > br {
        display: block;
      }
}