CODING

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

こんにちは。mito(@mito_works)です。

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

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

mito
mito
見た目簡単そうなのですが、難しかったので記録として残します。
こんな人におすすめ!
  • 同じように#30DAYSトライアルの2ndDAY12で悩んでいる方
  • 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);
    }
}

 

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

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

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

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

CSSのポイント解説

positionで要素の位置を決める

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

 

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

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

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

z-indexの役割

mito
mito
z-indexをつけずに書くと、ストライプが文字の上に重なってしまいます。
momo
momo
z-indexを使うことで重なっている要素の順番を入れ替えることができるよ。

擬似要素(after)の装飾

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

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

 

ABOUT ME
mito
こんにちは!mitoです。 2児の母で、会社員。 現在は複業でWebデザイナーをしています。 2019年1月からWebデザインの勉強を始めました。 子育てをする中で、自分の生活に働き方を合わせたいと思うようになり、フリーランスを模索しています。 好奇心旺盛でやりたいこと多め、ワクワクすると止まれない性格です。 同じように一緒にチャレンジする人の背中そっと押せたり、励ましあえるようなブログになるといいなと思っています。