今回はcssで文字の大きさを変更する方法について学びました。px % rem 3種類の使い方について解説します。
フォントサイズの基準を指定しない場合
フォントサイズを特に指定しない場合、ブラウザのデフォルトでは16pxを基準にフォントサイズの調整をすることになります。
以下がソースコードです
index.html
<!DOCTYPE html>
<html lang ="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href = "style.css">
</head>
<body>
<p class="size-pixel">これはテキストです。 30px</p>
<p class="size-percent">これはテキストです。12px </p>
<p class="size-rem">これはテキストです。16px</p>
</body>
</html>
style.css
.size-pixel{
font-size: 30px;
}
.size-percent{
font-size: 75%;
}
.size-rem{
font-size: 1rem;
}
デフォルトの16pxを基準にフォントサイズが決まります。
親要素で大きさを指定した場合
次は親クラスを使ってフォントサイズを指定します。
この記述をすることでdivタグに囲まれた要素は60pxを基準にフォントサイズを調整します。
<div style="font-size: 60px;">
</div>
index.html
<!DOCTYPE html>
<html lang ="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href = "style.css">
</head>
<body>
<div style="font-size: 60px;">
<p class="size-pixel">これはテキストです。 30px</p>
<p class="size-percent">これはテキストです。12px </p>
<p class="size-rem">これはテキストです。16px</p>
</div>
</body>
</html>
style.css
.size-pixel{
font-size: 30px;
}
.size-percent{
font-size: 75%;
}
.size-rem{
font-size: 1rem;
}
実際に試してもらうとわかるのですが、親要素でフォントサイズを指定してもサイズに変化はありません。%を使った調整は親要素に依存しますが、remを使った調整は常にhtml要素 ルート要素に依存するため60pxではなく16pxになります。
親要素の基準に影響を受けません。
html全体の大きさを指定した場合
html全体にフォントサイズを指定してみます。
今回はcssファイルのセレクター部分にhtmlを指定してフォントサイズを指定します。
index.html
<!DOCTYPE html>
<html lang ="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href = "style.css">
</head>
<body>
<p class="size-pixel">これはテキストです。 20px</p>
<p class="size-percent">これはテキストです。45px </p>
<p class="size-rem1">これはテキストです。60px</p>
<p class="size-rem2">これはテキストです。90px</p>
</body>
</html>
style.css
html{
font-size: 60px;
}
.size-pixel{
font-size: 20px;
}
.size-percent{
font-size: 75%;
}
.size-rem1{
font-size: 1rem;
}
.size-rem2{
font-size: 1.5rem;
}
htmlファイル全体にフォントサイズを指定したことで% remを使って相対的に調整することができました。1remは1.0倍。1.5remは1.5倍になります。
また、この３種類のやり方を通してプロパティに
font-size: ○○px;と記述することで個別にフォントサイズを指定できることもわかりました。
今後はcss htmlを中心に学んだ内容を整理するために記事を投稿していきます。