HTML_CSS
Googleでログイン
問題12：font-sizeを使わずに文字を小さくしよう
font-sizeを使わずに文字サイズを小さくしてみましょう。
見本画像を参考にして実装してください。
見本画像を参考にして実装してください。
あらかじめエディタに書くコード
<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¥
期待する画面
解答ソースコード
<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¥
.seven {
font-size:10px;
transform:scale(0.7);
transform-origin: 0px 0px;
}
.five {
font-size:10px;
transform:scale(0.5);
transform-origin: 0px 0px;
}
¥CSS¥
補足
今回また新しいプロパティが登場しました。
transform-originは、要素の座標変換(transform)における原点を設定するプロパティです。
構文は以下のようになっています。
transform-origin: x軸 y軸;
プロパティ値はpxで指定する方法とleftやrightといったキーワードで指定する方法があります。
使用方法を正しく理解して、文字ずれが起こってしまった際などに使いましょう。
transform-originは、要素の座標変換(transform)における原点を設定するプロパティです。
構文は以下のようになっています。
transform-origin: x軸 y軸;
プロパティ値はpxで指定する方法とleftやrightといったキーワードで指定する方法があります。
使用方法を正しく理解して、文字ずれが起こってしまった際などに使いましょう。
完了にする！
活動記録をTweetする
1.HTMLの宣言をしてみよう
fontsize: 10px; transform:scale(0.5);のようにして文字サイズを小さくします。
但しこの状態ですと基準点がずれてしまう為
小さくした文字の位置がずれてしまいます。
文字位置を戻すためにtransform-origin: 0px 0px;を
使用して定位置に戻してあげます。