CSS「-webkit-line-clamp」を使用して複数行にも対応した三点リーダー(…)を実装する
ブログなどの記事を一覧ページにも表示する場合、一行だと短すぎるけど全部出すのは長すぎる。…
webサイトを作る上で、文字の大きさを考慮することは非常に大切。
一文字ずつ「px」で設定しても良いのですが、全体のサイズ変更が発生した場合や、端末ごとでの文字を一括調整する時に便利な「rem」による設定方法をメモ。
html{
font-size: 15px;
}
h1{
font-size: 1.6rem; // 15pxの1.6倍の24px
}
h2{
font-size: 1.2rem; // 15pxの1.2倍の18px
}
small{
font-size: 0.8rem; // 15pxの0.8倍の12px
}
CSSで「html」タグに基準となるフォントサイズを設定、その他のタグはこの数値を基準にした倍率を「rem」で行っていく。
この方法であれば、仮に全体的にサイズを大きくしてほしいという要望があった場合でも基準値の「15px」を変更するだけで比率を変えることなく、全体サイズの変更が可能。
また、「rem」は「margin」や「padding」にも使えるので、枠の中に文字を入れた場合の余白調整や、改行幅の調整にも使える。