【技術書まとめ】CSSグリッドレイアウト デザインブック

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

Webデザインとは

• 3つの要素
  • レイアウト
  • レスポンシブ
  • HTMLと文書構造

雑誌風レイアウト

• 作成デモ
  • https://frabjous-biscuit-58c030.netlify.app/
• CSSグリッドなしで作成した場合の問題点
  • リーダー機能での抽出ができなくなる
  • 並び順が変わるので力技でレイアウトする必要が出てくる

fontawesomeのアイコンを丸で囲ったSNSアイコンをCSSで作成する

.post-sns a {
    font-size: 1.5em;
    color: #aaa;
    text-decoration: none;
    text-align: center;
    border: solid 1px #aaa;
    border-radius: 50%;
    display: block;
    width: 2em;
    height: 2em;
    line-height: 2em;
}

引用符をgridで横並びで表示してgapを指定する

.post-catch {
  quotes: "“" "”";
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 5px;
}

.post-catch::before {
  content: open-quote;
}

.post-catch::after {
  content: close-quote;
}

.post-catch::before,
.post-catch::after {
  color: #aaa;
  font-size: 2em;
  font-weight: 900;
}

基本はemで設定して、PCサイズ時に基本font-sizeを大きくしてレスポンシブ対応する

.post {
  font-size: 16px;
}

@media (min-width: 1000px) {
  .post {
    font-size: 20px;
  }
}

画面幅768pxか〜999pxまでのフォントサイズを、16px〜20pxで可変にする

@media (min-width: 769px) and (max-width: 999px) {
  .post {
    /* 1000px - 768px = 232px */
    font-size: calc(16px + 4 * (100vw - 768px) / 232);
  }
}

改行位置を指定する

<h1 class="post-title">夏の海の<wbr />アクティビティ</h1>

.post-title {
  word-break: keep-all;
}

フライヤー風レイアウト

• 作成デモ
  • https://wondrous-tulumba-a1a1d8.netlify.app/
• CSSグリッドなしで作成した場合の問題点
  • HTMLを維持したままCSSのみでレイアウトはできない
    • HTMLを変えないとレイアウトを変えることができない

h2のspan要素（小見出しのSPOTマーク）を丸で囲んで装飾する

.sec .spot {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    border: solid 1px #aaa;
    border-radius: 50%;
    box-sizing: border-box;
    display: block;
    width: 3.75em;
    height: 3.75em;
    line-height: 3.75em;
}

PC画面で中央のグリッドコンテンツを960pxにし、両サイドの余白を可変にする

@media (min-width: 1000px) {
  .post {
    --side: calc((100vw - 960px) / 2);
  }
}

装飾を縦書きにする

.post-series {
  display: block;
  writing-mode: vertical-rl;
  width: var(--side);  /* Safari 10.x用 */
}

画像をメインにしたレイアウト

• 作成したデモ
  • https://visionary-llama-14a9dc.netlify.app/
  • https://elegant-swan-cbf57e.netlify.app/
  • https://remarkable-caramel-cf5214.netlify.app/
• グリッドでやらない場合
  • 画像とテキストが連動しない
  • 画像の高さなどをJSで取得しなければならなくなる
  • 決めうちの数値を使わなければならなくなる
  • ブレークポイントがひたすら増えていく
  • レスポンシブ対応で、手法を全く変えなければならない時もある
  • メンテナンス性が落ちる

基本のCSSリセット

.post * {
  margin: 0;
}

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

height: 100%にした画像が再現なく大きくなるのをmax-heightで防ぐ

.orange-photo img {
  height: 100%;
  object-fit: cover;
  max-height: 600px;
}

PCサイズ1000px幅以上の場合は、両端の余白を可変にする（コンテンツは960px幅までとする）

@media (min-width: 1000px) {
  .burger {
    --side: calc((100vw - 960px) / 2);
  }
}

2つ目のp要素にnth-of-type()でスタイルを当てる

.peel-en p:nth-of-type(2) {
  font-size: 14px;
  font-weight: 300;
  width: 50%;
}

スマホサイズの場合にjustify-selfを解除して左右に引き伸ばす

@media (max-width: 767px)
.peel-jp-memo {
    justify-self: stretch;
    width: auto;
}

グリッドコンテナの横幅に応じて列の数を変える

ul {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-auto-rows: 70px;
}