HTML CSS 基礎 Part 01 -- 潰れないカードデザイン
Tags: css, flex
Published: 2023-01-05 14:15:38



## why

カードデザインで、文字数が多い場合でも崩れないものを作りたかった。

https://webtools.dounokouno.com/dummytext/

ダミーテキストはこちらのツールを使って生成した。

---

## 結論

1. max-width でカード内タイトルがカードからはみ出さなくなる。
2. min-height でカード内説明が増えても、文字が潰れなくなる。カードが自動で縦長になるので。
3. flex-shrink:0 で画面が横に狭くなった時も、左に表示されているタイトル部分が潰れなくなる。

---

# 通常の文字数でカードデザインを作る

通常の文字数の前提で、カードデザインを作ってみる

---

## html 構造

```html
<body>
  <div class="card-detail-info">
    <div class="header">
      <div class="update-date">2022-07-23</div>
      <div class="e-mail-addresses">taro@example.com</div>
    </div>

    <div class="theme">
      この文章はダミーです。
    </div>

    <div class="requests">
      <div class="title">詳細説明</div>
      <div class="desc">
        つれづれなるまゝに、日暮らし、
      </div>
    </div>

    <div class="requests">
      <div class="title">この記事の目的</div>
      <div class="desc">
        後ろで大きな爆発音がした。
      </div>
    </div>

  </div>
</body>
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7r9op4s4a66tma8f0mdj.png)

一番大きなコンテナを 
`card-detail-info` 
として、この中に

* header > field > { updated-date, author }
* theme
* requests > { title, desc } 

この構造で作成する。

---

## CSS 構造

```css
.card-detail-info {
  background-color: #aaa;
  font-size: 12px;
  font-weight: 400;
  margin: 24px 30px;
  padding: 24px 30px;
}
.field {
  display: flex;
  flex-direction: column;
}
.header {
  display: flex;
  font-style: normal;
  font-weight: 300;
  font-size: 11px;
  line-height: 160%;
  margin-bottom: 16px;

}
.theme {
  background-color: #ccc;
  height: 29px;
  width: 1080px;
  font-weight: 600;
  font-size: 18px;
  line-height: 160%;
}
a:hover {
    color: #006CAD;
}
.requests {
  display: flex;
  flex-direction: row;
}
```

### 全体

背景を #aaa のグレーにして
文字サイズが 12px 
太さが 400
マージン、パディングを 24px-30px

### field 

縦に流す

### header 

文字サイズ 11px
太さ 300
行間 160%
下の余白 16px

### theme

背景を #ccc の白目のグレー
文字サイズ 18px
太さ 600
行間 160%

高さ 29px
幅 1080px

---
---

# テーマ width の改善

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jo4c60pzfzo7av4lek9k.png)

こうすると、背景色から、見ての通りテーマの width の 1080px が
悪さをして、短い画面で見るときにですぎている。


## width の削除

テーマの width を消せば、画面幅に応じて

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hx0tlw80d6oagnuuyhp1.png)
 
画面幅 582px でも

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/up2l7th576egbagxgkv4.png)
 
画面幅 1500px でも

マージンを除いた width に伸縮される。

## max-width: 1080px

1500px の時に目一杯に広がってほしくないときは

max-width: 1080px にすれば

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/insjva4wsgvedyqng1ts.png)
  
画面幅 400px の時には width なしの時と同様にカード内部に収まって

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dpjpm0ts676ni4bk265v.png)

画面幅 1500px の時には 1080px までで伸びが止まる。

## まとめ

これで、文字数が少ない場合は、max-width の適用により
出過ぎ問題は解決したようにみえる。
 
---
---

# タイトルの大きい文字が 220 文字あるときに崩れないようにする

## 220 文字突っ込む

```
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大
```

220 もの文字をタイトルに入れる。

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rusojqu2b779od15y4wp.png)
 
 
するとヤバい見た目になる。
背景色に収まってないし、
下の項目にめちゃくちゃかぶっている。
しかも文字が全て表示されていない。

---

## max-width の適用

とりあえず max-width を適用してみる

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vhjahwtez99xeuof2mcv.png)

これで、とりあえず文字は適切に折り返されて
表示されるようになった。

しかし高さが足りていないのではみ出ている。

---

## min-height の適用

min-height: 29px これを適用すると
最小のテーマの高さが、29px で、
最大はいくらでも伸びるという意味になる。

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lpsxmssnga39s3qxu3bx.png)
 
なので、文字数に応じて高さが伸びて綺麗に見える。

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nw6uuyhp11daegbeyx70.png)
 

最小が決まっているため、中身がなくても 29px の高さの
タイトルの枠はキープされる。

height が auto の場合は中身がないと枠がきえる。

---
---

# 各項目のフィールドが 190 文字あるときに崩れないようにする

```
つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事
```

```
後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発
```

これらをタイトルの下の requests の desc に突っ込む

```html
    <div class="requests">
      <div class="title">詳細説明: </div>
      <div class="desc">
      </div>
    </div>
    <div class="requests">
      <div class="title">この記事を投稿した目的: </div>
      <div class="desc">
      </div>
    </div>
```

```css
.requests {
  margin-top: 24px;
  display: flex;
  flex-direction: row;
}
.title {
  width: 136px;
}
.desc {
  display: flex;
}
```

ここ。


すると 950px にした時に

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gil66o6ysxzi0j9m0ica.png)

詳細説明やこの記事を投稿した目的、
これら title の幅は 135px 確保しているはずなのに
desc に押されて 50px ほどになってしまっている。

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nl4w8dk91n0s4dxxjg4d.png)

前述のように min-width を設定することで潰されなくなる。
これの場合は最大の幅のタイトルに合わせて小さい方のタイトルの
幅も確保される。

```css
.title {
  flex-shrink: 0;
}
```

一方 flex-shrik という概念があって

https://developer.mozilla.org/ja/docs/Web/CSS/flex-shrink

これを 0 にすることで全く縮まなくなるので

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1zjxbxkt6aluz7vxs5yr.png)

これを各タイトルが自分の幅に必要な幅だけを確保できる。