CSSで円を描こう。テキスト上下中心表示付き
CSSで円を描くのは簡単ですが、意外とつまづくのが文字を中央に表示することです。今回は円の書き方と合わせて説明していこうと思います。
CSSで円を描こう
cssで円を描くのは簡単です。
まずHTMLの準備をしましょう。最初にhtmlファイルを作ります。
<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<head>
<title>丸を描く</title>
<style>
</style>
</head>
<body>
<div class="circle">
</div>
<script>
</script>
</body>
</html>bodyタグの中にあるdiv class=’circle’にCSSを適用して丸を書きたいと思います。次のstyle要素を<style></style>の間に書きます。
.circle{
/* 丸の位置 */
position: absolute;
/* 横の大きさ */
width: 100px;
/* 縦の大きさ */
height: 100px;
/* 角の丸め具合 */
border-radius: 50%;
/* 背景の色 */
background-color: coral;
/* 周りの枠線 */
border: black 15px solid;
}各項目の内容はコメントを見てください。これだけで丸が表示されたはずです。
全体ではこのようになります。
<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<head>
<title>丸を描く</title>
<style>
.circle{
/* 丸の位置 */
position: absolute;
/* 横の大きさ */
width: 100px;
/* 縦の大きさ */
height: 100px;
/* 角の丸め具合 */
border-radius: 50%;
/* 背景の色 */
background-color: coral;
/* 周りの枠線 */
border: black 15px solid;
}
</style>
</head>
<body>
<div class="circle">
</div>
<script>
</script>
</body>
</html>
この様に表示されるはずです。
円の中心に文字を書こう
円に文字を描くには<div class=”circle”></div>の間に<p>まる</p>と書きます。ただ、このままでは下の絵のように左上に文字がみにくく表示されます。
<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<head>
<title>丸を描く</title>
<style>
.circle{
/* 丸の位置 */
position: absolute;
/* 横の大きさ */
width: 100px;
/* 縦の大きさ */
height: 100px;
/* 角の丸め具合 */
border-radius: 50%;
/* 背景の色 */
background-color: coral;
/* 周りの枠線 */
border: black 15px solid;
</style>
</head>
<body>
<div class="circle">
<p>まる</p>
</div>
<script>
</script>
</body>
</html>
ここでフォントを見やすく表示するようにしましょう。テキスト色やフォントの関連のstyleを追加します。
.circle{
/* 丸の位置 */
position: absolute;
/* 横の大きさ */
width: 100px;
/* 縦の大きさ */
height: 100px;
/* 角の丸め具合 */
border-radius: 50%;
/* 背景の色 */
background-color: coral;
/* 周りの枠線 */
border: black 15px solid;
/* ここから追加 */
/* テキストの色 */
color: white;
/* テキストの横位置 */
text-align: center;
/* フォントの大きさ */
font-size: 50px;
/* 行の高さ */
line-height: 100px;
}行の高さを丸の縦の長さと同じにするのが大切です。ただこれでも文字は中心に来ません。
中心に表示するにはpのマージンを削除する必要があります。circleの下に次のcssを追加してください。この命令が<p>のマージンを０にします。意外とpのマージンは気付かないのでこまめにチェックすると良いです。
p{
margin: 0px;
}これで丸の中心に文字が表示されたと思います。
全体のコード
<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<head>
<title>丸を描く</title>
<style>
.circle{
/* 丸の位置 */
position: absolute;
/* 横の大きさ */
width: 100px;
/* 縦の大きさ */
height: 100px;
/* 角の丸め具合 */
border-radius: 50%;
/* 行の高さ */
line-height: 100px;
/* 背景の色 */
background-color: coral;
/* 周りの枠線 */
border: black 15px solid;
/* テキストの色 */
color: white;
/* テキストの横位置 */
text-align: center;
/* フォントの大きさ */
font-size: 50px;
}
p{
margin: 0px;
}
</style>
</head>
<body>
<div class="circle">
<p>まる</p>
</div>
<script>
</script>
</body>
</html>