<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>CSS大きさ単位</title>
<style>
figure{
}
.rem{
font-size:2rem;
width:10rem;
margin-bottom:1rem;
border:black solid 2px;
}
.px{
font-size:32px;
width:160px;
margin-bottom:32px;
border:black solid 2px;
}
.em{
font-size:2em;
width:10em;
margin-bottom:1em;
border:black solid 2px;
}
.per{
font-size:200%;
width:70%;
margin-bottom:7%;
border:black solid 2px;
}
</style>
</head>
<body>
<h1>CSS大きさ単位</h1>
<article>
<h2>基本問題</h2>
<figure>
<div class="rem">
classREMあ
<div class="rem">
classREMあ
</div>
</div>
<div class="px">
classPX_あ
<div class="px">
classPX_あ
</div>
</div>
<div class="em">
classEMあ
<div class="em">
classEMあ
</div>
</div>
<div class="per">
classPERあ
<div class="per">
classPERあ
</div>
</div>
</figure>
</article>
</body>
</html>