40代高卒者が製造業からIT転職する【変わり種デザイン】

programming
DMM WEBCAMP

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

今回は、変わり種シリーズで、

WEBページの背景カラーを自由に選べるデザインのコードを書いて行きたいと思います。

変わり種シリーズは、役に立つかはあなた次第のちょっと変わったデザインを紹介して行きます。

前回の記事はこちらです。

カスタムカラーデザイン

カラーパレットが真ん中にあり、カラーを選んで、適用ボタンを押すと、

バックグラウンドカラーが変わるコードです。

なんの役に立つかは、わかりません笑

使いたかとしては、何か商品があって

その商品の色々なカラーを見てみたい!って時の見栄えの違いなどに使えるかも?笑

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>カスタムカラー</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>好きな色を選んでください</h1>
  <input type="color" id="colorPicker" value="#ffffff">
  <button id="applyColor">適用</button>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="scripts.js"></script>
</body>
</html>

<input type="color" id="colorPicker" value="#ffffff">

カラーピッカーの入力フィールドを作成します。

ID属性にcolorPickerを指定し、デフォルトの値を白(#ffffff)に設定しています。

<button id="applyColor">適用</button>

選択したカラーをページの背景色に適用するためのボタンを作成します。

ID属性にapplyColorを指定し、ボタンのテキストとして「適用」と表示されます。

CSS

/* styles.css */
body {
  transition: background-color 0.5s ease;
  font-size: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

#colorPicker {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

#colorPicker::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
  border-radius: 50%;
}

#applyColor {
  margin-top: 1rem;
}

@media (max-width: 768px) {
  #colorPicker {
    width: 80px;
    height: 80px;
  }
}

@media (max-width: 480px) {
  #colorPicker {
    width: 60px;
    height: 60px;
  }
}

body

ページ全体のスタイルを設定します。

transition: background-color 0.5s ease;

背景色の変更にアニメーション効果を適用し、0.5秒かけて変更します。

font-size: 18px;

ページ全体のフォントサイズを18pxに設定します。

display: flex;

body要素にFlexboxレイアウトを適用します。

flex-direction: column;

Flexboxの方向を縦方向に設定します。

align-items: center;

Flexboxの子要素を水平方向に中央に配置します。

justify-content: center;

Flexboxの子要素を垂直方向に中央に配置します。

height: 100vh;

body要素の高さをビューポートの高さ(100vh)に設定します。

margin: 0;

body要素のマージンを0に設定します。

#colorPicker

カラーピッカー要素のスタイルを設定します。

width: 100px;

要素の幅を100pxに設定します。

height: 100px;

要素の高さを100pxに設定します。

border-radius: 50%;

要素を円形にするため、ボーダーの半径を50%に設定します。

cursor: pointer;

マウスカーソルが要素上にあるとき、カーソルをポインタに変更します。

display: flex;

要素にFlexboxレイアウトを適用します。

align-items: center;

Flexboxの子要素を水平方向に中央に配置します。

justify-content: center;

Flexboxの子要素を垂直方向に中央に配置します。

position: relative;

要素の位置を、親要素に対して相対的に設定します。

z-index: 1;

要素の重なり順を指定します。この場合、z-indexが高い要素が下に表示されます。

#colorPicker::before

カラーピッカー要素の疑似要素を設定します。

content: ”;

疑似要素のコンテンツを空に設定します。

position: absolute;

疑似要素の位置を、親要素に対して絶対的に設定します。

z-index: -1;

疑似要素の重なり順を指定します。

この場合、z-indexが低い要素が下に表示されます。

top: 0;

疑似要素の上端を親要素の上端に揃えます。

left: 0;

疑似要素の左端を親要素の左端に揃えます。

width: 100%;

疑似要素の幅を親要素の幅に一致させます。

height: 100%;

疑似要素の高さを親要素の高さに一致させます。

background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);

疑似要素の背景を中央から外側に向かって白から黒へ変化するグラデーションに設定します。

border-radius: 50%;

疑似要素を円形にするため、ボーダーの半径を50%に設定します。

#applyColor

適用ボタンのスタイルを設定します。

margin-top: 1rem;

ボタンの上部に1remのマージンを設定します。

@media (max-width: 768px)

メディアクエリを使用して、画面幅が768px以下の場合のスタイルを設定します。

#colorPicker

カラーピッカー要素のスタイルを設定します。

width: 80px;

要素の幅を80pxに設定します。

height: 80px;

要素の高さを80pxに設定します。

@media (max-width: 480px)

メディアクエリを使用して、画面幅が480px以下の場合のスタイルを設定します。

#colorPicker

カラーピッカー要素のスタイルを設定します。

width: 60px;

要素の幅を60pxに設定します。

height: 60px;

要素の高さを60pxに設定します。

jQuery

// scripts.js
$(document).ready(function () {
  $("#applyColor").on("click", function () {
    const selectedColor = $("#colorPicker").val();
    $("body").css("background-color", selectedColor);
  });
});

$(document).ready(function () { … });

ドキュメントが読み込まれた後、

この関数内のコードが実行されます。

これは、ページが完全に読み込まれるまで、

イベントリスナーの設定などのコードが実行されないようにするための慣習的な方法です。

$(“#applyColor”).on(“click”, function () { … });

IDが”applyColor”の要素(適用ボタン)にクリックイベントリスナーを追加します。

このボタンがクリックされると、関数内のコードが実行されます。

const selectedColor = $(“#colorPicker”).val();

IDが”colorPicker”の要素(カラーピッカー)から、

現在選択されている色の値を取得し、selectedColor変数に格納します。

$(“body”).css(“background-color”, selectedColor);

selectedColor変数に格納された色を、body要素の背景色として設定します。

これにより、選択された色がページの背景色に適用されます。

まとめ

いかがでしょうか?

この役に立つかどうかわからない感じ笑

私が初心者の時に苦労したのが、CSSの解説です。

CSSを見てもなんことだかわからないって、時が多かったのを思い出します。(今もだけど)

なので、出来るだけCSSは細かく解説を付けて行きたいと思っています。

色々書いて楽しみましょう!

レッツチャレンジ!