YAM!

CSS

CSS

とても便利なCSSの小技!自動カーニングや値の計算式など。

皆さんこんにちは。本日は便利なCSSの小技をご紹介します。
たまに欲しくなる知識なので忘れやすい方はブックマークを。

自動カーニング

文字の自動カーニングをしてくれます。また鉤括弧(「)などの約物の隙間をなくす事もできます。
使用しているフォントが対応している場合にのみ適用されます。

 p{
    font-feature-settings: "palt";
 }
 

文章を…で省略する

長いテキストを省略出来ます。ただし1行の場合だけです。

 p{
    text-overflow: ellipsis;
    white-space: nowrap;
 }
 

合わせて覚えておきたいテクニック

ChromeやSafari限定で複数行にも対応できます。「-webkit-line-clamp」で何行目の最後を省略するかを指定できます。

  p{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  

比率を固定する

アスペクト比を固定することが出来ます。要素の幅と高さの両方を定義した場合、アスペクト比は無視されるそうです。
対応しているブラウザが少ないですが、対処はしやすいですね。
ちなみに黄金比は1.618 / 1。計算したいときにも使えます。

 p{
    aspect-ratio: 1/1;
 }
 

選択した文字色の変更

文字をコピーする時の選択文字色を変更します。

 p::selection {
    background-color: #8e44ad;
    color: #fff;
 }
 

値の計算式

幅を固定でなく、可変にする時に。

 div: {
    width: calc(100% - 30px);
 }
 

バナー広告の参考にも! 寄り道で一息。

もっと広告を見てみる!
TOP