【Udemy(CSS / Sass) : clip-path,transform,kyeframes】

開始前のリセット

＊(ユニバーサルセレクター){}を使って、簡単なリセットを行う(クリーンにする)

ブラウザのデフォルトには、いくつかの要素に一定のmargin / paddingがある
ex) h1要素、つまり大見出しには、必ず余白がある
box-sizingをborder-boxに設定
= ボックスモデルを変更し、ボーダー・パディングがボックスに指定した合計幅または合計高さに追加されないようにするもの。これがないと、パディング・ボーダーが要素の高さや幅に追加されるがあまり役に立たない。そこでこの記述によって、その動作をなくす
body　：body要素は、基本的に他のすべての要素の親要素。
・フォントに関するプロパティは、通常継承される。
・このフォントファミリーは、bodyのすべての子要素に継承される。ユニバーサルセレクタにすべて入れるより効果的

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: "Lato",sans-serif;
}

kohei nemawari

画像でやりたかったこと（メタスライダーっぽいやつ）

/* やりたかったこと */
.header{
    height: 95vh; /* 100%ではなく、ほぼ100%にするため95vh */
    background-image: url(../img/hero.jpg);
    background-size: cover; /* coverが行うのは、ビューポートや要素の幅に関係なく常に要素をボックス内に収めようとすること */
    background-position: top;/* 画像の上部が、常にコンテナの上部で留まるようにするため */
}

kohei nemawari

グラデーションを被せる

◎単に background-image: url(../img/hero.jpg);へ２つの要素を入れればいいだけ
・グラデーションを指定するには、常にbackground-imageプロパティを使用する

.header{
    height: 95vh;
    background-image: linear-gradient(
        to right bottom,
        rgba(126, 213, 111, 0.8),
        rgba(40, 180, 133, 0.8)),
        url(../img/hero.jpg); /* グラデーションを掛ける。background-imageに要素を２つ指定する */
    background-size: cover;
    background-position: top;
}

kohei nemawari

clip-pathプロパティ

.header{
    height: 95vh;
    background-image: linear-gradient(
        to right bottom,
        rgba(126, 213, 111, 0.8),
        rgba(40, 180, 133, 0.8)),
        url(../img/hero.jpg);
    background-size: cover;
    background-position: top;

    clip-path: polygon(0 0,100% 0,100% 75vh, 0 100%); /* 今回はvhで対応。そうすると可変してもOK */
}

kohei nemawari

セクション2

imgを囲うdivを配置
┣ imgタグはインライン要素なので、小さなコンテナを用意し、画像とコンテナを配置したい場所に配置するのがベターな方法
┣ altについて：alt属性はSEO（検索エンジン最適化）のために記述するもの、画像が表示されなかったときに表示するため

<header class="header"> 
    <div class="logo-box">
        <img src="img/logo-white.png" alt="logo" class="logo">
    </div>
</header>

.header{
    ,
    ,
    ,
    position: relative;
}

.logo-box{
    position: absolute;
    top: 40px;
    left: 40px;
}
.logo{
    height: 35px;
}

kohei nemawari

transform,top,left

要素の組み方

hは、Googleや他の検索エンジンが私たちのwebページがなんであるかを把握するために重要な、ページ上の単一の最も重要な見出し。そこにwebページのタイトルを入れることが重要
spanはデフォルトでインライン要素 display: block;にすれば縦並びになる

<header class="header"> 
    <div class="logo-box">
        <img src="img/logo-white.png" alt="logo" class="logo">
    </div>

    <h1 class="heading-primary">
        <span class="heading-primary-main">Octdoors</span>   
        <span class="heading-primary-sub">is where life happens</span>
    </h1>
</header>

heading-primary{
    color: #fff;
    text-transform: uppercase;/* テキストを大文字にする */
}
.heading-primary-main{
    display: block;
    font-size: 60px;
    font-weight: 400;
    letter-spacing: 35px;
}
.heading-primary-sub{
    display: block;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 17.4px;
}

要素を中心に（⭐️⭐️やりたかったこと）

transform: translate(-50%,-50%);を使う

top: 50% left: 50％この指定で、位置としては間違いではない
┣ 左から50%の位置で開始、トップから50%の位置から開始

<div class="text-box">
    <h1 class="heading-primary">
        <span class="heading-primary-main">Octdoors</span> 
        <span class="heading-primary-sub">is where life happens</span>
    </h1>
</div>

/* 画面サイズに関わらず、中央にピッタリと収める 幅・画面の高さがどんなんでも　必ず真ん中に収まるように*/
.text-box{
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: red;
}

⭐️ここ大事！！！

.text-box{
    position: absolute;
    top: 40%;　/* 親要素との関係 */
    left: 50%;　/* 親要素との関係 */
    transform: translate(-50%,-50%);　/* 親要素と関係ない。要素そのもの */
}

kohei nemawari

@keyframes , animation

transition : 要素をホバーした時などのイベントでアニメートさせてたいプロパティを変更する方法
keyframesを使用する方法

keyframesをアットルールとして使用

.heading-primary-main{
    ,,,
    animation-name: moveInLeft;
    animation-duration: 3s;
    animation-timing-function: ease-out; 
}
.heading-primary-sub{
    ,,,
    animation: moveInRigth 1s ease-out; 
}

@keyframes moveInLeft{
    0%{
        opacity: 0;
        transform: translateX(-100px);
    }
    80%{
        /* 少し右に行く */
        transform: translateX(10px);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

上記記述の解説

.heading-primary-main{
    ,,,
    animation-name: moveInLeft;  /* アニメーションを呼び出す */
    animation-duration: 3s; /* アニメーションにかかる時間を設定 */
    animation-timing-function: ease-out; /* アニメーションの進行方法を定義する関数 */
}
.heading-primary-sub{
    ,,,
    animation: moveInRigth 1s ease-out; /* まとめた書き方 */
}
@keyframes moveInLeft{
    /********************************************************************************************************
     * ここにアニメーションの各瞬間に起こることを指定する
     * 実際にアニメーションを開始する前(0%)から始める
     * 2つの異なるプロパティをアニメーション化するのがベスト（opacity,transform）、この二つに対してブラウザは最適化されている
     * エレメントは左から入ってくる
     * 初期状態と最終状態だけの基本的なアニメーション
     * 定義したアニメーションは複数箇所で使用できる*********************************************************************************************************/
    0%{
        /* アニメーション開始前は、目に見えないようにする（不透明度0） */
        opacity: 0;
        /*  */
        transform: translateX(-100px);
    }
    /*************************************
     * 途中の値を入れる 
     *************************************/
    80%{
        /* 少し右に行く */
        transform: translateX(10px);
    }
    /*************************************
     * アニメーションが終了する（最終的な状態） 
     *************************************/
    100%{
        /* アニメーション終了時は、見えるようにする（不透明度100） */
        opacity: 1;
        /* なぜ０？今と同じようにみえるから */
        transform: translateX(0);
    }
}

:::オプションが色々ある

/* アニメーション開始待機時間 */
animation-delay: 3s;
/* アニメーションが3回繰り返される */
animation-iteration-count: 3;

https://easings.net/

backface-visibility: hidden;
┣ アニメーションで見られるブレを解消するため
┣ その見出し主要素全体（親要素？）が
┣ 要素を変形させたときに、その背面部分がユーザーにとって見えるか隠れるかを決定するのもである。
┣ ある要素を180度回転させたとして、その要素の背面部分を見るのが筋というものでしょう。backface-visibility: hiddenを使用すると、その背面部分、つまり要素の背後にある部分、例えばその部分が実際に隠されることになる

◎余談
⌘+Dで複数選択
:::

kohei nemawari

ボタン

pseudo-elements と pseudo-classes
なぜ::after pseudo-element
ホバーした際のアニメーションをtransitionを使って作成

pseudo-elements と pseudo-classes

テスト

<div class="text-box">
            `
            `
            `
    <a href="#" class="btn btn-white"></a>  <!-- ページ内に複数ボタンを設置する際、class名に色名をつける -->
</div>

.text-box{
    text-align: center; /* ※1. インラインブロックを指定したことで、テキストと同じ扱いが可能 ※1*/
}

/* リンク擬似クラス ボタンセレクターの状態 */
/* ユーザーがすでに以前に一度ボタンをクリックした後、再びボタンを見た時の状態。訪問済みの状態 */
.btn:link,
.btn:visited{
    text-transform: uppercase;
    text-decoration: none;
    padding: 15px 40px;
    display: inline-block; /* ボタンがインライン要素だから。幅などを与えたい場合は、常にこれを意識する */
    border-radius: 100px;
    /* 簡単なアニメーションはtransition,複雑なアニメーションはkeyframes */
    /* ここで下記transformに対して、変形時間を一括指定 */
    transition: all .2s;
}

/* === 最初のリンク状態に対して ===*/
.btn:hover{
    transform: translateY(-3px); /* ホバーしたら、ボタンが上に上がる */
    box-shadow: 0 5px 10px rgba(0,0,0,.2); /* ホバーしたら、ボタンが上に上がるので、影をつける */
}
.btn:active{
    /* アクティブ時のトランスフォームも初期状態との関係でアニメーション化される */
    /* クリックしたら、ボタンが下がる */
    transform: translateY(-1px);
}
.btn-white{
    background-color: #fff;
    color: #777;
}

after要素の使い方

・選択中の要素のすぐ後に仮想的な要素を追加することができる。そして、その要素のスタイルを設定することができる。
・after要素が、ボタンの子のように扱われる。(今回の場合、ボタンの実装に向けての為)

.btn:link,
.btn:visited{
    `
    `
    `
    position: relative;
}
.btn::after{
    content:""; /* 必須 */
    display: inline-block; /* ボタンがインラインだから */
    height: 100%;
    width: 100%;
    border-radius: 100px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.btn-white::after{
    background-color: #fff;
}

/* ボタンにカーソルを合わせた時に表示されるようにしたい（ボタンをホバー状態にした時だけの後付けの擬似要素）*/
/* 大きいエフェクトを出したい。素子が成長し、フェードアウトしていくことを望んでいる */
.btn:hover::after{
    transform: scale(2); /* スケールは何をするか、単純に素子を増やす。2にすれば2倍 */
}

フェードアウトのコツ

.btn:hover::after{
    transform: scaleX(1.4) scaleY(1.6); /* スケールは何をするか、単純に素子を増やす。2にすれば2倍。scaleXを実行すればx軸方向に変動 */
    opacity: 0; /* フェードアウトのコツ、不透明度を0にする*/
}

ボタン上からのアニメーションのコツ

<div class="text-box">
    `
    `
    `
    /* アニメーションをかけたい位置に専用のクラスをつける（btn-animated） */
    <a href="#" class="btn btn-white btn-animated">Discover our toues</a>
</div>

.btn-animated{
    animation: moveInBottom .5s ease-out .75s; /* animation: 定義したアニメーション名 .5s ease-out 遅延時間 */
    animation-fill-mode: backwards; /* 後方に設定するだけで、アニメーションが始まる前にスタイルを0%まで自動的に適用する */
}

このスクラップは23日前にクローズされました