【超有料級】元プロ講師が教える🔥Webページの作り方講座｜第5回【CSSの応用】

⭐経歴＆実績⭐
・小中学生プログラミング教室の校責任者として、200名以上に個別授業
・中高大生プログラミング教室の校責任者として、100名以上に集団授業
・教育企業の管理職向けDX研修担当者として、50名以上に集団研修
・教育業界の現状を変えるため退職、無職クリエイター活動開始🤞

皆さん、こんにちは！
「元プロ講師が教える🔥Webページの作り方講座」、前回に続き第5回は、【CSSの応用】の解説です！

👇 本記事は、配信動画を見ながら進めると、よりスムーズに理解できます👇

【超有料級】元プロ講師が教える🔥Webページの作り方講座｜第5回【CSSの応用】

今回の目標

タイトル未設定

擬似クラス

要素の特定の状態や順番に飾り付けるため、セレクタに付加するキーワードです。

:link
href属性をもつ要素のうち、そのリンクが未訪問の状態のスタイルを指定

:visited
href属性をもつ要素のうち、そのリンクが訪問済みの状態のスタイルを指定

:hover
指定した要素にマウスカーソルが重なっている状態のスタイルを指定

:active
<a>要素や<button>要素などをクリックしてから離すまでのスタイルを指定

:nth-of-type()
同じ兄弟要素のうち、◯番目の要素のみを指定（odd奇数、even偶数）

:nth-last-of-type()
同じ兄弟要素のうち、逆順で◯番目の要素のみを指定

.nav__link:link {
    background-color: yellow;
}
.nav__link:visited {
    background-color: white;
}
.nav__link:hover {
    background-color: var(--main-color);
}
.nav__link:active {
    color: var(--text-color);
}
.nav__item:nth-of-type(1) {
    background-color: black;
}
.nav__item:nth-last-of-type(1) {
    background-color: red;
}


:root {
    --sub-color: #0000EE;/* 追加 */
    --sub-color-rgb: 0,0,238;/* 追加 */
}
.logo:visited {
    color: var(--sub-color);
}
.nav__link:visited {
    color: var(--sub-color);
}
.nav__link:hover {
    padding: 0 1rem;
    background-image: repeating-linear-gradient(-45deg, rgba(var(--main-color-rgb), 0.1), rgba(var(--main-color-rgb), 0.1) 5px, transparent 5px, transparent 10px);
}

擬似要素

要素の特定の部分に飾り付けるため、セレクタに付加するキーワードです。

::before
指定した要素の前に要素を挿入、contentプロパティを利用して要素に飾りを追加、疑似要素自体に飾り付けも可能

::after
指定した要素の後に要素を挿入、contentプロパティを利用して要素に飾りを追加、疑似要素自体に飾り付けも可能

.nav__item {
    position: relative;/* 追加 */
    margin-left: 40px;
    border-bottom: 3px solid var(--main-color);/* 追加 */
    list-style: none;
}
.nav__item::before {
    position: absolute;
    top: -0.5rem;
    left: -0.3rem;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: var(--main-color);
    content: '';
}
.nav__item::after {
    position: absolute;
    top: 0.3rem;
    left: -0.7rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--main-color);
    content: '';
}

CSSアニメーション

要素をアニメーションさせるCSSの機能です。

CSS Animation
開始（0%）から終了（100%）までの経過地点にプロパティを指定、細かい動きのアニメーション

CSS Transition
一定時間でプロパティを変化させる機能、単純な動きのアニメーション

.logo:hover {
    animation: ball 0.3s 0s ease infinite alternate;/* キーフレームアニメーションを無限ループ */
}
@keyframes ball {
    0% {
        transform: translate(0%, 0.1rem);
    }
    100% {
        transform: translate(0%, -0.8rem);
    }
}


.nav__link {
    font-size: 1.2rem;
    font-family: var(--font-set-en-lead);
    text-decoration: none;
    transition: all 0.3s 0s ease;/* 適用プロパティ、変化の完了時間、変化開始前の遅延時間、変化の度合 */
}

デプロイ（Webページの公開）

「デプロイ」＞「新しいデプロイ」＞「種類の選択：ウェブアプリ」＞「アクセスできるユーザー：全員」＞「URL」をコピーしましょう！

まとめ

• 擬似クラス
  特定の状態や順番に飾り付けるため、セレクタに付加するキーワード

• 擬似要素
  特定の部分に飾り付けるため、セレクタに付加するキーワード

• CSSアニメーション
  要素をアニメーションさせるCSSの機能

今回は、【CSSの応用】を解説しました。
これからも、インプットとアウトプットを繰り返して、一緒にレベルアップしていきましょう！

少しでも良かったなと思った方は、チャンネル登録よろしくお願いします！
第6回は【レスポンシブデザイン】を配信します。それでは、また次回〜！🖐️