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

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/907cb088-e803-b2c2-6b3b-d2ba1c02908f.png)

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

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

```
transform: scale(0.8);
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/a657f11a-7348-6f5b-f01a-ec202d2280ea.png)


```
transform: scale(0.4);
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/58b9abc0-04ef-d130-1983-ffc83135d1fc.png)


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


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

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

```:基準位置から90px左に移動
transform: scale(0.8) translate(-90px);
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/b9779731-b641-8d15-4c43-0c3cc2df3b86.png)



```:20px左に48px上に移動
transform: scale(0.8) translate(-20px, 48px);
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/6a3c20f8-ee01-2a4b-2671-da887f6b9e98.png)


```:%で指定
transform: scale(0.8) translate(-10%);
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/405496c4-c45d-533d-8cb7-96bf43a9bddf.png)



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

<br>
###サイズを横と縦の倍率別々で指定
・`scale(横の倍率, 縦の倍率)`

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

```:横に1.5倍、縦に0.7倍
transform: scale(1.5, 0.7);
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/d6643023-85ac-f7e9-7026-848146f4305b.png)



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

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

**▼角度の参考例**

| deg | turn | - deg |
|:--|:--|:--|
| 0deg | 0turn  | -360deg  |
| 45deg | 0.125turn  | -315deg  |
| 90deg | 0.25turn  | -270deg  |
| 135deg | 0.375turn  | -225deg  |
| 180deg | 0.5turn  | -180deg  |
| 225deg | 0.625turn  | -135deg  |
| 270deg | 0.75turn  | -90deg  |
| 315deg | 0.875turn  | -45deg  |
| 360deg | 1turn  | -0deg  |

```
transform: rotate(45deg);
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/15410cd8-0f44-0b0e-d7ce-5a63c0aaa1a5.png)


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

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

```
transform: skew(45deg);
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/dd1e5e46-22a6-e21f-28fa-dc434d99f086.png)


```
transform: skew(-45deg);
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/33e275bc-d1c4-4f26-8ff6-301f2b30d7a8.png)


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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/5c61bd0c-090f-89a1-7cdd-33b1874daaf4.png)



<br>
##参考リンク

https://developer.mozilla.org/ja/docs/Web/CSS/transform