【CSS/html】aタグのフォントサイズを変える方法

「aタグを押しやすくするためにもっと大きくしたい！」

aタグのフォントサイズを変える方法を解説します。

【結論】aタグにfont-size

font-sizeはフォントサイズを変えるCSSです。これをaタグに指定するとフォントサイズを変えられます。

<style>
.example{
    font-size: 150%;
}
</style>
<a href="#" class="example">aタグにfont-size:150%</a>

font-sizeが効かないときはこちら↓

font-sizeの値と単位

font-sizeの値は「100%」「1em」のような相対指定と「16px」のような絶対指定あります。

相対指定の場合、親要素のfont-sizeを基準にフォントサイズが決まります。

親のフォントサイズの2倍にしたければ「200%」か「2em」、半分にしたければ「50%」か「0.5em」のようにします。

絶対指定の場合、親要素のfont-sizeは関係ありません。

「20px」と指定すると親のフォントサイズに関係なく「20px」になります。

単位について詳しくはこちら↓

初心者の場合、pxによる絶対指定のほうがミスが少ないでしょう。

ただし、px指定はブラウザによっては文字サイズが変えられない欠点があります。

慣れてきたら相対指定を使っていきましょう。

ちなみに初期状態のフォントサイズは16pxです。パソコン版のこのサイトの文字サイズも16pxです。

【廃止】fontタグにsize属性

aタグ内にfontタグを置き、size属性を指定することでCSSを使わずにフォントサイズを変えることができます。

<a href="#"><font size="5">aタグにfontタグとsize="5"</font></a>

sizeの値を変えると大きさも変わります。1～7まで指定でき、3が標準サイズとなります。

ただし、html5ではfontタグは廃止されていますので非推奨です。

一応効くのでCSSがどうしてもわからないときの最終手段にしましょう。

【まとめ】aタグのフォントサイズを変える方法

aタグにfont-sizeを指定する

• %やemは親要素のfont-sizeを基準にする
• pxは親要素は関係なし

以上、aタグのフォントサイズを変える方法でした。