kaede

Posted on Jan 5, 2023 • Updated on Mar 24, 2023

HTML CSS 基礎 Part 01 -- 潰れないカードデザイン

#css #flex

why

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

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

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

結論

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

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

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

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>

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

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

この構造で作成する。

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 の改善

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

width の削除

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

画面幅 582px でも

画面幅 1500px でも

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

max-width: 1080px

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

max-width: 1080px にすれば

画面幅 400px の時には width なしの時と同様にカード内部に収まって

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

まとめ

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

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

220 文字突っ込む

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

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

するとヤバい見た目になる。
背景色に収まってないし、
下の項目にめちゃくちゃかぶっている。
しかも文字が全て表示されていない。

max-width の適用

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

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

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

min-height の適用

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

なので、文字数に応じて高さが伸びて綺麗に見える。

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

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

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

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

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

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

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

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

ここ。

すると 950px にした時に

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

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

.title {
  flex-shrink: 0;
}

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

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

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

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

DEV Community