【デイトラ学習記録】Web制作コース旧課題中級編DAY44 ボタン、見出しを自在に作れるようになる【見出し編②】

2023年6月29日2023年11月10日

皆さん、こんにちは。ここぽてとです。デイトラ中級編DAY16の見出し編の後半の学習記録を書いていきます。

こちらは与えられた見出しとボタンをコーディングしていく課題です。長いので見出し編②としております。

ここぽてと

引き続きいろんなパターンの見出しを作っていきます！

いろんなパターンの見出しを作って、慣れてきたらいろいろアレンジしていきたいですね。
では、今日も頑張ってコーディングしていきます。

準備編(前回と同じ）

$font-size:24px;
$main-color:#3F51B5;
$text-color:#333;
$pattern-width:475px;

body{
    font-family: "Font Awesome 5 free","游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    width: 100%;
    font-size:$font-size;
    font-weight: bold;
    color: $text-color;
    background:#fff;
   }

Sassでよく使う色や、大きさあらかじめ定義しておきます。定義しておくことで、後で一括変更も可能で、かなり楽になりますよ♪VS.codeでのSassのコンパイルの方法は、こちらに詳しく載っていたので参考にしてみてください。

見出しパターン　１１～１７まで

<p class="pattern11">見出しパターン１１</p>

  .pattern11{
        margin: 0 280px 0 280px;
        position: relative;
        display: inline-block;
        margin-bottom: 1em;
      }
    .pattern11:before {
        content: '';
        position: absolute;
        bottom: -17px;
        display: inline-block;
        width: 60px;
        height: 4px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        background-color: $main-color;
        border-radius: 2px;
      }

このパターンは以前も作ったことがあるので、イメージしやすかったです。前回は::afterで作っていました。

<head>
  <script src="https://kit.fontawesome.com/eea364082e.js" crossorigin="anonymous"></script>
</head>

<p class="pattern12">見出しパターン１２</p>

   .pattern12{
        position: relative;
        padding-left: 1.2em;/*アイコン分のスペース*/
        line-height: 1.4;
      }
      .pattern12:before {
        font-family: "Font Awesome 5 Free";
        content: "\f00c";/*アイコンのユニコード*/
        font-weight: 900;
        position: absolute;/*絶対位置*/
        font-size: 1em;/*サイズ*/
        left: 0;/*アイコンの位置*/
        top: 0;/*アイコンの位置*/
        color: $main-color; /*アイコン色*/
        font-weight: 900;
      }

チェックマークがうまく表示できなくて時間かかりました。前提条件として、ヘッドタグ内にFont　awesomeのURLを入れておかないと使えないみたいです。Font awesomeはサイトやブログでwebアイコンフォントを表示でき、商標利用が可能で、画像を読み込まなくてもアイコンを表示できるのでとても便利です。

たくさんのアイコンがあってどれを使おうか迷います！FreeとProで使えるアイコンとそうでないアイコンがあるみたいです。

<p class="pattern13">見出しパターン１３<div class="my-parts"><span></span></div></p>

  .my-parts {
        display: inline-block;
        width: 40px;
        height: 40px;
        font-size: 30px;
        position: relative;
    }
    .my-parts span {
        position: absolute;
        display: block;
        top: -150%;
        right: -455%;
        width: 25%;
        height: 25%;
        border-radius: 80%;
        margin: -.28em 0 0 -.28em;
        border: .10em solid $main-color;
    }
    .my-parts span::after {
        position: absolute;
        display: block;
        content: "";
        top: 50%;
        left: 50%;
        width: 70%;
        height: 25%;
        background: $main-color;
        margin: .2em 0 0 .14em;
        transform: rotate(45deg);
    }

こちらの記事を参考に色々数字をいじりながら調整しました。1番設定するのに時間がかかりましたが、位置関係のいい勉強になりました。

あわせて読みたい

虫眼鏡のアイコン | コピペで簡単！Webパーツ屋

<p class="pattern14>見出しパターン１４</p>

 .pattern14 {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26px;
        text-align: center;
    }
    
    .pattern14::before,
    .pattern14::after {
        content: '';
        width: 3px;
        height: 40px;
        background-color:$main-color;
    }
    
    .pattern14::before {
        margin-right: 30px;
        transform: rotate(-35deg)
    }
    .pattern14::after {
        margin-left: 30px;
        transform: rotate(35deg)
    }

<p class="pattern15>見出しパターン１５</p>

.pattern15 {
    align-items: center; /* 横線を上下中央 */
    display: flex; /* 文字と横線を横並び */
    justify-content: center; /* 文字を中央寄せ */
  }
  .pattern15::before,
  .pattern15::after {
    background-color: $main-color; /* 横線の色 */
    content: "";
    height: 3px; /* 横線の高さ */
    width: 130px; /* 横線の長さ */
  }
  .pattern15::before {
    margin-right: 15px; /* 文字との余白 */
  }
  .pattern15::after {
    margin-left: 15px; /* 文字との余白 */
  }

<p class="pattern16">見出しパターン１６</p>

  .pattern16{
    width: 215px;
    padding: 8px 10px;
    background: repeating-linear-gradient(-45deg, #7385E9, #7385E9 10px, #A7BAFF 5px, #A7BAFF 20px);
  }

<p class="pattern17">見出しパターン１７</p>

 .pattern17{
    position: relative;
    &::before {
      display: inline-block;
      content: "";
      background-size: auto auto;
      background-color: #A7BAFF;
      background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 10px,
        #7385e9 1px,
        #7385E9 19px,
      );
      width: 238px;
      height: 50%; /*行の高さ*/
      position: absolute;
      bottom: 0;
      z-index: -1; /*数が大きいほど手前に出る*/
    }
}

ストライプ柄をCSSで作成する場合、パターン16も17もrepeating-linear-gradientを使うのですが、Sassの記述量が全然違いますね。難しかったので下の記事を参考にしています。

https://fukuro-blog.com/archives/443

ストライプ柄を画像で作ると楽ですが、WEB制作で、後でカラーを変えたり、ストライプの太さを変えたりする可能性がある事を考えれば、CSSで作ったほうが良いですね。(まだ慣れていないから難しいけど）

感想

17個全部作るのはボリューム多くてとても大変でした！（まだボタン編が残っているけれど）疑似要素（before/after)をこのように使って、見出しパターンを最初から作るとか思いつかないので、まだまだ勉強不足だなと思いました。今回使ったものはnotionに登録して、WEB制作やブログに活かしていきたいと思います。

よかったらシェアしてね！