cheka.jp 超不定期で更新する写真達。お口直しにどうぞ。

CSS line-height いまさら聞いてすいません

CSSは専門外なので曖昧な事が多いですが少しづつ学びます!
という趣旨のシリーズです。

line-height

よく分からずに使っていなかったline-heightですが、放置も気持ちが悪いので調べてみました。
line-heightとは、行の高さ指定するプロパティです。

サンプルを作成して確認してみましょう。

実験してみる

分かりやすいように背景色をつけます。

<!DOCTYPE html>
<html lang="ja-JP">
    <head>
        <meta charset="UTF-8">
        <style>
            h2{
                background-color:#79b4ef;                
                font-size:26px;
                text-align:center;
                width:300px;
            }
            .bg{
                background-color:#ffb4ef;
            }
            h2.one{
            }
        </style>
    </head>
    <body>
        <h2 class="one"><span class="bg">行の高さを調べる one</span></h2>
    </body>
</html>

こんな感じです。
ピンクの背景部分が26pxですが、青背景は26px以上あります。

実験1

ではline-hightを指定しましょう。
分かりやすいように縦に並べてみます。

<!DOCTYPE html>
<html lang="ja-JP">
    <head>
        <meta charset="UTF-8">
        <style>
            h2{
                background-color:#79b4ef;                
                font-size:26px;
                text-align:center;
                width:300px;
            }
            .bg{
                background-color:#ffb4ef;
            }
            h2.one{
            }
            h2.two{
                line-height:1;
            }
        </style>
    </head>
    <body>
        <h2 class="one"><span class="bg">行の高さを調べる one</span></h2>
        <h2 class="two"><span class="bg">行の高さを調べる two</span></h2>        
    </body>
</html>

こんな感じです。
下のh2がline-heightをしていしたサンプルです。
ここでは1(100%、行の高さと同じ)に指定します。

実験2

行の高さを相対的に指定するプロパティのようです。

今まで曖昧だった箇所について、paddingやmarginで何となく微調整するのではなく、まずline-heightで調整してロジカルに設計してみたいと思います!

Add a Comment

メールアドレスが公開されることはありません。