【技術書まとめ】HTML&CSS コーディング・プラクティスブック 3 実践シリーズ

引き続き、現在のCSSの基本を再確認するために本書を手に取った。

作成したデモサイト

全体のフォントをWindowsでは「メイリオ」、macOS/iOSでは「ヒラギノ角ゴ」にする

body {
 font-family: sans-serif;
}

after擬似要素を使って幅いっぱいの背景画像を表示する

.header {
  position: relative;
}

.header::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-image: url(img/candy.jpg);
  background-size: cover;
  background-position: center;
}

border-imageでsvg画像を指定して飾り罫を表示する

.site {
  border: solid 1px currentColor;
  border-image: url(img/border.svg) 68 / 40px / 20px;
}

デスクトップサイズで表示する場合のテキストの最大サイズを指定する

• モバイルでも間延びしたテキストにならないように設定したほうがいい

@media (min-width: 768px) {
  .text {
    max-width: 567px;
    margin: auto;
  }
}

装飾は擬似要素で表現する

/* コンテンツの視線誘導をする縦の罫線 */
.site::after,
.msg::before,
.msg::after {
  content: '';
  display: block;
  width: 1px;
  height: var(--whiteline);
  margin: 0 auto;
  background-color: #ffffff;
}

:root {
  --whiteline: 100px;
}

/* 本文前のアイコン */
.text::before {
  content: url(img/candy.svg);
  display: block;
  margin-bottom: 18px;
}

モバイルでは2カラム、PCでは3カラム表示にする

.photos ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 452px; /* モバイルでの最大幅を指定しておく */
  margin: auto;
  gap: 15px;
}

.photos li {
  width: calc((100% - 15px) / 2); /* 間の余白を15pxにする */
}

@media (min-width: 768px) {
  .photos ul {
    max-width: 874px; /* PCでの最大幅を指定しておく */
    margin: auto;
  }

  .photos li {
    width: calc((100% - (20px * 2)) / 3); /* 3カラムだと2つ余白が入る */
    margin-bottom: 20px;
  }
}

ヘッダー画像をフェードインで表示する

.header::after {
  animation: fade 3s ease-in-out 2s backwards;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}