問題
12文字を小さくする方法を学ぼう
文字サイズを変更したいとき、「font-size以外の方法はあるのか？」と疑問に思ったことはありませんか？
この問題では、font-sizeを使わずに文字サイズを調整する方法を学習します。
制約の中で実装することで、CSSの表現の幅を広げることができます。
HTML/CSSの問題に挑戦しよう！
問題
「文字を小さくする方法を学ぼう」
CSSで文字サイズを変更する方法はfont-size以外にも存在します。
この問題では、font-sizeを使わずに文字を小さくする実装に挑戦します。
見本画像を参考に、指定された表示になるように調整してください。
制約の中で実装することで、CSSの表現方法の理解を深めましょう。
あらかじめエディタに書くコード
<p style="font-size: 20px;">文字サイズ20pxです</p>
<p style="font-size: 16px;">文字サイズ16pxです</p>
<p style="font-size: 10px;">文字サイズ10pxです</p>
<p class="seven">文字サイズ7pxにしてください</p>
<p class="five">文字サイズ5pxにしてください</p>
¥HTML¥
期待する画面
解答と解説（文字を小さくする方法を学ぼう）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
通常、文字サイズの変更にはfont-sizeプロパティを使用しますが、今回のように制約がある場合は、CSSのtransformプロパティを活用することで見た目上のサイズを変更することができます。
具体的には、transform: scale() を使うことで要素全体を拡大・縮小することが可能です。
例えば scale(0.5) とすると、要素は元のサイズの50%に縮小されます。
ただし、この方法は「見た目を縮小しているだけ」であり、実際のレイアウト上のサイズ（ボックスサイズ）は変わらない点に注意が必要です。
そのため、scaleを適用すると基準位置がずれてしまうことがあります。
このズレを補正するために使用するのが transform-origin です。
これは変形の基準点を指定するプロパティで、例えば左上（0 0）を基準にすることで、位置のズレを最小限に抑えることができます。
この問題を通して、単なるfont-size以外にもCSSで見た目を制御する複数の手段があることを理解しておきましょう。
補足
transform: scale() は要素を拡大・縮小するCSSプロパティで、文字だけでなく画像やボックス全体にも適用できます。
今回あわせて使用した transform-origin は、変形の基準点（中心）を指定するプロパティです。
デフォルトは中央ですが、left top などに変更することで、拡大・縮小時のズレ方を調整できます。
transform は回転（rotate）や移動（translate）にも応用でき、CSSアニメーションと組み合わせることで表現の幅が大きく広がります。
・文字色のアニメーションも試したい方：文字色をアニメーションで変化させよう
・HTML/CSSの基礎から学びたい方：HTML/CSS入門講座
ポイント
HTMLで文字を小さくする方法
HTMLで文字を小さく見せる方法には、CSSのfont-size以外にもtransformを使った方法があります。
この問題ではscale()を使って見た目のサイズを調整し、文字を小さく表示する方法を学びます。
さらにtransform-originを調整することで位置のズレも制御できます。
「HTMLで文字を小さくする」という実装の考え方を理解しながら、CSSによる柔軟な表現方法を身につけることが目的です。
画像切り替えアニメーションを実務で活用してみよう
画像切り替えアニメーションを理解したら、スライドショーや自動切り替えUIなど、実務でよく使われる表現に活用できるようになります。
CSSアニメーションは見た目だけでなくユーザー体験にも大きく影響する重要な技術です。
実装でつまずいたり、設計に不安がある場合は無料メンター相談を活用することで、現役エンジニアに直接質問しながら効率よくスキルを伸ばすことができます。
→無料メンター相談はこちら
