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

現在のHTML&CSSを整理するために読んだ。参考になったコードをメモ。

作成サイト

参考になったコード

CSSでハンバーガーメニューを作成する

<button class="nav-button" type="button">
    <span class="sr-only">MENU</span>
</button>

/* スクリーンリーダー用のテキスト */
.sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* ナビゲーションボタン */
.nav-button {
  box-sizing: content-box;
  padding: 0;
  outline: none;
  border: none;
  background: none;
  width: 20px;
  height: 14px;
  cursor: pointer;
  color: #2e5180;
}


.nav-button::before {
  transform: translateY(-5px); /* 線の間隔の調整 */
  box-shadow: 0 6px currentColor; /* 中央の線は上の線の影として表示している
}

/* 上下2本の線 */
.nav-button::before,
.nav-button::after {
  content: '';
  display: block;
  height: 2px; /* 太さ */
  background-color: currentColor;
  transform: translateY(5px);
}

/* ナビゲーションボタン（閉じるボタン) */
.nav {
  ...
  left: 100%;
  ...
  transition: left 0.5s;
}

html, body {
  overflow-x: hidden; /* 画面外のオーバーレイを表示されないようにする */
}

.nav-button::before {
  ...
  transition: 0.3s ease-in-out;
}

.open .nav-button {
  z-index: 1000;
  color: #ffffff;
}

.open .nav-button::before {
  transform: translateY(1px) rotate(-45deg);
  box-shadow: none;
}

.open .nav-button::after {
  transform: translateY(-1px) rotate(45deg);
}

/* iOS 12.x対応 */
.open .form {
  display: none;
}

.open nav {
  left: 0;
}

<button type="button" class="nav-button" onClick="navFunc()">...

<script>
  function navFunc() {
    document.querySelector('html').classList.toggle('open');
}
</script>

.containerとメディアクエリでコンテンツ全体の横幅を調整する

.service {
  padding: 67px 0; /* 上下の余白は大元のクラスにつける */
}

.container {
  width: 84%;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .container {
    width: 91%;
    max-width: 1240px; /* デザインカンプのPC表示の幅を最大幅に指定している */
  }
}

単独の要素にflexboxを使い、下配置にしていっぱいに広げる

<section class="hero">
  <div class="catch">
      <h1><img src="img/hero.svg" alt="BB Assistant Company" /></h1>
      <p>縁の下の力持ちとしてお仕事を支えます</p>
  </div>
</section>

.hero {
  display: flex;
}

.hero .catch {
  flex: auto; /* 幅いっぱいに広げる */
  align-self: flex-end; /* 下配置にする */
  padding: 33px 0;
  background-color: rgba(255, 255, 255, 0.76);
}

デスクトップサイズのときの最大幅を指定してテキストの折り返しを調整する

@media (min-width: 900px)
.message h2 {
    max-width: 480px; /* 最大幅を指定 */
    margin: 0 auto; /* 中央に配置 */
}

最後のアイテム以外にスタイルを適用する

.detail:not(:last-child) {
    margin-bottom: 67px;
}

幅が一定のaタグボタン

.btn {
  display: block; /* aタグなのでblockにする */
  width: 208px;
  margin: 0 auto;
  padding: 11px 11px 13px; /* 横にも上マージンと同じ余白を入れる */
  box-sizing: border-box; /* 要素の幅と高さにpaddingとborderを含める */
  border: solid 2px currentColor;
  border-radius: 24px;
  color: #2e5180;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

余白が固定幅の横並びにする

@media (min-width: 900px) {
  .details {
    display: flex;
    margin-top: 75px;
  }
  .detail {
    flex: 1; /* マージンを除いた残りのスペースを1:1:1に等分割する */
    margin-right: 3.22%; /* 横並びにした場合の余白 */
  }
  .detail:first-child {
    margin-left: 3.22%;
  }
  .detail:not(:last-child) {
    margin-bottom: 0; /* モバイル版の下マージンを削除 */
  }
}

縦並びの要素をテキスト量が変わっても揃える

.detail {
display: flex;
flex-direction: column;
}

.detail .btn {
margin-top: auto;
}

隣接するpタグのみにクラスを適用する

.contact h2 + p {
  font-size: 14px;
  line-height: 2.17;
}

フォームの表示整形

.form input[type='text'],
.form input[type='email'],
.form textarea {
  width: 100%;
  margin-bottom: 17px;
  padding: 12px 20px 14px;
  border: solid 1px #cdd6dd;
  box-sizing: border-box;
  border-radius: 0;
  -webkit-appearance: none;
/* フィールド内のテキスト表示の指定 */
  color: #333333;
  font-family: 'Noto Sans JP', sans-serif; 
  font-size: 16px;
}

.form ::placeholder {
  color: #CDD6DD;
  opacity: 1;
}

左右の余白を%で可変にして対応する

.contact .container {
  padding: 96px 9% 62px;
  box-sizing: border-box;
}

横並びにした要素の一方だけ可変にする

  .contact .text {
  flex: 0 0 auto; /* 固定する */
}

.contact .form {
  flex: 1 1 auto; /* 可変にする */
  max-width: 457px; /* 最大幅だけ指定してそれより大きくならないようにする */
  margin-left: 1em; /* 左の要素と最低限の余白を確保する */
}

重なりをつくる

.contact {
  position: relative; /* z-indexだけでは重ならない */
  z-index: 2;
}

オーバーレイの全画面表示にする

/* オーバーレイの高さを100vhにしたときのスクロールを防ぐ */
html,
body {
  heihgt: 100%;
  overflow: hidden;
}
.header {
  position: relative;
}

.nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  color: #ffffff;
}

サポートツール

• HTML構造をチェックする
  • https://validator.w3.org/nu/
• レスポンシブ確認
  • https://ui.dev/amiresponsive