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

【デイトラ学習記録】ボタン、見出しを自在につくれるようになる【見出し編②】

皆さん、こんにちは。ここぽてとです。デイトラ中級編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のコンパイルの方法は、こちらに詳しく載っていたので参考にしてみてください。

みやしもブログ
VSCodeでSASS・SCSSをコンパイルする方法【初心者向き】 人気のテキストエディターVisual Studio Codeで【SASS・SCSS】をコンパイルする方法を解説します。プラグイン『Live Sass Compiler』を使った簡単に出来る方法です。Web制...

見出しパターン 11~17まで

見出しパターン11
<p class="pattern11">見出しパターン11</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で作っていました。

見出しパターン12
<head>
  <script src="https://kit.fontawesome.com/eea364082e.js" crossorigin="anonymous"></script>
</head>
<p class="pattern12">見出しパターン12</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アイコンフォントを表示でき、商標利用が可能で、画像を読み込まなくてもアイコンを表示できるのでとても便利です。

あわせて読みたい
Find Icons with the Perfect Look & Feel | Font Awesome Used by millions of designers, devs, & content creators. Open-source. Always free. Check out the all-new Sharp Solid icons, available in Font Awesome 6 Pro.

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

見出しパターン13
<p class="pattern13">見出しパターン13<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番設定するのに時間がかかりましたが、位置関係のいい勉強になりました。

見出しパターン14
<p class="pattern14>見出しパターン14</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)
    }
見出しパターン15
<p class="pattern15>見出しパターン15</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; /* 文字との余白 */
  }
見出しパターン16
<p class="pattern16">見出しパターン16</p>
  .pattern16{
    width: 215px;
    padding: 8px 10px;
    background: repeating-linear-gradient(-45deg, #7385E9, #7385E9 10px, #A7BAFF 5px, #A7BAFF 20px);
  }
見出しパターン17
<p class="pattern17">見出しパターン17</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の記述量が全然違いますね。難しかったので下の記事を参考にしています。

あわせて読みたい

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

感想

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

毎日少しずつレベルアップ!
毎日スキルアップを目指して勉強するブログ。
最近は主にWEB制作を勉強中!
仕事は子どもにお勉強を教える仕事をしています。

目次