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

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

# Webデザインとは

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


# 雑誌風レイアウト

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


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

```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を指定する

```css
.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を大きくしてレスポンシブ対応する

```css
.post {
  font-size: 16px;
}

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


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

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

## 改行位置を指定する

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

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


# フライヤー風レイアウト

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


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

```css
.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にし、両サイドの余白を可変にする

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

## 装飾を縦書きにする

```css
.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リセット

```css
.post * {
  margin: 0;
}

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

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

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

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

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

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

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

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

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

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

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