とても便利な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);
  }

前の記事を読む記事一覧に戻る次の記事を読む

YAM!