> ## Documentation Index
> Fetch the complete documentation index at: https://help.mosh.jp/llms.txt
> Use this file to discover all available pages before exploring further.

# HTMLパーツの使い方（β）

> ランディングページにHTMLとCSSのコードを貼り付けて表示する方法と、使えるもの・使えないものを説明します。

この記事では、ランディングページ（LP）のHTMLパーツの使い方と、貼り付けられるもの・貼り付けられないものを説明します。

HTMLパーツは、ChatGPTやClaudeなどのAIで作ったHTMLや、ご自身で書いたHTMLを、そのままLPの一部として表示できるパーツです。現在はβ版として提供しており、仕様は今後変更になる場合があります。

> [!NOTE]
>
> **アクセス経路**
>
> [ランディングページ](https://mosh.jp/creator/landing-pages) → 該当のページ → 編集画面の左パネル「パーツ追加」→「HTML」

> [!WARNING]
>
> **JavaScriptは動きません**
>
> 安全のため、scriptタグやonclickなどの属性に書いたJavaScriptは、保存時に取り除かれます。動きのある演出はCSSで作ってください。

## HTMLパーツを追加する

**1. パーツを追加する**

編集画面の左パネルで「パーツ追加」を選び、「HTML」カテゴリの「HTML」（「BETA」の表示付き）をページに追加します。

![](https://mintcdn.com/mosh/844HVrcCxJ7ZihJu/images/creator/marketing/page-builder/parts-html/add-html-part.png?fit=max\&auto=format\&n=844HVrcCxJ7ZihJu\&q=85\&s=0117393a1c6a812c51b60f240a6417d1)

**2. コードを貼り付ける**

右パネル「HTMLの編集」の入力欄に、HTMLコードを貼り付けます。ファイルのアップロードはできません。コードをコピーして貼り付けてください。

![](https://mintcdn.com/mosh/wg1XWn9d1XWlqAak/images/creator/marketing/page-builder/parts-html/edit-html-panel.png?fit=max\&auto=format\&n=wg1XWn9d1XWlqAak\&q=85\&s=5ff5baa0262888a8c6b048b202299f34)

**3. プレビューで確認する**

編集画面では、HTML内のリンクやアニメーションは動きません。動作は「プレビュー」で確認してください。

**4. 公開する**

入力した内容は自動で保存されますが、公開ページに反映されるのは「変更を公開」を押したときの内容です。編集したあとは、あらためて公開してください。

> [!TIP]
>
> HTMLパーツは、LPを構成する1つのブロックです。1つのLPに複数置け、上下の並べ替え・複製・削除は他のパーツと同じです。AIで作ったデザイン部分をHTMLで貼り、その下にLP標準の「カウントダウン」や「ボタン」を置く、といった組み合わせもできます。

## 先に知っておいていただきたいこと

* **HTMLとCSSは1つにまとめてください。**貼り付けられるのはテキスト欄1つだけです。CSSを別ファイルにしてlinkタグで読み込む形は使えません。CSSはstyleタグの中に書き、HTMLと一緒に1つにまとめてください
* **JavaScriptは使えません。**scriptタグや、onclickなどの属性に書いたJavaScriptは、保存時に取り除かれます
* **1つのパーツに貼れるのは70,000文字までです。**超えると「入力内容が長すぎます」と表示され、保存されません

## 貼り付けられるもの

HTMLとCSSの大半が使えます。

* 見出し、段落、リスト、表、画像、動画、SVG
* styleタグ、インラインのstyle属性、class、id
* CSSのアニメーション、ホバー効果

## 貼り付けられないもの

安全のため、次のタグは保存時に自動で取り除かれます。画面にお知らせは表示されません。

* script（JavaScript）。onclickなどの属性に書いたJavaScriptも動きません
* iframe、object、embed（YouTubeやGoogleマップ、外部フォームなどの埋め込み）
* form、input、button、select、textarea（入力欄や送信フォーム）
* link、meta（外部CSSファイルの読み込みなど）

取り除かれたタグの中の文字は、残ることがあります。表示が崩れて見えるときは、これが原因のことが多いです。

作りたい表現ごとの代わりの方法は、次のとおりです。

| 作りたいもの | 代わりの方法 |
| - | - |
| YouTubeなどの動画 | LP標準の動画パーツを使います |
| 問い合わせ・申込フォーム | LPの連携機能（アンケート）を使うか、フォームへのリンクを置きます |
| 押せるボタン | aタグにCSSでボタンの見た目を付けます |
| 画面に追従する固定ボタン | HTMLパーツの外に、LP標準のボタンパーツを置きます |

## リンクの書き方

* URLは `https://` から始まる形で書いてください。省略した書き方では、正しいページに移動しません
* HTML内のリンクは、新しいタブで開きます。同じタブで移動させたい場合は、LP標準のボタンパーツを使ってください
* 購入ボタンを置く場合は、商品ページのURLへのリンク（aタグ）にしてください

## 表示のしかた

* HTMLは、LP本体とは独立した枠の中に表示されます。幅は横いっぱいで、高さは中身に合わせて自動で伸びます。高さの上限は30,000pxです
* LP本体のフォントや色は、HTMLには反映されません。見た目は、HTML内のCSSで指定してください

## うまくいかないとき

> **貼ったのに一部が表示されません。**
>
> 取り除かれるタグが含まれている可能性があります。JavaScript・フォーム・iframe・外部CSSの読み込みを使わない形に書き直してください。結果は「プレビュー」で確認できます。

> **「入力内容が長すぎます」と表示されます。**
>
> 70,000文字を超えています。コードを短くしてから貼り付けてください。

> **公開ページに反映されません。**
>
> 編集したあとに、「変更を公開」を押しているかご確認ください。

## よくある質問

> **JavaScriptは今後使えるようになりますか？**
>
> 現時点で予定はありません。

> **AIからHTMLパーツを作れますか？**
>
> 現在はできません。作成したコードを編集画面に貼り付けてご利用ください。

## 関連ページ

* [パーツの種類](https://help.mosh.jp/creator/marketing/page-builder/parts-types.md)
* [パーツの編集・削除](https://help.mosh.jp/creator/marketing/page-builder/edit-delete-parts.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.