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

引き続き現在のCSSを整理するために本書を手に取った。

作成したデモサイト

PCサイズのときだけ改行する

h1 br {
  display: none;
}

@media (min-width: 768px) {
  h1 br {
    display: inline;
  }
}

画像の基本設定と高さ固定のレスポンシブ対応

figure {
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

aタグをinline-blockにした基本のボタン

.btn {
  display: inline-block;
  margin-top: 40px;
  padding: 10px 40px;
  border-radius: 4px;
  background-color: #f1a816;
  color: #ffffff;
  font-size: 16px;
}

横幅の最大値を32文字分にする（レスポンシブ対応含む）

.msg p {
  max-width: 32.2em;
  margin-left: auto;
  margin-right: auto;
  font-size: 12px;
}

@media (min-width: 768px) {
  .msg p {
    font-size: 16px;
  }
}

max-widthとmargin:0 auto;で中央に配置する

.msg p {
  max-width: 32.2em;
  margin: 0 auto;
}

ヒーロー見出しの改行を有効化する

.hero h1 br {
  display: inline;
}

PCサイズのときには順序を入れ替えた横並びにする

@media (min-width: 768px) {
  .hero {
    display: flex;
    flex-direction: row-reverse;
    max-width: 1088px;  /*　最大幅を指定する */
    margin: 0 auto 74px;
    padding: 0 20px;  /* 最低限の余白をつくっておく */
  }
}

横並びにしたテキストdivのサイズを固定して画像を伸縮させる

@media (min-width: 768px) {
  .hero {
    display: flex;
    flex-direction: row-reverse;
    max-width: 1088px;
    margin: 0 auto 74px;
    padding: 0 20px;
  }

  .hero img {
    height: 100%;  /* 画像サイズをテキストdivと合わせるように可変させる */
  }

  .hero .text {
    flex: 0 0 485px;  /* テキストdivの幅を固定する */
    margin: 110px 0 39px;
  }
}

最後の要素以外にmargin-bottomをつける

.sys:not(:last-child) {
    margin-bottom: 54px;
}

幅1088pxの場合に幅126pxとしたいが、レスポンシブで画面が小さくしたときにテキストが詰まってしまう

• 126/1088*100の12%として余白を設定する

  .sys .text {
    margin-right: 12%; /* 126px -> 12% に変更した */
  }