<div id="facebook">&nbsp;</div> #facebook { width:30px; height:20px; margin: 0 10px; -webkit-m […]

.wrap { display: flex; flex-wrap: wrap; gap: 30px; } .item { padding: 30px; width: calc((100% - 30px * 2) / 3) […]

一覧ページの要約を行数で指定するCSS .cont { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* 制限した […]

横並びカードの文字数によって高さがばらつく Webサイトやアプリケーションのデザインにおいて、画像とテキストを含むカードはよく使用されます。しかし、テキストの長さが異なる場合、カードの高さが揃わず、見栄えが悪くなることが […]

Flexboxが高さを自動的に揃えてくれるのは子要素までです。 孫要素までは効きません。 たとえば下の例の場合。 <div class="parent">   <div class="child"&gt […]

言語によって文字数が変わることでデザインが崩れてしまったり、 言語ごとにフォントを変えたいといった場合に 下記の方法をとることで対応が可能になります。 Transeed Web を導入したサイトのソースコードを確認してい […]

FlexboxとはFlexible Box Layout Moduleのことで、柔軟なレイアウトを簡単に実現することができるCSS3の新しいレイアウトモジュールです。 最初と最後の子要素を両端に配置し、残りの子要素は均等 […]

flexboxで並べた各メニューを、テキストの長さに合わせて長さを変える。 文字の長さの比率を保ちつつ均等配置にする flexboxで横並びのメニューを作り、flexboxの子要素に flex: 1 0 auto; を追 […]