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>のマージンを0にします。意外と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>

あわせて読みたい