最速5分見積
もり

ブログ

  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サイトをつくりましょう。