Forem

kaede
kaede

Posted on • Edited on

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

why

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

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

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


結論

  1. max-width でカード内タイトルがカードからはみ出さなくなる。
  2. min-height でカード内説明が増えても、文字が潰れなくなる。カードが自動で縦長になるので。
  3. 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>
Enter fullscreen mode Exit fullscreen mode

Image description

一番大きなコンテナを
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;
}
Enter fullscreen mode Exit fullscreen mode

全体

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

field

縦に流す

header

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

theme

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

高さ 29px
幅 1080px



テーマ width の改善

Image description

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

width の削除

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

Image description

画面幅 582px でも

Image description

画面幅 1500px でも

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

max-width: 1080px

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

max-width: 1080px にすれば

Image description

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

Image description

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

まとめ

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



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

220 文字突っ込む

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

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

Image description

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


max-width の適用

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

Image description

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

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


min-height の適用

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

Image description

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

Image description

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

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



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

つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。(Wikipediaより)つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。(Wikipediaより)つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事
Enter fullscreen mode Exit fullscreen mode
後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発音がした。俺は驚いて振り返った。後ろで大きな爆発
Enter fullscreen mode Exit fullscreen mode

これらをタイトルの下の 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>
Enter fullscreen mode Exit fullscreen mode
.requests {
  margin-top: 24px;
  display: flex;
  flex-direction: row;
}
.title {
  width: 136px;
}
.desc {
  display: flex;
}
Enter fullscreen mode Exit fullscreen mode

ここ。

すると 950px にした時に

Image description

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

Image description

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

.title {
  flex-shrink: 0;
}
Enter fullscreen mode Exit fullscreen mode

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

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

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

Image description

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

Do your career a favor. Join DEV. (The website you're on right now)

It takes one minute and is worth it for your career.

Get started

Top comments (0)

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay