文字ブロックに優しい処理

css/コーディング

フォントに対する指定ってサイズとか色とか行間とか・・・そんな程度しか

知らなかったのですが、人様のコードなどを拝見していると

「それいいね!」っていう処理が施してあったりして、勉強になります。

ということでそんな処理まとめ。

文字の端をそろえる

フォントサイズや文字間の具合によって表示が変わっちゃうよねーと諦めてたんですが、

普通にこんな綺麗に揃えることができたんですね・・・。

See the Pen
文章の端をきれいに揃える
by hiro (@hiro555)
on CodePen.

長い文を…で省略

ワードプレス などユーザーが自由に文字を入力できる場合に、設定しておくと便利。

長すぎるタイトルの全てを表示する必要がない場面(記事一覧)などで、…で省略してくれるとむやみに行数が増えないし、良いですね。

See the Pen
タイトルが長い場合…で省略
by hiro (@hiro555)
on CodePen.

行間を素敵に詰める

フォントによってはがっつり空いてしまう文字と文字との隙間。

letter-spacing: 0;だからこれ以上詰めれないもーーん

と知らん顔できなくなりますね。

自動カーニングって言うらしいです。

参考:日本語フォントこそ指定したい自動カーニング

See the Pen
文字の間を詰める
by hiro (@hiro555)
on CodePen.

IEの文字が上付きになる問題

前の記事でもちょっと書いたのですが、

デフォルトのフォントではなくfont family なんかでフォントを変更すると、

IEで文字が少し上に上がってしまうんです。

ボタンにした時に変!なので、IEだけに効くCSSを記述して対応。

_:lang(x)::-ms-backdrop, .selector { プロパティ: 値; } 

別のハックもあるのですが、そちらよりももっと良いそうです。

こちらのサイト様ありがとうございます〜。

游ゴシックのfont-family指定方法!@font-faceは絶対NG!WindowsのChromeでかすれる問題徹底検証

タイトルとURLをコピーしました