[React] iPad用WEBアプリ開発でのCSS調整！

はじめに

iPad用のWEBアプリに便利なCSSの調整方法について紹介します！
今回は、ダミーとしてラジオボタンの調整も行います！

1. iPad用フィールドの作成

まず、元となるフィールドを作成します！
CSSの為に、各要素にclassを設定しています！

import React, { useState } from "react";
import styles from "../styles/MyComponent.module.css";

const MyComponent = () => {
  const [selectedOption, setSelectedOption] = useState("option1");

  const handleOptionChange = (event) => {
    setSelectedOption(event.target.value);
  };
  return (
    <div class={styles.content}>
      <div class={styles.box}>
        <h1>Radio Buttons in Next.js</h1>

        <label class={styles.radioLabel}>
          <input
            type="radio"
            value="option1"
            checked={selectedOption === "option1"}
            onChange={handleOptionChange}
          />
          Option 1
        </label>

        <label class={styles.radioLabel}>
          <input
            type="radio"
            value="option2"
            checked={selectedOption === "option2"}
            onChange={handleOptionChange}
          />
          Option 2
        </label>

        <label class={styles.radioLabel}>
          <input
            type="radio"
            value="option3"
            checked={selectedOption === "option3"}
            onChange={handleOptionChange}
          />
          Option 3
        </label>

        <p>Selected Option: {selectedOption}</p>
      </div>
    </div>
  );
};

export default MyComponent;

2. CSSファイルを調整

次に、CSSを設定していきます！
iPad用に、820×1180pxで調整しています！

/* MyComponent.module.css */
.box {
    background: #eee;
    width: 820px;
    height: 1180px;
  }
  
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .radioLabel {
    display: block;
    margin-bottom: 10px;
    margin-left: 5%;
  }

まとめ

このように設定することで、boxの領域が、iPad用のスペースとなりました！
今回の記事を参考に、iPad用のwebアプリ開発を行ってみてください！