ブログ

  1. トップ
  2. ブログ
  3. 【これでわかる】CSSで間違いやすい5つ解説

Web制作

【これでわかる】CSSで間違いやすい5つ解説

CSSの使い方で戸惑ったことはありませんか?

例えば、以下のようなことに疑問を持った人も多いでしょう、

「paddingとmarginの違い」
「px・em・remの違い」

今回は、このような初心者が間違いやすい、CSSの内容を5つ紹介します。

これから本格的にCSSを勉強する人は、参考にしてください。

初心者が戸惑うCSSのポイント

初心者が戸惑うCSSのポイント以下の項目です。

・paddingとmarginの違い
・px、em、remの違い
・float
・position
・flexbox

上記の5つが初心者が、CSSで困惑する部分です。

この項目を順番に説明します。

paddingとmarginの違い

まずは、paddingとmarginの違いを紹介します。

paddingとmarginの違いを端的に説明すると以下のようになります。

・paddingは要素内の間隔
・marginは要素間の間隔

文字だけで理解するのは難しいと思うので、実際にコードを見て説明します。

<div id="box1">padding</div>
<div id="box2">margin</div>

<style>
#box1{
    padding: 50px;
    background-color: red;
}

#box2{
    margin: 50px;
    background-color: green;
}
</style>

このように記述すると、ブラウザでこのように表示されます。

CSS使い方

 paddingと書かれた要素の方は、要素内の間隔が上下左右に50pxづつ離れます。

marginと書かれた要素の方は、要素外の間隔が上下左右に50pxづつ離れます。

次は、borderを使うとよりわかりやすいので、説明します。

<div id="box1">padding</div>
<div id="box2">margin</div>

        <style>
            #box1{
                padding: 50px;
                border: 2px solid black;
            }

            #box2{
                margin: 50px;
                border: 2px solid black;
            }
        </style>
CSS使い方

先ほどと同じように、 paddingと書かれた要素の方は要素内の間隔が上下左右に50pxづつ離れ、marginと書かれた要素の方は、要素外の間隔が上下左右に50pxづつ離れます。

このように、paddingはborderの内側で間隔があき、marginはborderの外側で間隔があきます。

CSS使い方

paddingやmarginは、このように記述します。

/*paddingの書き方*/
padding-top: ○○ px;
padding-right: ○○ px;
padding-bottom: ○○ px;
padding-left: ○○ px;
/*marginの書き方*/
margin-top: ○○ px;
margin-right: ○○ px;
margin-bottom: ○○ px;
margin-left: ○○ px;

また、ショートハンドという書き方で短縮して記述することが可能です。

/*paddingの書き方*/
padding: ○px ○px ○px ○px;

/*marginの書き方*/
margin: ○px ○px ○px ○px;

px・em・remの違い

CSSで単位を指定するには、px・em・remがあります。

この3つのそれぞれ違いを解説します。

pxの特徴

pxはその名前の通り、ピクセル単位で指定することが可能です。

環境やウィンドウの幅に影響しないのが特徴。

外的要因に影響されない、絶対単位指定です。

html{
    font-size: 46px;/*46px*/
}

h1{
    font-size: 32px;/*32px*/
}

p{
    font-size: 16px;/*16px*/
}

emの特徴

emは、親要素のサイズや環境・ウィンドウの幅によってサイズが可変するのが特徴です。

デフォルトサイズは、16pxです。

しかし、注意しなければならないのは、emは親要素によってサイズが可変します。

html{
    font-size: 46px;/*46px*/
}

h1{
    font-size: 1em;/*46px*/
}

p{
    font-size: 0.5em;/*23px*/
}

remの特徴

remは、emと同じように親要素のサイズや環境・ウィンドウの幅によってサイズが可変するのが特徴です。

remは、ルート要素(一番上の親要素)だけを参照して、サイズが可変します。

この部分が、emとremの違いになります。

・emは親要素によってサイズが可変
・remは一番上の親要素を参照してサイズが可変

html{
    font-size: 16px;/*16px*/
}

h1{
    font-size: 2rem;/*32px*/
}

p{
    font-size: 1rem;/*16px*/
}

よく使われる単位は?

px・em・remどれを使用しても、サイズを指定することが可能です。

レスポンシブサイトを制作するときは、サイズが可変するem・remを使用するのが一般的です。

em・remはどちらを使用してもレスポンシブサイトに対応できます。

しかし、最近の傾向としては、remを使用することが多いです。

その理由は、remはルートだけを参照するのでシンプルに使えるからです。

remは、このように記述して使用するのが一般的。

html {
    font-size: 62.5%; /*基本のフォントサイズを10pxにしています*/
}

h1{
    font-size: 2rem/*20px*/
}

p{
    font-size: 1rem;/*10px*/
}

以下のサイトを使用すると、remをpxに変換できます。

rem・px変換サイトURL:http://hp-html.jp/px/

floatの使い方

要素を横並びにするときに使用するのがfloatです。
(要素を横並びにする方法はflexboxなど他の方法もあります。)

floatを使用することで縦に並んだ要素を横に並べることが可能です。

まずは、このようなコードを記述して要素を縦並びの要素を作ります。

<div id="wrapper">
            <div id="box1">floatさせる</div>
            <div id="box2">floatさせる</div>
            <div id="box3">floatさせたくない</div>
</div>
        <style>
            #wrapper{
                width: 100%;
                background-color: gray;
            }

            #box1{
                background-color: red;
                width: 30%;
                height: 100px;
                color: white;
                text-align: center;
            }

            #box2{
                background-color: green;
                width: 30%;
                height: 100px;
                color: white;
                text-align: center;
            }

            #box3{
                background-color: blue;
                width: 30%;
                height: 100px;
                color: white;
                text-align: center;
            }
        </style>

すると、このような縦並びの要素が表示されます。

CSS使い方

float:leftを使って横並びにする

次に要素を横並びにするために「float:left」を使用します。
(ここでは、赤色の要素と緑色の要素を横並びにさせます。)

赤色の要素である「box1」にfloatを設定しましょう。

<div id="wrapper">
            <div id="box1">floatさせる</div>
            <div id="box2">floatさせる</div>
            <div id="box3">floatさせたくない</div>
</div>
        <style>
            #wrapper{
                width: 100%;
                background-color: gray;
            }

            #box1{
                background-color: red;
                width: 30%;
                height: 100px;
                color: white;
                text-align: center;
                float: left;/*floatを追記*/
            }

            #box2{
                background-color: green;
                width: 30%;
                height: 100px;
                color: white;
                text-align: center;
            }

            #box3{
                background-color: blue;
                width: 30%;
                height: 100px;
                color: white;
                text-align: center;
            }
        </style>

すると、表示はこのように変化します。

CSS使い方

緑色の要素が赤色の要素の後ろに隠れてしまいました。

overflowを使って回り込みを解除する

これを「overflow: hidden」を使って正しく表示させます。

       <div id="wrapper">
            <div id="box1">floatさせる</div>
            <div id="box2">floatさせる</div>
            <div id="box3">floatさせたくない</div>
        </div>
        <style>
            #wrapper{
                width: 100%;
                background-color: gray;
            }

            #box1{
                background-color: red;
                width: 30%;
                height: 100px;
                color: white;
                text-align: center;
                float: left;
            }

            #box2{
                background-color: green;
                width: 30%;
                height: 100px;
                color: white;
                text-align: center;
                overflow: hidden/*この部分を追記*/
            }

            #box3{
                background-color: blue;
                width: 30%;
                height: 100px;
                color: white;
                text-align: center;
            }
        </style>
CSS使い方

box2の要素に「overflow: hidden」を追記すると正しく表示されました。

clearを使って回り込みを解除する

次に緑の要素を右寄せにします。

そのために、赤色の要素には「float:left;」、緑色の要素には「float:right;」を設定します。

<div id="wrapper">
            <div id="box1">floatさせる</div>
            <div id="box2">右にfloatさせる</div>
            <div id="box3">floatさせたくない</div>
</div>
        <style>
            #wrapper{
                width: 100%;
                background-color: gray;
            }

            #box1{
                background-color: red;
                width: 30%;
                height: 100px;
                color: white;
                text-align: center;
                float: left;
            }

            #box2{
                background-color: green;
                width: 30%;
                height: 100px;
                color: white;
                text-align: center;
                float: right;
            }

            #box3{
                background-color: blue;
                width: 30%;
                height: 100px;
                color: white;
                text-align: center;
            }
        </style>

このように記述すると、一番下の青色の要素が見えなくなります。

CSS使い方

これを解除するために、「clear: both;」を使用します。

「clear: both;」を青色の要素に指定することで正しく表示することが可能です。

<div id="wrapper">
            <div id="box1">floatさせる</div>
            <div id="box2">右にfloatさせる</div>
            <div id="box3">floatさせたくない</div>
</div>
        <style>
            #wrapper{
                width: 100%;
                background-color: gray;
            }

            #box1{
                background-color: red;
                width: 30%;
                height: 100px;
                color: white;
                text-align: center;
                float: left;
            }

            #box2{
                background-color: green;
                width: 30%;
                height: 100px;
                color: white;
                text-align: center;
                float: right;
            }

            #box3{
                background-color: blue;
                width: 30%;
                height: 100px;
                color: white;
                text-align: center;
                clear: both;/*この部分を追記*/
            }
        </style>
CSS使い方

青色の要素が表示されました。

clearfixを使って回り込みを解除する

親要素の「wrapper」に「clearfix」というクラスを追記して回り込みを解除します。

<div id="wrapper" class="clearfix">
            <div id="box1">floatさせる</div>
            <div id="box2">右にfloatさせる</div>
            <div id="box3">floatさせたくない</div>
</div>
        <style>
            #wrapper{
                width: 100%;
                background-color: gray;
            }

            .clearfix{
                zoom: 1;
            }
            .clearfix::before, .clearfix::after {
                content: "";
                display: table;
            }
            .clearfix::after {
                clear: both;
            }

            #box1{
                background-color: red;
                width: 30%;
                color: white;
                text-align: center;
                float: left;
            }

            #box2{
                background-color: green;
                width: 30%;
                color: white;
                text-align: center;
                float: right;
            }

            #box3{
                background-color: blue;
                width: 30%;
                color: white;
                text-align: center;
            }
        </style>

positionの使い方

positionは、指定して位置に要素を配置できます。

fixed

fixedは、要素を指定した位置に固定できます。

<div id="fixed">この部分は固定しています。</div>
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>
<div id="box4">box4</div>
<div id="box5">box5</div>

<style>
    #fixed{
        width: 100%;
        background-color: yellow;
        color: white;
        height: 50px;
        text-align: center;
        position: fixed;
    }

    #box1{
        width: 300px;
        height: 300px;
        text-align: center;

        color: white;
        background-color: black;
    }

    #box2{
        width: 300px;
        height: 300px;
        text-align: center;
        color: white;
        background-color: green;
    }

    #box3{
        width: 300px;
        height: 300px;
        text-align: center;
        color: white;
        background-color: blue;
    }

    #box4{
        width: 300px;
        height: 300px;
        text-align: center;
        color: white;
        background-color: gray;
    }

    #box5{
        width: 300px;
        height: 300px;
        text-align: center;
        color: white;
        background-color: pink;
    }
</style>
CSS使い方

「position:fixed;」はヘッダーなどに使用されることが多いです。

absolute・relative

absolute・relativeは、要素を特定の場所に位置させるために使用します。

下記のコードは、子要素を親要素の右下に配置しています。

<div id="relative">
   relative
    <div id="absolute">absolute</div>
</div>

<style>
    #relative{
        width: 500px;
        height: 500px;
        color: white;
        background-color: pink;
        text-align: center;
        position: relative;
    }

    #absolute{
        width: 100px;
        height: 100px;
        color: white;
        background-color: blue;
        text-align: center;
        position: absolute;
        right: 0;
        bottom: 0;
    }
</style>
CSS使い方

「right: 0;」・「bottom: 0;」にすることで右下に配置することが可能です。

まとめ

いかがでしたか?

初心者が間違いやすいCSSを紹介しました。

CSSを習得して、おしゃれなWEBサイトをつくりましょう。