2
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

cssスニペット集

Last updated at Posted at 2016-12-27

自分用のメモを兼ねて。随時追記中。

ちょっと一手間で見た目が良くなるスニペット集

  1. フォントのカーニングとアンチエイリアスの調整
  2. テキストの両端を綺麗に揃える

1.フォントのカーニングとアンチエイリアスの調整

  • font-smoothingでアンチエイリアスの調整
  • font-feature-settingsでカーニングの調整します
  • letter-spacingで文字間をお好みで空ける

デモ:http://codepen.io/kokimaekochi/pen/XNLMdx


@mixin fontBeauty {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-feature-settings: "palt" 1;
	font-feature-settings: "palt" 1;
	letter-spacing: .2em;
}

section {
	@include fontBeauty;
}

2.テキストの両端を綺麗に揃える

  • 基本はtext-align: justify;でOK
  • IEの為にtext-justify: inter-ideograph;を追加

デモの右側が反映済みのやつです。

デモ:http://codepen.io/kokimaekochi/pen/XNLPxQ


.justify {
  text-align: justify;
  text-justify: inter-ideograph;
}
2
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?