ログイン

問題12 文字を極小にしてみよう

HTML_CSSの問題

HTML_CSS

文字サイズの変更は、font-sizeプロパティ以外にも操作することができます。 また、ブラウザによって最小のfont-sizeというのが決まっています。 どうしてもfont-sizeを1px~8pxなどにしたい場合の処理を実装しましょう。

文字を極小にしてみよう

問題

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¥
            
答えのアイコン

解説

文字がとても見えにくくなるので、あまり実装する場面はないかも知れませんが
fontsize: 10px; transform:scale(0.5);のようにして文字サイズを小さくします。
但しこの状態ですと基準点がずれてしまう為
小さくした文字の位置がずれてしまいます。

文字位置を戻すためにtransform-origin: 0px 0px;を
使用して定位置に戻してあげます。
ログインして解答を見る
今回また新しいプロパティが登場しました。
transform-originは、要素の座標変換(transform)における原点を設定するプロパティです。

構文は以下のようになっています。
transform-origin: x軸 y軸;
プロパティ値はpxで指定する方法とleftやrightといったキーワードで指定する方法があります。

使用方法を正しく理解して、文字ずれが起こってしまった際などに使いましょう。
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!