【初心者向け】縞模様の見出し作り方

こんにちは。mito（@mito_works）です。

今回は、この見出しをどうやって作るかのご紹介です。

そもそも、これはコーディングのスキルアップのために挑戦している#30DAYSトライアルの課題の一つです。

4. 30DAYSトライアル【コーダーとして企業と仕事ができる実力をつけよう】

mito

見た目簡単そうなのですが、難しかったので記録として残します。

こんな人におすすめ！

同じように#30DAYSトライアルの2ndDAY12で悩んでいる方
CSSの擬似要素を理解したい方
ストライプの作り方を理解したい方

Contents

HTMLの記述
SCSSの記述
CSSのポイント解説
おまけ

HTMLの記述

        <div>
            <h1 class="pattern17">見出しパターン17</h1>
        </div>

SCSSの記述

.pattern17{
    position: relative;
    display: inline-block;
    &:after{
        z-index: -1;
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 20px;
        
        background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 10px,#e9f4ff 10px, #e9f4ff 17px);
        background: repeating-linear-gradient(-45deg, #cce7ff,#cce7ff 10px,#e9f4ff 10px, #e9f4ff 17px);
    }
}

手順

positionで要素の位置を決める
擬似要素(after)を使い、ストライプの位置調整
擬似要素(after)の装飾

以下1つ1つ解説していきます。

Sassについてはこちらの記事を参考にしてください。

30DAYSトライアル〜Sassの基礎を学ぶDAY7,8〜こんにちは。mito（@mito_works）です。今回はコーディングのスキルアップのために挑戦している#30DAYSトライアル...

CSSのポイント解説

positionで要素の位置を決める

文字要素は親、ストライプは子という関係性でpositionの設定をします。

✅なくそう！positionわけわからん！の壁！
html,css初心者泣かせ（自分も泣いた）のpositionについて図解しました。#30DAYSトライアル pic.twitter.com/LG1pzOxU7N
— ちづみ (@098ra0209) January 22, 2019

擬似要素(after)を使い、ストライプの位置調整

文字要素とストライプ要素は親子という関係性ですが、親の後ろに子を並べたいので、
擬似要素:afterを使います。

momo

:afterを使うと要素の直後に要素もどき(擬似要素)が挿入されます。

Point

z-indexの役割

mito

z-indexをつけずに書くと、ストライプが文字の上に重なってしまいます。

momo

z-indexを使うことで重なっている要素の順番を入れ替えることができるよ。

擬似要素(after)の装飾

以下のような設定に指定しています。

  background: repeating-linear-gradient(
            -45deg,　           /* 角度の指定*/
             #cce7ff,         /* 色1の開始*/
             #cce7ff 10px,  　/* 色1の終了*/
             #e9f4ff 10px, 　　/* 色2の開始*/
             #e9f4ff 17px)　　/* 色2の終了*/
             ;
        }

momo

角度の指定を変えることで、色々なストライプが作れるよ！

おまけ

背景をチェック柄にすることもできます。

HTML

        <div>
            <h1 class="check">チェック柄見出し<br>改行あり</h1>
        </div>

CSS

.check{
    display: inline-block;
    margin: 30px auto;
    background-color: #ffc;
    background-image: 
      /* 横ストライプ */
      repeating-linear-gradient(
        0deg,
        transparent,transparent 20px, /*透明*/
        rgba(36, 255, 109,0.5) 20px, rgba(36, 255, 109, 0.5) 40px, /*1色目*/
            transparent 40px, transparent 60px, /*透明*/
            rgba(36, 255, 200,0.5) 60px, rgba(36, 255, 200,0.5) 80px /*2色目*/
      ),
      /* 縦ストライプ */
      repeating-linear-gradient(
        90deg,
        transparent,transparent 20px,
        rgba(240, 255, 36, 0.945) 20px, rgba(240, 255, 36, 0.945) 40px,
            transparent 40px, transparent 60px,
            rgba(36, 255, 109,0.5) 60px, rgba(36, 255, 109,0.5) 80px
      )
    }