More than 3 years have passed since last update.

【CSS】文字サイズ(font-size)の10px以下が適用されない時の対処法。左寄せや右寄せなど位置を指定する方法

Posted at 2021-04-14

chromではfont-sizeが10px以下を指定しても反映されないようになっている。

ブラウザ上で10px以下の文字サイズを表示するにはtransformプロパティを使うと実現できる。

実例

以下のようにパスワードの入力欄の下の「パスワードをお忘れですか？」の文字を小さくし左揃えにする。（現在のフォントサイズは10px）

文字を小さくするにはtransform: scale(数値);でscaleの引数に小数点以下の数値を指定する。

scaleは1を倍率100%として大きさを変更する。0.8なら80%の大きさになる。

transform: scale(0.8);

transform: scale(0.4);

▼注意点
文字が小さくなるのではなく、文字が入っている入れ物ごと小さくなるので、だんだんと真ん中に寄ってしまう。

### transformで位置を指定する方法 transformで変形させた要素の位置は`tranlate(横方向の相対位置, 縦方向の相対位置)`で指定する。

指定は現在地の中心座標を(0, 0)として、pxや%で指定できる。 %で指定する場合は、縮小後の縦幅と横幅のサイズを100%の基準とする。

基準位置から90px左に移動

transform: scale(0.8) translate(-90px);

20px左に48px上に移動

transform: scale(0.8) translate(-20px, 48px);

%で指定

transform: scale(0.8) translate(-10%);

## transformの活用方法 transformプロパティはサイズの変更と位置移動以外にも、サイズを横や縦の倍率別々で指定したり、回転、絞るように倍率を変えることができる。
### サイズを横と縦の倍率別々で指定・`scale(横の倍率, 縦の倍率)`

値は1を100%として、単位なしの数値で指定する。

横に1.5倍、縦に0.7倍

transform: scale(1.5, 0.7);

### 回転・`transform: rotate(角度);`

角度はdegかturnで指定する。反時計方向に回す場合はマイナスをつける。turnは0~1で0~360度となる。

▼角度の参考例

transform: rotate(45deg);

### 絞る・`skew(反時計回りの絞り, 時計回りの絞り)`

数値はdegで指定する。90degにすると見えなくなる。

transform: skew(45deg);

transform: skew(-45deg);

### 複数の値を設定する各値は併用して設定することができる。

transform: scale(0.8, 1.5) translate(-10%, 20px) rotate(10deg);

## 参考リンク