ドキュメントの更新を同期

docs/manual/テキストエリア.md

@@ -0,0 +1,91 @@
+---
+contentId: textarea
+directory: manual
+---
+
+# テキストエリア
+
+テキストエリアは、複数行のテキストや長文を入力するためのフィールドです。  
+商品説明やサービス紹介文、備考欄など、改行を含む文章をシンプルに管理したい場合に適しています。
+
+データの入稿方法
+--------
+
+![テキストエリアの入稿画面。複数行のテキストが入力されており、右下には文字数が表示されている。](https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/64f394da681a43b49705538129cfca78/CleanShot%202025-11-21%20at%2016.56.47.png?w=997&h=324)
+
+*   テキストエリアをクリックして、テキストを入力します。
+*   改行する場合はEnterキーを押します。
+
+### **補足**
+
+*   テキストエリアの右下には入力されている文字数が表示されます。改行は1文字としてカウントされます。
+*   テキストエリアの右下にあるドラッグハンドルを上下方向に操作することで、入力欄の高さを調整できます。
+
+API、CSVを利用した入稿については以下のドキュメントをご参照ください。
+
+https://document.microcms.io/content-api/post-content#haea0c3e3ba
+
+https://document.microcms.io/manual/csv-import#h2b3036ae9c
+
+詳細設定
+----
+
+設定項目
+
+説明
+
+必須項目
+
+設定をONにすると入稿時の入力が必須となります。
+
+説明文
+
+入稿画面に表示する説明文です。
+
+特定のパターンのみ入力を許可
+
+正規表現にマッチした入力のみに制限します。
+
+利用可能な正規表現のパターンには制限があります。詳しくは「[入力文字列の制限で利用可能な正規表現のパターンは？](https://help.microcms.io/ja/knowledge/regex-pattern)」をご参照ください。
+
+文字数を制限する
+
+フィールドに入力する文字数の最小文字数、最大文字数を制限します。
+
+GET APIのレスポンス形式
+---------------
+
+詳細は以下のドキュメントをご参照ください。
+
+https://document.microcms.io/content-api/get-api-field-responses#h19b6d6769d
+
+フロントエンドでの利用方法
+-------------
+
+キストエリアは文字列として返されるため、HTMLの要素に直接指定できます。  
+テキストエリアの改行は内部的には`\n`として扱われます。HTMLにそのまま出力する場合は改行が反映されないため、表示時には以下のような方法で改行を反映させる必要があります。
+
+*   `\n` を `<br>`要素へ置換する
+*   CSSで`white-space: pre-wrap`用して改行を反映させる
+
+以下はNext.jsの実装例です。
+
+    export default async function Page({ params }) {
+      const { slug } = await params;
+
+      // microCMS JavaScript SDK（https://github.com/microcmsio/microcms-js-sdk）を使用してデータを取得
+      const data = await client.getListDetail({
+        endpoint: "blog",
+        contentId: slug,
+      });
+
+      return (
+        <main>
+          {/* 
+          textareaはフィールドIDです。実際のフィールドIDに置き換えてください
+          改行を反映させるために、`white-space: "pre-wrap"` スタイルを適用しています。
+          */}
+          <p style={{ whiteSpace: "pre-wrap" }}>{data.textarea}</p>
+        </main>
+      );
+    }