最速5分見積
もり

で依頼する

ブログ

  1. トップ
  2. ブログ
  3. 【CSS】4つのプロパティをマスターすれば脱初心者

Web制作

【CSS】4つのプロパティをマスターすれば脱初心者

CSSはWEB制作する上で欠かせない言語です。

簡単そうに思われますが、実は奥が深くマスターするまでに時間がかかります。

今回は、「hover」「position」「flexbox」「before・after」の4つを紹介します。

この4つをマスターすれば、初心者から中級者になることが可能です。

hover

hoverは、カーソルが乗ったときに適用するデザインです。

ほぼ全てのサイトで、hoverは使用されています。

例えば、このようなコードをみてください。

HTML

<p class="hover"><a href="">ホバーです</a></p>

CSS

.hover a:hover{
    color: green;
}

このような表示結果になります。

CSSコード

ホバーしているだけデザインを適用させることができます。

他にもこのようなデザインがあるので、参考にしてください。

ホバーしたときにアンダーラインをつける

HTML

<p class="hover"><a href="#">ホバーです</a></p>

CSS

.hover a:hover{
    text-decoration: underline;
}

背景色を変える

HTML

<a class="hover" href="#">ホバーです</a>

CSS

.hover{
    background: #D8D8D8;
    color: #fff;
    padding: 10px;
    text-decoration: none;
}

.hover:hover{
    background: #F2F2F2;
}

枠線をドットに変える

HTML

<a class="hover" href="#">ホバーです</a>

CSS

.hover{
    background: #D8D8D8;
    border: solid 1px #D8D8D8;
    color: #fff;
    padding: 10px;
    text-decoration: none;
}

.hover:hover{
    background: #fff;
    color: #333;
    border: dotted;
}

枠線を破線に変える

HTML

<a class="hover" href="#">ホバーです</a>

CSS

    background: #fff;
    color: #333;
    border: dashed;

枠線・文字色・背景色を変える

HTML

<a class="hover" href="#">ホバーです</a>

CSS

.hover{
    background: #D8D8D8;
    border: solid 1px #D8D8D8;
    color: #fff;
    padding: 10px;
    text-decoration: none;
}

.hover:hover{
    color: #333;
    border: solid 1px #333;
    background: #fff;
}

文字の感覚をあける

HTML

<a class="hover" href="#">ホバーです</a>

CSS

.hover{
    background: #D8D8D8;
    border: solid 1px #D8D8D8;
    color: #fff;
    padding: 10px;
    text-decoration: none;
}

.hover:hover{
    letter-spacing: 8px;
}

ホバーしたときに縦軸を中心に回転させる

HTML

<a class="hover" href="#">ホバーです</a>

CSS

.hover {
    text-align: center;
    display: block;
    transition: 1s;
}

.hover:hover{
    transform: rotateY(45deg);
}

ホバーしたときに横軸を中心に回転させる

HTML

<a class="hover" href="#">ホバーです</a>

CSS

.hover {
    text-align: center;
    display: block;
    transition: 1s;
}

.hover:hover{
    transform: rotateX(45deg);
}

要素の中心を軸に回転させる

HTML

<a class="hover" href="#">ホバーです</a>

CSS

.hover {
    text-align: center;
    display: block;
    transition: 1s;
}

.hover:hover{
    transform: rotateZ(45deg);
}

position

次は「position(ポジション)」を説明します。

ポジションは、特定の要素を特定の位置に配置できるCSSです。

例えば、このような四角の要素を用意します。

CSSコード

HTML

<div class="sikaku1"></div>

CSS

.sikaku1{
    width: 300px;
    height: 300px;
    background: #01DF74;
}

この四角の上に幅100px・縦100pxの四角を作ります。

CSSコード

HTML

                  <div class="sikaku1">
                        <div class="sikaku2">

                        </div>
                    </div>

CSS

.sikaku1{
    width: 300px;
    height: 300px;
    background: #01DF74;
}

.sikaku2{
    width: 100px;
    height: 100px;
    background: #FA5858;
}

赤色の四角(クラス名:sikaku2)は、緑色の四角(クラス名:sikaku1)の左上に配置されています。

赤色の四角の配置を変えるためには、ポジションを適用する必要があります。

実際にコードを見てみましょう。

まず、配置する基準となる要素に「position: relative;」を適用させます。

ここでは緑色の四角に(クラス名:sikaku1)「position: relative;」を適用させます。

HTML

                    <div class="sikaku1">
                        <div class="sikaku2">

                        </div>
                    </div>

CSS

.sikaku1{
    width: 300px;
    height: 300px;
    background: #01DF74;
    position: relative;
}

.sikaku2{
    width: 100px;
    height: 100px;
    background: #FA5858;
}

次に配置を移動させたい赤色の四角(クラス名:sikaku2)に「position: absolute;」を適用させます。

HTML

                    <div class="sikaku1">
                        <div class="sikaku2">

                        </div>
                    </div>

CSS

.sikaku1{
    width: 300px;
    height: 300px;
    background: #01DF74;
    position: relative;
}

.sikaku2{
    width: 100px;
    height: 100px;
    background: #FA5858;
    position: absolute;
}

ここまで出来たら、あとは簡単です。

配置させたい位置を赤色の四角(クラス名:sikaku2)に記述するだけです。

例えば、右上に配置させたい場合はこのように記述します。

CSSコード

HTML

                    <div class="sikaku1">
                        <div class="sikaku2">

                        </div>
                    </div>

CSS

.sikaku1{
    width: 300px;
    height: 300px;
    background: #01DF74;
    position: relative;
}

.sikaku2{
    width: 100px;
    height: 100px;
    background: #FA5858;
    position: absolute;
    top: 0;
    right: 0;
}

左下に配置したい場合は、このように記述します。

CSSコード

HTML

                    <div class="sikaku1">
                        <div class="sikaku2">

                        </div>
                    </div>

CSS

.sikaku1{
    width: 300px;
    height: 300px;
    background: #01DF74;
    position: relative;
}

.sikaku2{
    width: 100px;
    height: 100px;
    background: #FA5858;
    position: absolute;
    bottom: 0;
    left: 0;
}

右下に配置したい場合は、このように記述します。

CSSコード

HTML

                    <div class="sikaku1">
                        <div class="sikaku2">

                        </div>
                    </div>

CSS

.sikaku1{
    width: 300px;
    height: 300px;
    background: #01DF74;
    position: relative;
}

.sikaku2{
    width: 100px;
    height: 100px;
    background: #FA5858;
    position: absolute;
    bottom: 0;
    right: 0;
}

上下中央に配置したい場合は、このように記述します。

CSSコード

HTML

                    <div class="sikaku1">
                        <div class="sikaku2">

                        </div>
                    </div>

CSS

.sikaku1{
    width: 300px;
    height: 300px;
    background: #01DF74;
    position: relative;
}

.sikaku2{
    width: 100px;
    height: 100px;
    background: #FA5858;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

ポジションを使って上下中央寄せする場合は、「transform: translate;」を使うことが必要です。

この方法は少し難しいですが次に説明するFlexboxを使えば簡単にできます。

Flexbox

Flexboxは、レイアウトを整えることができるCSSコードです。

これまでは、レイアウトを変更するには非常に手間がかかりました。

しかし、Flexboxを使用することで簡単にレイアウトを整えれるようになりました。

実際にコードを紹介しながら、解説していきます。

例えば、1つの要素の中に要素が3つある場合、子要素は縦に並びます。

CSSコード

HTML

                    <div class="sikaku1">
                        <div class="sikaku2"></div>
                        <div class="sikaku2"></div>
                        <div class="sikaku2"></div>
                    </div>

CSS

.sikaku1{
    width: 300px;
    height: 300px;
    background: #01DF74;
}

.sikaku2{
    width: 50px;
    height: 50px;
    background: #FA5858;
    margin-bottom: 20px;
}

Flexboxを使って子要素を横並びにする場合、親要素に「display: flex;」を適用させると子供要素が横並びになります、

CSSコード

HTML

                    <div class="sikaku1">
                        <div class="sikaku2"></div>
                        <div class="sikaku2"></div>
                        <div class="sikaku2"></div>
                    </div>

CSS

.sikaku1{
    width: 300px;
    height: 300px;
    background: #01DF74;
    display: flex;
}

.sikaku2{
    width: 50px;
    height: 50px;
    background: #FA5858;
    margin: 0 20px;
}

Flexboxはただ横並びにするだけではありません。

コンテンツの揃え方を指定することも可能です。

CSSコード

これは、親要素に「justify-content: center;」を適用すれば子要素が中央寄せになります。

HTML

                    <div class="sikaku1">
                        <div class="sikaku2"></div>
                        <div class="sikaku2"></div>
                        <div class="sikaku2"></div>
                    </div>

CSS

.sikaku1{
    width: 300px;
    height: 300px;
    background: #01DF74;
    display: flex;
    justify-content: center;
}

.sikaku2{
    width: 50px;
    height: 50px;
    background: #FA5858;
    margin: 0 20px;
}

ヘッダーでよく使用するするのが「justify-content: space-between;」です。

これは、最初と最後の子要素を両端に配置して、残りの要素を均等に配置するコードです。

CSSコード

HTML

                    <div class="sikaku1">
                        <div class="sikaku2"></div>
                        <div class="sikaku2"></div>
                        <div class="sikaku2"></div>
                    </div>

CSS

.sikaku1{
    width: 300px;
    height: 300px;
    background: #01DF74;
    display: flex;
    justify-content: space-between;
}

.sikaku2{
    width: 50px;
    height: 50px;
    background: #FA5858;
}

両端の子要素も含めて等間隔に配置するのが「justify-content: space-around;」です。

CSSコード

HTML

                    <div class="sikaku1">
                        <div class="sikaku2"></div>
                        <div class="sikaku2"></div>
                        <div class="sikaku2"></div>
                    </div>

CSS

.sikaku1{
    width: 300px;
    height: 300px;
    background: #01DF74;
    display: flex;
    justify-content: space-around;
}

.sikaku2{
    width: 50px;
    height: 50px;
    background: #FA5858;
}

また、横並びだけでなく縦方向の配置も指定できます。

例えば、親要素の一番下に配置したい場合は、「align-items: flex-end;」を適用させます。

すると、子要素をこのように配置することが可能です。

CSSコード

HTML

                    <div class="sikaku1">
                        <div class="sikaku2"></div>
                        <div class="sikaku2"></div>
                        <div class="sikaku2"></div>
                    </div>

CSS

.sikaku1{
    width: 300px;
    height: 300px;
    background: #01DF74;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
}

.sikaku2{
    width: 50px;
    height: 50px;
    background: #FA5858;
}

親要素の中央に配置したい場合は、「align-items: flex-end;」を適用させます。

すると、子要素をこのように配置することが可能です。

CSSコード

HTML

                    <div class="sikaku1">
                        <div class="sikaku2"></div>
                        <div class="sikaku2"></div>
                        <div class="sikaku2"></div>
                    </div>

CSS

.sikaku1{
    width: 300px;
    height: 300px;
    background: #01DF74;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.sikaku2{
    width: 50px;
    height: 50px;
    background: #FA5858;
}

このように記述することで、上下中央寄せすることも可能です。

CSSコード

HTML

                    <div class="sikaku1">
                        <div class="sikaku2"></div>
                        <div class="sikaku2"></div>
                        <div class="sikaku2"></div>
                    </div>

CSS

.sikaku1{
    width: 300px;
    height: 300px;
    background: #01DF74;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sikaku2{
    width: 50px;
    height: 50px;
    background: #FA5858;
    margin: 0 20px;
}

上下中央寄せするときは、親要素に「justify-content: center;」と「align-items: center;」を適用させます。

before・after

「before・after」は要素を追加できる疑似要素です。

よく使用される例としては、タイトルの下にサブタイトルを表示させる方法などです。

CSSコード

HTML

<div class="sample">メインタイトルです</div>

CSS

.sample{
    text-align: center;
    font-size: 32px;
    padding-bottom: 8px;
    position: relative;
}

.sample::before{
    content: "サブタイトルです";
    font-size: 18px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%);
}

「before・after」と「hover」を組み合わせることでホバーしたときに中央からアンダーラインがでてくるデザインも可能です。

CSSコード

HTML

<a class="hover" href="#">beforeとafterを使ったホバーです</a>

CSS

.hover{
    color: black;
    text-decoration: none;
    padding-bottom: 8px;
    position: relative;
}

.hover::before, .hover::after{
    content: "";
    display: block;
    width: 0;
    height: 2px;
    background: #333;
    position: absolute;
    top: 100%;
    transition: .4s;
}

.hover::before{
    left: 50%;
}

.hover::after{
    right: 50%;
}

.hover:hover::before, .hover:hover::after{
    width: 120px;
}

まとめ

いかがでしたか？

「hover」「position」「flexbox」「before・after」を使うことでデザインの幅はかなり広がります。

色々なプロパティを使いこなして脱初心者を目指しましょう。