CSS

CSS
一覧ページの要約を行数で指定するCSS

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

続きを読む
CSS
画像とテキストを含む横並びのカードの高さを揃える方法

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

続きを読む
CSS
Flexboxと孫要素

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

続きを読む
CSS
各言語ごとのスタイル(CSS)の変更方法

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

続きを読む
CSS
Flexboxチートシート

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

続きを読む
CSS
横並びのメニューで文字の長さの比率を保ちつつ均等配置にする

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

続きを読む