高度な機能

LunaTalkはHTML形式をサポートし、ユーザーが華麗なビジュアル体験を開き、ゲームのようなインターフェースを体験し、より多くの創造的可能性を解放するのを支援します!

HTML基礎構文チュートリアル

簡易版

やりたいことは何でもAIに伝えて、直接AIに手伝ってもらうことができます🦾 例えば、直接書いてください:

(必須)①すべての返信をHTML形式で返信してください。注意:単独の<script>を生成しないでください。すべてのscriptを要素インラインで使用し、scriptはHTML要素イベント内に必要です。<style>をサポートしていません。scirptはインラインで、styleを使用しないでください。

②人物の対話言語はすべてダブルクォーテーション内に配置し、フォントはすべて青色(色コード付加可能)、太字にしてください。

③人物の内心独白はすべて括弧内に配置し、フォントはすべてピンク色、斜体にしてください。

④以下の内容を表形式で出力してください: … 表の背景色は薄青色 表の文字色は濃青色

⑤以下の選択肢をボタン形式で出力してください: … ボタンの色は薄青色 文字色は濃青色

クリック後、自動的にテキストボックスに入力される。参考形式は以下の通り:

<button onclick="
const textarea = document.querySelector('#lunatalk-input textarea.uni-textarea-textarea');
if (textarea) {
textarea.value='選択肢テキスト';
textarea.dispatchEvent(new Event('input', { bubbles: true }));
} else {
alert('textarea が見つかりません');
}
">選択肢テキスト</button>

…

または、以下の各種形式を直接コピーして、AIに参考にしてもらって制作することもできます。

手動版

以下はゼロ基礎ユーザー向けに設計されたHTML極簡単チュートリアルで、色変更から表作成まで全て対応。コピー&ペーストで使えます!👇

一、テキスト

1. 色 & サイズ

<font color="red">私は赤色</font>

<font color="#FF00FF">私はマゼンタ(色コード使用)</font>

<font size="5">私は大きい文字(1-7、7が最大)</font>

<span style="color: blue; font-size: 20px;">私は青色20ピクセル文字</span>

タイトル文字 <h#>..........</h#> #を数字1~6に変更;h1が最大文字、h6が最小文字

効果は図の通り:

色コード一覧:

2. 太字 / 斜体 / 取消線

<b>私は太字</b>
<i>私は斜体</i>
<u>私は下線</u>
<s>私は取消線(非推奨)</s>
<del>私は取消線(標準書式)</del>
<small>小さいフォント表示</small>
<big>大きいフォント表示</big>
<tt>タイプライターフォント</tt>
<sub>下付き文字</sub>
<sup>上付き文字</sup>
<blink>点滅テキスト効果</blink>

3. 組み合わせ技

<b><i>私は太字斜体!</i></b>
```text

**4. 改行**

```text
改行(改行とも呼ばれる) <br>
段落分け <p>
区切り線 <hr>
【1】区切り線の太さ <hr size=点数>
【2】区切り線の幅 <hr size=点数またはパーセント>
【3】区切り線の配置方向 <hr align="#">
#は left:左揃え(デフォルト値) center:中央揃え right:右揃え
【4】区切り線の色 <hr color=#rrggbb>
【5】実線区切り線 <hr noshade>
中央揃え <center>..........</center>

二、テキスト特殊効果

(注:現在のバージョンでは、動的特殊効果は パソコンマウスホバー/スマホテキストクリック で特殊効果表示が開始されます)

1. 蛍光テキスト

<div style="margin-bottom: 15px;">
     <span style="color: cyan; text-shadow: 0 0 5px cyan, 0 0 10px blue;">こんにちは</span>
</div>

2. 点滅テキスト

<div style="margin-bottom: 15px;">
      <span onmouseenter="(function(e){var v=true;setInterval(function(){v=!v;e.style.opacity=v?1:0;},500);})(this)">こんにちは</span>
</div>

3. グラデーションテキスト

<div style="margin-bottom: 15px;">
      <span onmouseenter="(function(e){var colors=['red','orange','yellow','green','blue','indigo','violet'];var i=0;setInterval(function(){e.style.color=colors[i%colors.length];i++;},300);})(this)">こんにちは</span>
</div>

4. タイプライター効果

<div style="margin-bottom: 15px;">
      <span onmouseenter="(function(e){var text='こんにちは';var i=0;e.textContent='';setInterval(function(){if(i<=text.length){e.textContent=text.substring(0,i);i++;}else{i=0;e.textContent='';}},200);})(this)">こんにちは</span>
</div>

5. 回転テキスト

<div style="margin-bottom: 15px;">
      <span style="display:inline-block;" onmouseenter="(function(e){var r=0;setInterval(function(){r+=10;e.style.transform='rotate('+r+'deg)';},100);})(this)">こんにちは</span>
</div>

6. 拡大縮小

<div style="margin-bottom: 15px;">
      <span style="display:inline-block;" onmouseenter="(function(e){var s=1,d=0.02;setInterval(function(){s+=d;if(s>1.5||s<0.5)d=-d;e.style.transform='scale('+s+')';},50);})(this)">こんにちは</span>
</div>

7. 左右揺れ

<div style="margin-bottom: 15px;">
      <span style="display:inline-block;" onmouseenter="(function(e){var a=0,d=5;setInterval(function(){a+=d;if(a>30||a<-30)d=-d;e.style.transform='rotate('+a+'deg)';},100);})(this)">こんにちは</span>
</div>

8. 上下跳動

<div style="margin-bottom: 15px;">
      <span style="display:inline-block;" onmouseenter="(function(e){var y=0,d=5;setInterval(function(){y+=d;if(y>20||y<0)d=-d;e.style.transform='translateY('+y+'px)';},100);})(this)">こんにちは</span>
</div>

9. カラーパルス

<div style="margin-bottom: 15px;">
      <span onmouseenter="(function(e){var colors=['red','orange','yellow','green','blue','indigo','violet'];var i=0;setInterval(function(){e.style.color=colors[i%colors.length];e.style.fontSize=(20+Math.sin(i*0.5)*5)+'px';i++;},200);})(this)">こんにちは</span>
</div>

10. ランダム移動

<div style="margin-bottom: 15px; position: relative; height: 60px;">
      <span style="position:absolute; left:0; top:0;" onmouseenter="(function(e){setInterval(function(){e.style.left=Math.random()*200+'px';e.style.top=Math.random()*40+'px';},500);})(this)">こんにちは</span>
</div>

三、枠線制作

1. 角丸枠線

<div style="margin-bottom: 15px;">
      <span style="border: 2px solid black; border-radius: 15px; padding: 10px;">こんにちは</span>
</div>

コードの具体的意味は以下の通り

<div style="margin-bottom: 15px;">
外層ブロック、margin-bottom:15px で下の要素に垂直スペースを残す(次のブロックとの間隔)。

<span>
span は行内要素で、デフォルトで改行しない。border と padding を追加しても行内ボックスのまま(一部のシーンでは display:inline-block の方が制御しやすい)。

border: 2px solid black;
枠線は3つの部分で構成:2px(線幅)、solid(線種:実線)、black(色)。

border-radius: 15px;
角丸半径、値が大きいほど丸くなる(50%で円形にできる)。

padding: 10px;
内側余白、テキストと枠線の間を10px広げる。

2. 破線枠線

<div style="margin-bottom: 15px;">
      <span style="border: 2px dashed black; padding: 10px;">こんにちは</span>
</div>

3. 二重線枠線

<div style="margin-bottom: 15px;">
       <span style="border: 4px double black; padding: 10px;">こんにちは</span>
</div>

4. シャドウ枠線

<div style="margin-bottom: 15px;">
       <span style="box-shadow: 5px 5px 15px rgba(0,0,0,0.3); padding: 10px;">こんにちは</span>
</div>

5. 3D枠線

<div style="margin-bottom: 15px;">
       <span style="border: 5px outset #ccc; padding: 10px; background: #eee;">こんにちは</span>
</div>

【ネオン枠線】

1. カラフル角丸枠線

<div style="margin-bottom: 15px;">
  <span style="border: 6px solid; border-radius: 15px; padding: 10px;"
    onmouseenter="(function(e){
      var colors=['red','orange','yellow','green','blue','indigo','violet'];
      var i=0;
      setInterval(function(){
        e.style.borderColor=colors[i%colors.length];
        i++;
      },300);
    })(this)">こんにちは</span>
</div>

2. カラフル破線枠線

<div style="margin-bottom: 15px;">
  <span style="border: 4px dashed; padding: 10px;"
    onmouseenter="(function(e){
      var colors=['red','orange','yellow','green','blue','indigo','violet'];
      var i=0;
      setInterval(function(){
        e.style.borderColor=colors[i%colors.length];
        i++;
      },300);
    })(this)">こんにちは</span>
</div>

3. 虹色二重線枠線

<div style="margin-bottom: 15px;">
  <span style="border: 6px double; padding: 10px;"
    onmouseenter="(function(e){
      var colors=['red','orange','yellow','green','blue','indigo','violet'];
      var i=0;
      setInterval(function(){
        e.style.borderColor=colors[i%colors.length];
        i++;
      },300);
    })(this)">こんにちは</span>
</div>

4. カラーシャドウ枠線

<div style="margin-bottom: 15px;">
  <span style="padding: 10px; border: 3px solid transparent;"
    onmouseenter="(function(e){
      var colors=['red','orange','yellow','green','blue','indigo','violet'];
      var i=0;
      setInterval(function(){
        var c=colors[i%colors.length];
        e.style.boxShadow='0 0 10px '+c+', 0 0 20px '+c+', 0 0 30px '+c;
        i++;
      },300);
    })(this)">こんにちは</span>
</div>

5. カラー 3D 枠線

<div style="margin-bottom: 15px;">
  <span style="border: 6px outset; padding: 10px; background:#eee;"
    onmouseenter="(function(e){
      var colors=['red','orange','yellow','green','blue','indigo','violet'];
      var i=0;
      setInterval(function(){
        e.style.borderColor=colors[i%colors.length];
        i++;
      },300);
    })(this)">こんにちは</span>
</div>

【流動虹色枠線(グラデーション滑らか遷移)】

1. カラー角丸枠線(滑らか虹色遷移)

<div style="margin-bottom: 15px;">
  <span style="border: 6px solid; border-radius: 15px; padding: 10px;"
    onmouseenter="(function(e){
      var h=0;
      setInterval(function(){
        e.style.borderColor='hsl('+h+',100%,50%)';
        h=(h+2)%360;
      },50);
    })(this)">こんにちは</span>
</div>

2. カラー破線枠線(滑らか虹色遷移)

<div style="margin-bottom: 15px;">
  <span style="border: 4px dashed; padding: 10px;"
    onmouseenter="(function(e){
      var h=60;
      setInterval(function(){
        e.style.borderColor='hsl('+h+',100%,50%)';
        h=(h+2)%360;
      },50);
    })(this)">こんにちは</span>
</div>

3. 虹色二重線枠線(滑らか虹色遷移)

<div style="margin-bottom: 15px;">
  <span style="border: 6px double; padding: 10px;"
    onmouseenter="(function(e){
      var h=120;
      setInterval(function(){
        e.style.borderColor='hsl('+h+',100%,50%)';
        h=(h+2)%360;
      },50);
    })(this)">こんにちは</span>
</div>

4. カラーシャドウ枠線(滑らか流光効果)

<div style="margin-bottom: 15px;">
  <span style="padding: 10px; border: 3px solid transparent;"
    onmouseenter="(function(e){
      var h=180;
      setInterval(function(){
        var c='hsl('+h+',100%,50%)';
        e.style.boxShadow='0 0 10px '+c+', 0 0 20px '+c+', 0 0 30px '+c;
        h=(h+2)%360;
      },50);
    })(this)">こんにちは</span>
</div>

5. カラー 3D 枠線(滑らか虹色遷移)

<div style="margin-bottom: 15px;">
  <span style="border: 6px outset; padding: 10px; background:#eee;"
    onmouseenter="(function(e){
      var h=240;
      setInterval(function(){
        e.style.borderColor='hsl('+h+',100%,50%)';
        h=(h+2)%360;
      },50);
    })(this)">こんにちは</span>
</div>

四、背景制作

1. カラフル背景

<div style="margin-bottom: 15px;">
       <span style="background: linear-gradient(to right, red, orange, yellow, green, blue); padding: 10px; color: white;">こんにちは</span>
</div>

2. ピンク背景

<div style="margin-bottom: 15px;">
       <span style="background: pink; padding: 10px; color: red;">こんにちは</span>
</div>

3. ノート背景

<div style="margin-bottom: 15px;">
       <span style="background: lightblue; color: black; padding: 10px;">こんにちは</span>
</div>

4. スマホ背景

<div style="margin-bottom: 15px;">
       <span style="background: linear-gradient(to bottom, #333, #999); color: white; padding: 10px;">こんにちは</span>
</div>

5. ストライプ背景

<div style="margin-bottom: 15px;">
      <span style="background: repeating-linear-gradient(45deg, #ff6b6b, #ff6b6b 10px, #ff8e8e 10px, #ff8e8e 20px); padding: 10px; color: white;">こんにちは</span>
</div>

五、表制作

1. 基本表

<table border="1" style="border-collapse: collapse;">
  <tr>
    <th>氏名</th>
    <th>職業</th>
    <th>戦闘力</th>
  </tr>
  <tr>
    <td>張三</td>
    <td>プログラマー</td>
    <td>80</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>デザイナー</td>
    <td>95</td>
  </tr>
</table>

2. セル個別設定

<table>
  <tr>
    <td style="background-color: yellow;">重要データ</td>
    <td style="color: red;">赤色テキスト
    </td>
  </tr>
</table>

3. カラー表

<table style="border-collapse: collapse; width: 100%;">
  <tr style="background-color: #000079; color: white;">
    <th>氏名</th>
    <th>職業</th>
    <th>戦闘力</th>
  </tr>
  <tr style="background-color: #B9B9FF;">
    <td>張三</td>
    <td>プログラマー</td>
    <td>80</td>
  </tr>
  <tr style="background-color: #B9B9FF;">
    <td>李四</td>
    <td>デザイナー</td>
    <td>95</td>
  </tr>
</table>

六、ボタンとインタラクション

1. 通常ボタン

<button>クリックしてみて</button>

2. 色付きボタン

<!-- 青系 -->
<button style="color: white; background-color: #2196F3;">青色</button>

<!-- 緑系 -->
<button style="color: white; background-color: #4CAF50;">緑色</button>

<!-- 赤系 -->
<button style="color: white; background-color: #f44336;">赤色</button>

<!-- 紫系 -->
<button style="color: white; background-color: #9C27B0;">紫色</button>

<!-- 黒系 -->
<button style="color: white; background-color: #000000;">黒色</button>

3. グラデーション華麗ボタン

<button style="
  color: white;
  background: linear-gradient(to right, #FF6B8B, #FF8E53);
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
">グラデーション華麗ボタン</button>

4. クリックボタン自動テキストボックス入力

<button onclick="
const textarea = document.querySelector('#lunatalk-input textarea.uni-textarea-textarea');
if (textarea) {
textarea.value='こんにちは';
textarea.dispatchEvent(new Event('input', { bubbles: true }));
} else {
alert('textarea が見つかりません');
}
" style="background-color: white; color: black;">こんにちは</button>

5. クリックボタン自動クリップボード入力

<button onclick="
  const textarea = document.querySelector('#lunatalk-input textarea.uni-textarea-textarea');
  if (textarea) {
    textarea.value='こんにちは';
    textarea.dispatchEvent(new Event('input', { bubbles: true }));
    navigator.clipboard.writeText('こんにちは');
  } else {
    alert('textarea が見つかりません');
  }
" style="background-color: white; color: black;">こんにちは</button>

6. カラークリック可能ボタン

<button style="
  color: white;
  background: linear-gradient(to right, #FF6B8B, #FF8E53);
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.5s;
"
onclick="
  // クリック時:textareaを見つけてテキスト入力
  const textarea = document.querySelector('#lunatalk-input textarea.uni-textarea-textarea');
  if (textarea) {
    textarea.value='グラデーション華麗ボタン';
    textarea.dispatchEvent(new Event('input', { bubbles: true }));
  } else {
    alert('textarea が見つかりません');
  }
">
  グラデーション華麗ボタン
</button>

7. 区域レイアウト

<div style="background: lavender; padding: 10px; border-radius: 10px;">
      <h3>エレガント区域</h3>
      <br>
      <p>ここに任意の内容を配置できます〜</p>
      <br>
      <button style="background: purple; color: white;">紫色ボタン</button>
</div>

8. 展開/折りたたみ

<details>
  <summary>クリックして内容を展開/折りたたみ</summary>
  <p>ここは隠された内容で、JSは不要!ブラウザネイティブサポート。</p>
</details>

七、注意事項

1. bodyのみ書く

AIがフォーマットを書く際に、<!DOCTYPE html>、<html lang="zh-CN">、<head>などの開始内容を出力した場合は削除してください。チャットボックス内には<body>部分のみが必要です。

2. 隠しテキスト

コード内にを挿入することで、AIに毎回返信時にこれらのフォーマットを出力させることができます。隠しテキストは表示されず、ユーザーには見えませんが、AIは見ることができます。

例:

八、具体例

1. ステータスバー例

(これは例示用で、ビジュアル効果を細かく検討していません。より良いカードデザインを作れることを願っています。直接コピーして新カードとして公開しないでください。違反者はカード削除と作者報酬取り消しとなります。)

完全なコードは以下の通り:

<details>
  <summary>【シーン】</summary>
  <div style="background: #7AFEC6; color: black; padding: 10px; border-radius: 10px;">
  <p>あなたは人間の冒険者です。小さな木造小屋の前に立っており、周囲は村と茂った森林です。(開始時に自分で氏名、性別、外見などの情報を手動編集できます)</p>
  </div>
</details>

<details>
  <summary>【情報】</summary>
  <div style="margin-bottom: 15px;">
    <div style="
      display:inline-block;
      background-image: repeating-linear-gradient(
        white 0px,
        white 28px,
        lightblue 29px,
        white 30px
      );
      color: black;
      padding: 10px;
      line-height: 28px;
    ">
      ロック, 男, 人間, Lv.1, 初級戦士, 金髪青眼, 冒険者服装, 長剣一本
      <p>HP:50/50</p>
      <p>MP:50/50</p>
      <p>ゴールド:50</p>
      <p>スキル:なし</p>
      <p>アイテム:なし</p>
    </div>
  </div>
</details>

【マップ】<p>
🏔️🏔️🏔️🏔️🌲🌲🌲🌲🌲<p>
🏔️🏔️🌲🌲🌲🌲🌲🌲🌲<p>
🌲🌲🏡🏡🏡🏡🏡🌲🌲<p>
🌲🌲🏡🌳🌳🌳🏡🌲🌲<p>
🌲🌲🏡🌳🏠🌳🏡🌲🌲<p>
🌲🌲🌳🌳🌳🌳🌳🌲🌲<p>
🌲🌲🌳🌳🌳🌳🐗🌲🌲<p>
🌲🌲🌲🌲🌲🌲🌲🌲🌲<p>
🌲🌲🌲🌲🌲🌲🌲🌲🌲

<details>
  <summary>【任務】</summary>
  <p>なし</p>
</details>

【選択肢】
<p>
<button onclick="
const textarea = document.querySelector('#lunatalk-input textarea.uni-textarea-textarea');
if (textarea) {
textarea.value='村長を訪問';
textarea.dispatchEvent(new Event('input', { bubbles: true }));
} else {
alert('textarea が見つかりません');
}
" style="background-color: lightgreen; color: black;">村長を訪問</button>
<p>
<button onclick="
const textarea = document.querySelector('#lunatalk-input textarea.uni-textarea-textarea');
if (textarea) {
textarea.value='近くに野生のイノシシがいるので、捕まえて焼く';
textarea.dispatchEvent(new Event('input', { bubbles: true }));
} else {
alert('textarea が見つかりません');
}
" style="background-color: lightgreen; color: black;">近くに野生のイノシシがいるので、捕まえて焼く</button>
<p>
<button onclick="
const textarea = document.querySelector('#lunatalk-input textarea.uni-textarea-textarea');
if (textarea) {
textarea.value='転職したい!';
textarea.dispatchEvent(new Event('input', { bubbles: true }));
} else {
alert('textarea が見つかりません');
}
" style="background-color: lightgreen; color: black;">転職したい!(職業変更)</button>
<p>
<button onclick="
const textarea = document.querySelector('#lunatalk-input textarea.uni-textarea-textarea');
if (textarea) {
textarea.value='転生したい!';
textarea.dispatchEvent(new Event('input', { bubbles: true }));
} else {
alert('textarea が見つかりません');
}
" style="background-color: lightgreen; color: black;">転生したい!</button>

2. カードデザイン例

(ボタンクリック後、テキストが自動的にクリップボードにコピーされます)

<body style="background-color:#000; font-family:Arial, sans-serif; display:flex; justify-content:center; align-items:center; min-height:100vh; color:#fff;">

  <div style="border:2px solid yellow; border-radius:12px; padding:20px; width:320px;">

    <!-- タイトル -->
    <h2 style="text-align:center; color:yellow; margin:0 0 20px 0;">▲ 個人プロフィール ▲</h2>

    <!-- 性別 -->
    <div style="border:1px solid #555; border-radius:10px; padding:15px; margin-bottom:20px;">
      <div style="text-align:center; font-weight:bold; color:yellow; margin-bottom:10px;">性別</div>
      <hr style="border: none; border-top:1px solid yellow; margin:5px 0 15px 0;">
      <div style="display:flex; justify-content:space-around; margin-bottom:10px;">
        <button style="color:cyan; background:transparent; border:1px solid cyan; border-radius:6px; padding:8px 16px; cursor:pointer;"
          onclick="(function(){
            const txt='男性';
            const textarea=document.querySelector('#lunatalk-input textarea.uni-textarea-textarea');
            if(textarea){textarea.value=txt;textarea.dispatchEvent(new Event('input',{bubbles:true}));}
            navigator.clipboard.writeText(txt);
          })()">男性</button>

        <button style="color:cyan; background:transparent; border:1px solid cyan; border-radius:6px; padding:8px 16px; cursor:pointer;"
          onclick="(function(){
            const txt='女性';
            const textarea=document.querySelector('#lunatalk-input textarea.uni-textarea-textarea');
            if(textarea){textarea.value=txt;textarea.dispatchEvent(new Event('input',{bubbles:true}));}
            navigator.clipboard.writeText(txt);
          })()">女性</button>

---

さあ、精美で面白いキャラクターカードを制作してみましょう!