css 文字の太さ行の高さ文章の配置

Posted at 2024-10-15

文字の太さを指定 font-weightの使い方

文字の太さを指定するには２種類の方法が存在します

1 キーワードで指定
- normal 通常の太さ
- bold 太字
- lighter 1段階細め
- bolder　１段階太め
2 数値で指定
1~1000の数値で指定することができます。normalと400は同じ太さです。boldと700も同じ太さです。

以下が今回作成したコードです。

index.html

<!DOCTYPE html>
<html lang ="ja">
   <head>
       <meta charset="UTF-8">
       <link rel="stylesheet" href = "style.css">
   </head>

   <body>
       <div class="font_type">
           <p class="normal">標準の太さです</p>
           <p class="bold_400">太さ400で指定します</p>
           <p class="bold">太字の太さです</p>
           <p class="bold_700">太さ700で指定します</p>
           <p class="lighter">１段階細くした太さです</p>
           <p class="bolder">１段階太くした太さです</p>
           <p class="bold_1000">太さ1000で指定します</p>
       </div>


   </body>

</html>

style.css

.font_type{
    font-family: "メイリオ",sans-serif;
}

.normal{
    font-weight: normal;
}
.bold_400{
    font-weight: 400;
}

.bold{
    font-weight: bold;
}
.bold_700{
    font-weight: 700;
}

.lighter{
    font-weight: lighter;
}

.bolder{
    font-weight: bolder;
}

.bold_1000{
    font-weight: 1000;
}

行間設定の line-height

行間の主な指定方法には3種類あります

nolmal
ブラウザー側で行間を調整します
数値のみ
フォントサイズの比率をもとに調整します。
px % emを使った指定方法
単位を使って行間を調整します
- emは親要素のフォントサイズを基準に比率を調整します。
  親要素が16pxの場合、1emは16pxに相当します
- %を使った調整もemと同じく親要素を基準に比率を調整します。
  親要素が16pxの場合、100%は16pxに相当します

以下が今回作成したコードになります。

index.html

<!DOCTYPE html>
<html lang ="ja">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href = "style.css">
    </head>
<body>

    <p class ="normal_height">
        これは通常時の行間です。<br>
        行間はnormalや単位なしの数値や単位を使って調整します<br>
        読みやすさはどうでしょうか？

    </p>

    <p class ="custom_height_1">
        これは数値1で調整した行間です。<br>
        行間はnormalや単位なしの数値や単位を使って調整します<br>
        読みやすさはどうでしょうか？

    </p>
    <p class ="custom_height_2">
        これは数値1.2で調整した行間です。<br>
        行間はnormalや単位なしの数値や単位を使って調整します<br>
        読みやすさはどうでしょうか？

    </p>
    <p class ="custom_height_3">
        これは数値1.4で調整した行間です。<br>
        行間はnormalや単位なしの数値や単位を使って調整します<br>
        読みやすさはどうでしょうか？
    </p>
    <p class ="custom_height_4">
        これは数値2で調整した行間です。<br>
        行間はnormalや単位なしの数値や単位を使って調整します<br>
        読みやすさはどうでしょうか？
    </p>
    <p class ="custom_height_5">
        これは数値2.7で調整した行間です。<br>
        行間はnormalや単位なしの数値や単位を使って調整します<br>
        読みやすさはどうでしょうか？
    </p>
    <p class ="px_height">
        これは30pxを使って調整した行間です。<br>
        行間はnormalや単位なしの数値や単位を使って調整します<br>
        読みやすさはどうでしょうか？
    </p>
    <p class ="em_height_1">
        これは1emを使って調整した行間です。<br>
        行間はnormalや単位なしの数値や単位を使って調整します<br>
        読みやすさはどうでしょうか？
    </p>
    <p class ="em_height_2">
        これは1.5emを使って調整した行間です。<br>
        行間はnormalや単位なしの数値や単位を使って調整します<br>
        読みやすさはどうでしょうか？
    </p>

    <p class ="percent_height_1">
        これは100%を使って調整した行間です。<br>
        行間はnormalや単位なしの数値や単位を使って調整します<br>
        読みやすさはどうでしょうか？
    </p>

    <p class ="percent_height_2">
        これは200%を使って調整した行間です。<br>
        行間はnormalや単位なしの数値や単位を使って調整します<br>
        読みやすさはどうでしょうか？
    </p>



</body>

</html>

style.css

.normal_height{
    line-height: normal;
}

.custom_height_1{
    line-height: 1;
}

.custom_height_2{
    line-height: 1.2;
}

.custom_height_3{
    line-height: 1.4;
}

.custom_height_4{
    line-height: 2;
}

.custom_height_5{
    line-height: 2.7;
}

.px_height{
    line-height: 30px;
}

.em_height_1{
    line-height: 1em;
}

.em_height_2{
    line-height: 1.5em;
}

.percent_height_1{
    line-height: 100%;
}

.percent_height_2{
    line-height: 200%;
}

文章をそろえる text-alignプロパティ

最後に文章をそろえるプロパティについて解説します。
日本語は通常左揃えですが、 text-alignプロパティを使うことで　左揃え右揃え中央揃え両端揃えを作ることができます。

index.html

<!DOCTYPE html>
<html lang ="ja">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href = "style.css">
    </head>

    <body>
        <div class ="text_height">
            <p class ="left_align">
                これは左揃えの文章です。日本語は通常左ぞろえになっています<br>
                見やすさはどうでしょうか？今回のテストコードでは<br>
                左揃え 右揃え 中央揃え 両端揃え<br>
                それぞれ４種類の見やすさを検証します

            </p>

            <p class="right_align">
                これは右揃えの文章です。日本語は通常左ぞろえになっています<br>
                見やすさはどうでしょうか？今回のテストコードでは<br>
                左揃え 右揃え 中央揃え 両端揃え<br>
                それぞれ４種類の見やすさを検証します

            </p>

            <p class="center_align">
                これは中央揃えの文章です。日本語は通常左ぞろえになっています<br>
                見やすさはどうでしょうか？今回のテストコードでは<br>
                左揃え 右揃え 中央揃え 両端揃え<br>
                それぞれ４種類の見やすさを検証します

            </p>

            <p class ="justify_align">
                これは両端揃えの文章です。日本語は通常左ぞろえになっています<br>
                見やすさはどうでしょうか？今回のテストコードでは<br>
                左揃え 右揃え 中央揃え 両端揃え<br>
                それぞれ４種類の見やすさを検証します

            </p>

        </div>



    </body>

</html>

style.css

.text_height{
    font-family: "メイリオ",sans-serif;
    line-height: 1.6;
}

.left_align{
    text-align: left;
}

.right_align{
    text-align: right;
}

.center_align{

    text-align: center;
}

.justify_align{

    text-align: justify;
}

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up