Open2024/08/20にコメント追加12

【ときメーター】距離に応じて色が変わるWEBサイト作り

GPSで取得した距離に応じて背景色の変わるウェブサイトを作る

現在のコード

<html>
  <head>
    <meta charset="utf-8">
    <title>GPS</title>
    <meta name="viewport" content="width=device-width" />
    <meta name="description" content="Displays the straight line distance to Kawasaki Station." />
    <script src="https://geographiclib.sourceforge.io/scripts/geographiclib-geodesic.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FAFAFA;
        font-size: 24px;
        font-weight: 900;
        background: #FFC0CB; /* 背景色をピンク色に変更 */
      }

      .display {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      #distanceText {
        font-size: 24px;
        margin-bottom: 10px;
      }

      #m {
        font-size: 40px;
      }

      #timestamp {
        position: fixed;
        bottom: 8px; right: 8px;
        color: #0D47A1;
        font-size: 12px;
      }
    </style>
  </head>
  <body>
    <div>
      <div class="display">
        <p id="distanceText">2人の距離</p> <!-- 距離表示の上にテキストを追加 -->
        <p id="m"></p>
      </div>
      <p id="timestamp"></p>
    </div>
    <script>
      const goalLatLong = [35.531389, 139.696944]; // 目標地点の緯度,経度（川崎駅）

      navigator.geolocation.watchPosition(handleWatchPosition, null, {
        enableHighAccuracy: true,
        timeout: 60000,
        maximumAge: 0
      });

      function handleWatchPosition(evt) {
        const latitude = evt.coords.latitude;
        const longitude = evt.coords.longitude;
        const accuracy = evt.coords.accuracy;
        const altitude = evt.coords.altitude;
        const altitudeAccuracy = evt.coords.altitudeAccuracy;
        const heading = evt.coords.heading || 0;
        const speed = evt.coords.speed;
        const timestamp = evt.timestamp;

        document.getElementById('timestamp').textContent = timestamp;

        if (latitude && longitude) {
          const geod = window.geodesic.Geodesic.WGS84;
          const r = geod.Inverse(
            latitude, longitude,
            ...goalLatLong
          );

          document.getElementById('m').textContent = `${ r.s12.toFixed(2) }m`;
        }
      }
    </script>
  </body>
</html>

ChatGPTに聞いた。

・Visual Studio Code で書き直す

書き直したコード

<html>
  <head>
    <meta charset="utf-8">
    <title>GPS</title>
    <meta name="viewport" content="width=device-width" />
    <meta name="description" content="Displays the straight line distance to Kawasaki Station." />
    <script src="https://geographiclib.sourceforge.io/scripts/geographiclib-geodesic.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FAFAFA;
        font-size: 24px;
        font-weight: 900;
        background: #FFC0CB; /* デフォルトの背景色を設定 */
        transition: background 1s ease; /* 背景色がスムーズに変化するように */
      }

      .display {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      #distanceText {
        font-size: 24px;
        margin-bottom: 10px;
      }

      #m {
        font-size: 40px;
      }

      #timestamp {
        position: fixed;
        bottom: 8px; right: 8px;
        color: #0D47A1;
        font-size: 12px;
      }
    </style>
  </head>
  <body>
    <div>
      <div class="display">
        <p id="distanceText">2人の距離</p> <!-- 距離表示の上にテキストを追加 -->
        <p id="m"></p>
      </div>
      <p id="timestamp"></p>
    </div>
    <script>
      const goalLatLong = [35.531389, 139.696944]; // 目標地点の緯度,経度（川崎駅）

      navigator.geolocation.watchPosition(handleWatchPosition, null, {
        enableHighAccuracy: true,
        timeout: 60000,
        maximumAge: 0
      });

      function handleWatchPosition(evt) {
        const latitude = evt.coords.latitude;
        const longitude = evt.coords.longitude;

        document.getElementById('timestamp').textContent = new Date(evt.timestamp).toLocaleString();

        if (latitude && longitude) {
          const geod = window.geodesic.Geodesic.WGS84;
          const r = geod.Inverse(
            latitude, longitude,
            ...goalLatLong
          );

          const distance = r.s12;
          document.getElementById('m').textContent = `${ distance.toFixed(2) }m`;

          // 距離に応じて背景色を変更
          const maxDistance = 2000; // 最大距離（例: 2000m）
          const percentage = Math.min(distance / maxDistance, 1); // 0から1の割合
          
          const startColor = [255, 192, 203]; // ピンク (FFB6C1)
          const endColor = [173, 216, 230]; // ライトブルー (ADD8E6)
          
          const currentColor = startColor.map((start, i) => {
            const end = endColor[i];
            return Math.round(start + percentage * (end - start));
          });

          document.body.style.backgroundColor = `rgb(${currentColor.join(",")})`;
        }
      }
    </script>
  </body>
</html>

・10cmごとに色が変わるように設定する

書き直したコード

<html>
  <head>
    <meta charset="utf-8">
    <title>GPS</title>
    <meta name="viewport" content="width=device-width" />
    <meta name="description" content="Displays the straight line distance to Kawasaki Station." />
    <script src="https://geographiclib.sourceforge.io/scripts/geographiclib-geodesic.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FAFAFA;
        font-size: 24px;
        font-weight: 900;
        background: #FFC0CB; /* デフォルトの背景色を設定 */
        transition: background 0.5s ease; /* 背景色がスムーズに変化するように */
      }

      .display {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      #distanceText {
        font-size: 24px;
        margin-bottom: 10px;
      }

      #m {
        font-size: 40px;
      }

      #timestamp {
        position: fixed;
        bottom: 8px; right: 8px;
        color: #0D47A1;
        font-size: 12px;
      }
    </style>
  </head>
  <body>
    <div>
      <div class="display">
        <p id="distanceText">2人の距離</p> <!-- 距離表示の上にテキストを追加 -->
        <p id="m"></p>
      </div>
      <p id="timestamp"></p>
    </div>
    <script>
      const goalLatLong = [35.531389, 139.696944]; // 目標地点の緯度,経度（川崎駅）

      navigator.geolocation.watchPosition(handleWatchPosition, null, {
        enableHighAccuracy: true,
        timeout: 60000,
        maximumAge: 0
      });

      function handleWatchPosition(evt) {
        const latitude = evt.coords.latitude;
        const longitude = evt.coords.longitude;

        document.getElementById('timestamp').textContent = new Date(evt.timestamp).toLocaleString();

        if (latitude && longitude) {
          const geod = window.geodesic.Geodesic.WGS84;
          const r = geod.Inverse(
            latitude, longitude,
            ...goalLatLong
          );

          const distance = r.s12;
          document.getElementById('m').textContent = `${ distance.toFixed(2) }m`;

          // 距離に応じて背景色を変更
          const step = 0.1; // 10cmごとに色を変える
          const stepsCount = Math.floor(distance / step);

          // 色の開始と終了を設定
          const startColor = [255, 192, 203]; // ピンク (FFB6C1)
          const endColor = [173, 216, 230]; // ライトブルー (ADD8E6)
          const totalSteps = 100; // 1000cm (10m)を100ステップとする

          const percentage = Math.min(stepsCount / totalSteps, 1);

          const currentColor = startColor.map((start, i) => {
            const end = endColor[i];
            return Math.round(start + percentage * (end - start));
          });

          document.body.style.backgroundColor = `rgb(${currentColor.join(",")})`;
        }
      }
    </script>
  </body>
</html>

→あれ、変わってないぞ。

・赤色から紫色になるような色相を辿ってグラデーションを作成する

書き直したコード

<html>
  <head>
    <meta charset="utf-8">
    <title>GPS</title>
    <meta name="viewport" content="width=device-width" />
    <meta name="description" content="Displays the straight line distance to Kawasaki Station." />
    <script src="https://geographiclib.sourceforge.io/scripts/geographiclib-geodesic.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FAFAFA;
        font-size: 24px;
        font-weight: 900;
        background: hsl(0, 100%, 50%); /* デフォルトの背景色を赤に設定 */
        transition: background 0.5s ease; /* 背景色がスムーズに変化するように */
      }

      .display {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      #distanceText {
        font-size: 24px;
        margin-bottom: 10px;
      }

      #m {
        font-size: 40px;
      }

      #timestamp {
        position: fixed;
        bottom: 8px; right: 8px;
        color: #0D47A1;
        font-size: 12px;
      }
    </style>
  </head>
  <body>
    <div>
      <div class="display">
        <p id="distanceText">2人の距離</p> <!-- 距離表示の上にテキストを追加 -->
        <p id="m"></p>
      </div>
      <p id="timestamp"></p>
    </div>
    <script>
      const goalLatLong = [35.531389, 139.696944]; // 目標地点の緯度,経度（川崎駅）

      navigator.geolocation.watchPosition(handleWatchPosition, null, {
        enableHighAccuracy: true,
        timeout: 60000,
        maximumAge: 0
      });

      function handleWatchPosition(evt) {
        const latitude = evt.coords.latitude;
        const longitude = evt.coords.longitude;

        document.getElementById('timestamp').textContent = new Date(evt.timestamp).toLocaleString();

        if (latitude && longitude) {
          const geod = window.geodesic.Geodesic.WGS84;
          const r = geod.Inverse(
            latitude, longitude,
            ...goalLatLong
          );

          const distance = r.s12;
          document.getElementById('m').textContent = `${ distance.toFixed(2) }m`;

          // 距離に応じて背景色を変更
          const step = 0.1; // 10cmごとに色を変える
          const maxHue = 300; // 0から300まで色相を変化させる（赤から紫）
          const totalSteps = 100; // 1000cm (10m)を100ステップとする

          const hueValue = Math.min((distance / (totalSteps * step)) * maxHue, maxHue);

          document.body.style.backgroundColor = `hsl(${hueValue}, 100%, 50%)`;
        }
      }
    </script>
  </body>
</html>

できない・・・・

プレビューを表示しているところが違ったみたい。
ただしくんに教えてもらった！！！！
初歩的なところから教えてもらった！！！感謝！！！！
そりゃ色が変わるところを見ることができないわけだ・・・・

色が変わるコード

<html>
  <head>
    <meta charset="utf-8">
    <title>GPS</title>
    <meta name="viewport" content="width=device-width" />
    <meta name="description" content="Displays the straight line distance to the current location." />
    <script src="https://geographiclib.sourceforge.io/scripts/geographiclib-geodesic.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FAFAFA;
        font-size: 24px;
        font-weight: 900;
        background: hsl(0, 70%, 80%); /* デフォルトの背景色をパステル調の赤に設定 */
        transition: background 0.5s ease; /* 背景色がスムーズに変化するように */
      }

      .display {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      #distanceText {
        font-size: 24px;
        margin-bottom: 10px;
      }

      #m {
        font-size: 40px;
      }

      #timestamp {
        position: fixed;
        bottom: 8px; right: 8px;
        color: #0D47A1;
        font-size: 12px;
      }
    </style>
  </head>
  <body>
    <div>
      <div class="display">
        <p id="distanceText">目標地点までの距離</p> <!-- 距離表示の上にテキストを追加 -->
        <p id="m"></p>
      </div>
      <p id="timestamp"></p>
    </div>
    <script>
      const goalLatLong = [35.531389, 139.696944]; // 目標地点の緯度,経度（川崎駅など）

      navigator.geolocation.watchPosition(handleWatchPosition, null, {
        enableHighAccuracy: true,
        timeout: 60000,
        maximumAge: 0
      });

      function handleWatchPosition(evt) {
        const latitude = evt.coords.latitude;
        const longitude = evt.coords.longitude;
        const timestamp = evt.timestamp;

        document.getElementById('timestamp').textContent = new Date(timestamp).toLocaleString();

        if (latitude && longitude) {
          const geod = window.geodesic.Geodesic.WGS84;
          const r = geod.Inverse(
            latitude, longitude,
            ...goalLatLong
          );

          const distance = r.s12;
          document.getElementById('m').textContent = `${distance.toFixed(2)}m`;

          // 距離に応じて背景色を変更
          const maxDistance = 1000; // 最大距離を1km (1000m)と仮定
          const hue = Math.min((distance / maxDistance) * 240, 240); // 赤(0度)から青(240度)への変化
          const pastelColor = `hsl(${hue}, 70%, 80%)`; // パステル調にするために彩度70%、明度80%に設定

          document.body.style.backgroundColor = pastelColor;
        }
      }
    </script>
  </body>
</html>

ただ座ってたら動かない。
ただしくんにいいこと聞いた！
→目標地点を変える

〇〇駅　６４０６m

〇〇駅　１０７４m

色がグラデーションになっていない！！
目に優しいようにパステルな色にする！

現在のコード

<html>
  <head>
    <meta charset="utf-8">
    <title>GPS</title>
    <meta name="viewport" content="width=device-width" />
    <meta name="description" content="Displays the straight line distance to the current location." />
    <script src="https://geographiclib.sourceforge.io/scripts/geographiclib-geodesic.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #000000; /* 文字色を黒に設定 */
        font-size: 24px;
        font-weight: 900;
        background: hsl(0, 70%, 90%); /* デフォルトの背景色をパステル調の赤に設定 */
        transition: background 0.5s ease; /* 背景色がスムーズに変化するように */
      }

      .display {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      #distanceText {
        font-size: 24px;
        margin-bottom: 10px;
      }

      #m {
        font-size: 40px;
      }

      #timestamp {
        position: fixed;
        bottom: 8px; right: 8px;
        color: #000000; /* タイムスタンプの文字色も黒に設定 */
        font-size: 12px;
      }
    </style>
  </head>
  <body>
    <div>
      <div class="display">
        <p id="distanceText">目標地点までの距離</p> <!-- 距離表示の上にテキストを追加 -->
        <p id="m"></p>
      </div>
      <p id="timestamp"></p>
    </div>
    <script>
      const goalLatLong = [35.531389, 139.696944]; // 目標地点の緯度,経度（川崎駅など）

      navigator.geolocation.watchPosition(handleWatchPosition, null, {
        enableHighAccuracy: true,
        timeout: 60000,
        maximumAge: 0
      });

      function handleWatchPosition(evt) {
        const latitude = evt.coords.latitude;
        const longitude = evt.coords.longitude;
        const timestamp = evt.timestamp;

        document.getElementById('timestamp').textContent = new Date(timestamp).toLocaleString();

        if (latitude && longitude) {
          const geod = window.geodesic.Geodesic.WGS84;
          const r = geod.Inverse(
            latitude, longitude,
            ...goalLatLong
          );

          const distance = r.s12;
          document.getElementById('m').textContent = `${distance.toFixed(2)}m`;

          // 距離に応じて背景色を変更
          const maxDistance = 4000; // 全体の距離を4km (4000m)として設定
          const hueStep = 360 / 8; // 8つの色のステップに分割（360度/8色 = 45度）
          const hue = (Math.floor(distance / 500) * hueStep) % 360; // 500mごとに色を変える
          const saturation = 70; // 目に優しいパステル調の彩度
          const lightness = 90; // 明るく柔らかい色合い

          document.body.style.backgroundColor = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
        }
      }
    </script>
  </body>
</html>

目標地点変えて、できたぞー！！！！！！

距離が遠くなるにつれて色の変化になっていないので
chatGPTに指定した。↓プロンプト

色を指定したコード

<html>
  <head>
    <meta charset="utf-8">
    <title>GPS</title>
    <meta name="viewport" content="width=device-width" />
    <meta name="description" content="Displays the straight line distance to the current location." />
    <script src="https://geographiclib.sourceforge.io/scripts/geographiclib-geodesic.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #000000; /* 文字色を黒に設定 */
        font-size: 24px;
        font-weight: 900;
        background: hsl(0, 70%, 90%); /* デフォルトの背景色をパステル調の赤に設定 */
        transition: background 0.5s ease; /* 背景色がスムーズに変化するように */
      }

      .display {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      #distanceText {
        font-size: 24px;
        margin-bottom: 10px;
      }

      #m {
        font-size: 40px;
      }

      #timestamp {
        position: fixed;
        bottom: 8px; right: 8px;
        color: #000000; /* タイムスタンプの文字色も黒に設定 */
        font-size: 12px;
      }
    </style>
  </head>
  <body>
    <div>
      <div class="display">
        <p id="distanceText">目標地点までの距離</p> <!-- 距離表示の上にテキストを追加 -->
        <p id="m"></p>
      </div>
      <p id="timestamp"></p>
    </div>
    <script>
      const goalLatLong = [35.531389, 139.696944]; // 目標地点の緯度,経度（川崎駅など）

      navigator.geolocation.watchPosition(handleWatchPosition, null, {
        enableHighAccuracy: true,
        timeout: 60000,
        maximumAge: 0
      });

      function handleWatchPosition(evt) {
        const latitude = evt.coords.latitude;
        const longitude = evt.coords.longitude;
        const timestamp = evt.timestamp;

        document.getElementById('timestamp').textContent = new Date(timestamp).toLocaleString();

        if (latitude && longitude) {
          const geod = window.geodesic.Geodesic.WGS84;
          const r = geod.Inverse(
            latitude, longitude,
            ...goalLatLong
          );

          const distance = r.s12;
          document.getElementById('m').textContent = `${distance.toFixed(2)}m`;

          let hue;
          if (distance <= 500) {
            hue = 0; // 赤色
          } else if (distance <= 1000) {
            hue = 30; // オレンジ色
          } else if (distance <= 1500) {
            hue = 60; // 黄色
          } else if (distance <= 2000) {
            hue = 90; // 黄緑色
          } else if (distance <= 2500) {
            hue = 120; // 緑色
          } else if (distance <= 3000) {
            hue = 180; // 水色
          } else if (distance <= 3500) {
            hue = 210; // 青色
          } else if (distance <= 4000) {
            hue = 270; // 紫色
          } else {
            hue = 270; // 4000m以上は紫色のまま
          }

          const saturation = 70; // 目に優しいパステル調の彩度
          const lightness = 90; // 明るく柔らかい色合い

          document.body.style.backgroundColor = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
        }
      }
    </script>
  </body>
</html>

各色の間を緩やかにグラデーションにするコード

<html>
  <head>
    <meta charset="utf-8">
    <title>GPS</title>
    <meta name="viewport" content="width=device-width" />
    <meta name="description" content="Displays the straight line distance to the current location." />
    <script src="https://geographiclib.sourceforge.io/scripts/geographiclib-geodesic.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #000000; /* 文字色を黒に設定 */
        font-size: 24px;
        font-weight: 900;
        background: hsl(0, 70%, 90%); /* デフォルトの背景色をパステル調の赤に設定 */
        transition: background 0.5s ease; /* 背景色がスムーズに変化するように */
      }

      .display {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      #distanceText {
        font-size: 24px;
        margin-bottom: 10px;
      }

      #m {
        font-size: 40px;
      }

      #timestamp {
        position: fixed;
        bottom: 8px; right: 8px;
        color: #000000; /* タイムスタンプの文字色も黒に設定 */
        font-size: 12px;
      }
    </style>
  </head>
  <body>
    <div>
      <div class="display">
        <p id="distanceText">目標地点までの距離</p> <!-- 距離表示の上にテキストを追加 -->
        <p id="m"></p>
      </div>
      <p id="timestamp"></p>
    </div>
    <script>
      const goalLatLong = [35.531389, 139.696944]; // 目標地点の緯度,経度（川崎駅など）

      navigator.geolocation.watchPosition(handleWatchPosition, null, {
        enableHighAccuracy: true,
        timeout: 60000,
        maximumAge: 0
      });

      function handleWatchPosition(evt) {
        const latitude = evt.coords.latitude;
        const longitude = evt.coords.longitude;
        const timestamp = evt.timestamp;

        document.getElementById('timestamp').textContent = new Date(timestamp).toLocaleString();

        if (latitude && longitude) {
          const geod = window.geodesic.Geodesic.WGS84;
          const r = geod.Inverse(
            latitude, longitude,
            ...goalLatLong
          );

          const distance = r.s12;
          document.getElementById('m').textContent = `${distance.toFixed(2)}m`;

          // 距離に応じて背景色を変更
          const maxDistance = 4000; // 全体の距離を4km (4000m)として設定
          const hueIntervals = [0, 30, 60, 90, 120, 180, 210, 270]; // 各500mの範囲での色相
          let hue;

          if (distance <= 500) {
            hue = interpolateHue(distance, 0, 500, hueIntervals[0], hueIntervals[1]); // 赤からオレンジ
          } else if (distance <= 1000) {
            hue = interpolateHue(distance, 500, 1000, hueIntervals[1], hueIntervals[2]); // オレンジから黄色
          } else if (distance <= 1500) {
            hue = interpolateHue(distance, 1000, 1500, hueIntervals[2], hueIntervals[3]); // 黄色から黄緑
          } else if (distance <= 2000) {
            hue = interpolateHue(distance, 1500, 2000, hueIntervals[3], hueIntervals[4]); // 黄緑から緑
          } else if (distance <= 2500) {
            hue = interpolateHue(distance, 2000, 2500, hueIntervals[4], hueIntervals[5]); // 緑から水色
          } else if (distance <= 3000) {
            hue = interpolateHue(distance, 2500, 3000, hueIntervals[5], hueIntervals[6]); // 水色から青
          } else if (distance <= 3500) {
            hue = interpolateHue(distance, 3000, 3500, hueIntervals[6], hueIntervals[7]); // 青から紫
          } else if (distance <= 4000) {
            hue = interpolateHue(distance, 3500, 4000, hueIntervals[7], hueIntervals[7]); // 紫
          } else {
            hue = hueIntervals[7]; // 4000m以上は紫色のまま
          }

          const saturation = 70; // 目に優しいパステル調の彩度
          const lightness = 90; // 明るく柔らかい色合い

          document.body.style.backgroundColor = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
        }
      }

      function interpolateHue(distance, minDist, maxDist, startHue, endHue) {
        const ratio = (distance - minDist) / (maxDist - minDist);
        return startHue + ratio * (endHue - startHue);
      }
    </script>
  </body>
</html>

グラデーションにならないなぁ・・・

もうちょっと聞き方を変えてみよう。

緩やかなグラデーションできた！！！

最後に２人の距離にして・・・

完成！！できた！！やったー！！

ちなみに最初はwikipediaで駅で目標地点取っていたけど
数メートルの単位が難しかったため、Googleマップを使って、地点をタップ。
緯度と経度をとるようにした！

使用ツール：Googleマップ（個人情報だから載せられないけど）

ちなみに最初はwikipediaで駅で目標地点取っていたけど
数メートルの単位が難しかったため、Googleマップを使って、地点をタップ。
緯度と経度をとるようにした！

使用ツール：Googleマップ（個人情報だから載せられないけど）

WEBサイト！

 人形の形を入れこみイメージに近づける・procreateで一部透過した人形を書く

→わたしpro maxなので　2688 x 1242

最大に合わせて作っていく
会えて色がわかるように服は暗くしてみた。

ハートの部分は透明にすることで、背景色が変わった時に色の変化が見れる。

ターミナル

cd＝切り替える

ls＝表示してね

大きすぎぃいい！！！！調節しよう！
できた！！
 img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            height: 100vh;
            width: 100vw;
            object-fit: cover;
            z-index: 0;
        }
    </style>
</head>
<body>
    
    <img src="image.png" alt="Character Image">
これが良かった。

 ひとまず完成！！https://tokimeta-f76e5.web.app/
すばらしい！！！！成長しているぞ！！！