CSS

2023年12月1日

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

2023年11月30日

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

2023年11月30日

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

2023年9月26日

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

2023年9月9日

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

2023年9月7日

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