40代高卒者が製造業からIT転職する【デザイン要素解説】

こんにちは、フローです。

今回は、前回書いたデザイン要素のCSSの解説を書いていきたいと思います。

1 CSS要素の解説
2 まとめ

CSS要素の解説

まずは前回のCSS全体を見ていきましょう。

header {
  height: 200px;
  background-color: #333;
  display: flex;
  align-items: center;
}

.header-text {
  font-size: 48px;
  color: white;
  margin: 0 auto;
  position: relative;
}

.header-text:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
  z-index: 2;
  pointer-events: none;
}

.header-text:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(to right, #333 0%, rgba(255,255,255,0) 50%, #333 100%);
  z-index: 1;
  pointer-events: none;
  animation: text-slide 4s linear infinite;
}

@keyframes text-slide {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  50% {
    transform: translateX(50px);
    opacity: 0.5;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.header-text:hover:after {
  animation-play-state: paused;
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

これですね。

この内容を、各要素ごとに見ていきましょう。

header

header {
  height: 200px;
  background-color: #333;
  display: flex;
  align-items: center;
}

.header要素は、アニメーションを適用するコンテナーであり、

高さを200pxに設定し、背景色を黒に設定します。

また、displayプロパティをflexに設定し、子要素を縦方向に中央揃えにします。

header-text

.header-text {
  font-size: 48px;
  color: white;
  margin: 0 auto;
  position: relative;
}

.header-textは、アニメーションを適用するテキスト要素です。

フォントサイズを48pxに設定し、白色にします。また、

marginプロパティを0 autoに設定し、水平方向に中央揃えにします。

最後に、positionプロパティをrelativeに設定し、

その後に表示されるbeforeおよびafter要素に対して、

相対的な位置を指定するために使用されます。

header-text:before

.header-text:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
  z-index: 2;
  pointer-events: none;
}

.header-text:beforeは、

テキストの前面に重ねるpseudo要素であり、

アニメーションのフェード効果を作成するために使用されます。

contentプロパティに空の文字列が設定され、

positionプロパティがabsoluteに設定され、

親要素に対して相対的に配置されます。

widthおよびheightプロパティは、100%に設定され、

親要素のサイズに合わせて大きさが変更されます。

backgroundプロパティは、グラデーションを定義し、

to rightに設定することで、左から右に向かってグラデーションが適用されます。

rgba(255,255,255,0)は透明な白を表し、

グラデーションの始まりと終わりの位置で使用されます。

z-indexプロパティを設定し、テキストの前面に配置されます。

また、pointer-eventsプロパティをnoneに設定して、

クリックやその他のマウスイベントに反応しないようにします。

header-text:after

.header-text:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(to right, #333 0%, rgba(255,255,255,0) 50%, #333 100%);
  z-index: 1;
  pointer-events: none;
  animation: text-slide 4s linear infinite;
}

.header-text:afterは、

テキストの後面に重ねるpseudo要素であり、

テキストのスライドアニメーションを作成するために使用されます。

この要素には、contentプロパティに空の文字列が設定され、

positionプロパティがabsoluteに設定され、親要素に対して相対的に配置されます。

widthおよびheightプロパティは、100%に設定され、

親要素のサイズに合わせて大きさが変更されます。

backgroundプロパティは、グラデーションを定義し、

#333から始まり、途中で透明になり、

再び#333に戻ることで、テキストの後ろに影を作ります。

この要素にz-indexプロパティを設定し、

.header-text:beforeよりも背面に配置されます。

また、pointer-eventsプロパティをnoneに設定して、

この要素はクリックやその他のマウスイベントに反応しないようにします。

最後に、animationプロパティにtext-slideという名前のアニメーションを設定し、4秒間線形に移動し続けます。

@keyframes

@keyframes text-slide {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  50% {
    transform: translateX(50px);
    opacity: 0.5;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframesルールは、アニメーションの動作を定義します。

text-slideはアニメーションの名前で、

3つのkeyframesが定義されています。

0%はアニメーションの最初の状態を表し、100%は最後の状態を表します。

50%は、アニメーションの中間状態を表します。

transformプロパティは、テキストを水平方向に移動するために使用され、

translateX関数を使用して、水平方向の距離を指定します。

opacityプロパティは、テキストの透明度を指定し、

0から1の範囲で設定できます。

これにより、テキストがフェードイン/アウトするような効果が得られます。

0%と100%のopacityプロパティは、常に1であり、

テキストが常に表示されるようにします。

50%のopacityプロパティは、0.5に設定され、テキストが半透明になります。

header-text:hover:after

.header-text:hover:after {
  animation-play-state: paused;
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

.header-text:hover:afterは、

ホバーイベントが発生したときに、アニメーションを停止し、

フェードアウト効果を作成するために使用されます。

この要素には、

animation-play-stateプロパティが設定され、

pausedに設定され、アニメーションを停止します。

また、opacityプロパティが設定され、

0に設定され、テキストを徐々にフェードアウトさせます。

最後に、transitionプロパティが設定され、

0.5秒かけて徐々にフェードアウトするように設定されます。

ease-outは、アニメーションがゆっくりと開始し、終了時に速くなるように設定されます。

まとめ

以上が、このCSSコードの要素の説明です。

このコードは、アニメーションとグラデーションを組み合わせて、

サイトのヘッダーに注目を集めるデザインを実現しています。

しかし、見た目は面白いかもしれませんが、

デザイン設計は、自分がやりたい事をやるのではなく、見てくれる人に合わせる事が大切です。

色々なデザインやコードを楽しみましょう！

レッツチャレンジ！

カテゴリー