<!-- Shape Type -->
<div>
  <div class="cp-section-label">図形タイプ</div>
  <div class="cp-shape-tabs">
    <button class="cp-tab active" data-type="polygon" onclick="cpjaSetType('polygon')">ポリゴン</button>
    <button class="cp-tab" data-type="circle" onclick="cpjaSetType('circle')">円</button>
    <button class="cp-tab" data-type="ellipse" onclick="cpjaSetType('ellipse')">楕円</button>
    <button class="cp-tab" data-type="inset" onclick="cpjaSetType('inset')">インセット</button>
    <button class="cp-tab" data-type="custom" onclick="cpjaSetType('custom')">カスタム</button>
  </div>
</div>

<!-- Polygon Presets -->
<div id="cpja-polygon-panel">
  <div class="cp-section-label">プリセット図形</div>
  <div class="cp-presets-grid">
    <button class="cp-preset-btn active" data-preset="triangle" onclick="cpjaLoadPreset('triangle')">
      <svg class="cp-preset-icon" viewBox="0 0 32 32"><polygon points="16,4 30,28 2,28" fill="#667eea"/></svg>
      三角形
    </button>
    <button class="cp-preset-btn" data-preset="diamond" onclick="cpjaLoadPreset('diamond')">
      <svg class="cp-preset-icon" viewBox="0 0 32 32"><polygon points="16,2 30,16 16,30 2,16" fill="#667eea"/></svg>
      菱形
    </button>
    <button class="cp-preset-btn" data-preset="pentagon" onclick="cpjaLoadPreset('pentagon')">
      <svg class="cp-preset-icon" viewBox="0 0 32 32"><polygon points="16,2 29,11 24,27 8,27 3,11" fill="#667eea"/></svg>
      五角形
    </button>
    <button class="cp-preset-btn" data-preset="hexagon" onclick="cpjaLoadPreset('hexagon')">
      <svg class="cp-preset-icon" viewBox="0 0 32 32"><polygon points="16,2 28,9 28,23 16,30 4,23 4,9" fill="#667eea"/></svg>
      六角形
    </button>
    <button class="cp-preset-btn" data-preset="octagon" onclick="cpjaLoadPreset('octagon')">
      <svg class="cp-preset-icon" viewBox="0 0 32 32"><polygon points="10,2 22,2 30,10 30,22 22,30 10,30 2,22 2,10" fill="#667eea"/></svg>
      八角形
    </button>
    <button class="cp-preset-btn" data-preset="star" onclick="cpjaLoadPreset('star')">
      <svg class="cp-preset-icon" viewBox="0 0 32 32"><polygon points="16,2 19.5,12 30,12 21.5,18.5 24.5,29 16,22.5 7.5,29 10.5,18.5 2,12 12.5,12" fill="#667eea"/></svg>
      星形
    </button>
    <button class="cp-preset-btn" data-preset="arrow" onclick="cpjaLoadPreset('arrow')">
      <svg class="cp-preset-icon" viewBox="0 0 32 32"><polygon points="2,10 18,10 18,4 30,16 18,28 18,22 2,22" fill="#667eea"/></svg>
      矢印
    </button>
    <button class="cp-preset-btn" data-preset="cross" onclick="cpjaLoadPreset('cross')">
      <svg class="cp-preset-icon" viewBox="0 0 32 32"><polygon points="10,2 22,2 22,10 30,10 30,22 22,22 22,30 10,30 10,22 2,22 2,10 10,10" fill="#667eea"/></svg>
      十字
    </button>
    <button class="cp-preset-btn" data-preset="heart" onclick="cpjaLoadPreset('heart')">
      <svg class="cp-preset-icon" viewBox="0 0 32 32"><path d="M16,28 C16,28 3,18 3,10 C3,6 6,3 10,3 C12.5,3 15,5 16,7 C17,5 19.5,3 22,3 C26,3 29,6 29,10 C29,18 16,28 16,28Z" fill="#667eea"/></svg>
      ハート
    </button>
    <button class="cp-preset-btn" data-preset="chevron" onclick="cpjaLoadPreset('chevron')">
      <svg class="cp-preset-icon" viewBox="0 0 32 32"><polygon points="2,6 18,6 30,16 18,26 2,26 14,16" fill="#667eea"/></svg>
      シェブロン
    </button>
  </div>
</div>

<!-- Circle controls -->
<div id="cpja-circle-panel" style="display:none">
  <div class="cp-section-label">円の設定</div>
  <div class="cp-slider-row">
    <label>半径</label>
    <input type="range" id="cpja-circle-r" min="10" max="50" value="50" oninput="cpjaUpdateCircle()">
    <span class="cp-slider-val" id="cpja-circle-r-val">50%</span>
  </div>
  <div class="cp-slider-row">
    <label>中心 X</label>
    <input type="range" id="cpja-circle-cx" min="0" max="100" value="50" oninput="cpjaUpdateCircle()">
    <span class="cp-slider-val" id="cpja-circle-cx-val">50%</span>
  </div>
  <div class="cp-slider-row">
    <label>中心 Y</label>
    <input type="range" id="cpja-circle-cy" min="0" max="100" value="50" oninput="cpjaUpdateCircle()">
    <span class="cp-slider-val" id="cpja-circle-cy-val">50%</span>
  </div>
</div>

<!-- Ellipse controls -->
<div id="cpja-ellipse-panel" style="display:none">
  <div class="cp-section-label">楕円の設定</div>
  <div class="cp-slider-row">
    <label>半径 X</label>
    <input type="range" id="cpja-ellipse-rx" min="5" max="50" value="50" oninput="cpjaUpdateEllipse()">
    <span class="cp-slider-val" id="cpja-ellipse-rx-val">50%</span>
  </div>
  <div class="cp-slider-row">
    <label>半径 Y</label>
    <input type="range" id="cpja-ellipse-ry" min="5" max="50" value="30" oninput="cpjaUpdateEllipse()">
    <span class="cp-slider-val" id="cpja-ellipse-ry-val">30%</span>
  </div>
  <div class="cp-slider-row">
    <label>中心 X</label>
    <input type="range" id="cpja-ellipse-cx" min="0" max="100" value="50" oninput="cpjaUpdateEllipse()">
    <span class="cp-slider-val" id="cpja-ellipse-cx-val">50%</span>
  </div>
  <div class="cp-slider-row">
    <label>中心 Y</label>
    <input type="range" id="cpja-ellipse-cy" min="0" max="100" value="50" oninput="cpjaUpdateEllipse()">
    <span class="cp-slider-val" id="cpja-ellipse-cy-val">50%</span>
  </div>
</div>

<!-- Inset controls -->
<div id="cpja-inset-panel" style="display:none">
  <div class="cp-section-label">インセット設定</div>
  <div class="cp-inset-grid">
    <div class="cp-slider-row" style="flex-direction:column;align-items:flex-start;gap:0.2rem">
      <label>上</label>
      <input type="range" id="cpja-inset-t" min="0" max="49" value="10" oninput="cpjaUpdateInset()">
      <span class="cp-slider-val" id="cpja-inset-t-val" style="min-width:auto">10%</span>
    </div>
    <div class="cp-slider-row" style="flex-direction:column;align-items:flex-start;gap:0.2rem">
      <label>右</label>
      <input type="range" id="cpja-inset-r" min="0" max="49" value="10" oninput="cpjaUpdateInset()">
      <span class="cp-slider-val" id="cpja-inset-r-val" style="min-width:auto">10%</span>
    </div>
    <div class="cp-slider-row" style="flex-direction:column;align-items:flex-start;gap:0.2rem">
      <label>下</label>
      <input type="range" id="cpja-inset-b" min="0" max="49" value="10" oninput="cpjaUpdateInset()">
      <span class="cp-slider-val" id="cpja-inset-b-val" style="min-width:auto">10%</span>
    </div>
    <div class="cp-slider-row" style="flex-direction:column;align-items:flex-start;gap:0.2rem">
      <label>左</label>
      <input type="range" id="cpja-inset-l" min="0" max="49" value="10" oninput="cpjaUpdateInset()">
      <span class="cp-slider-val" id="cpja-inset-l-val" style="min-width:auto">10%</span>
    </div>
  </div>
  <div class="cp-slider-row" style="margin-top:0.5rem">
    <label>角丸半径</label>
    <input type="range" id="cpja-inset-br" min="0" max="50" value="0" oninput="cpjaUpdateInset()">
    <span class="cp-slider-val" id="cpja-inset-br-val">0%</span>
  </div>
</div>

<!-- Custom polygon panel -->
<div id="cpja-custom-panel" style="display:none">
  <div class="cp-section-label">カスタムポリゴン</div>
  <div class="cp-custom-hint">
    プレビューエリアをクリックしてポイントを追加。ドラッグで移動、右クリックで削除できます。
  </div>
  <div class="cp-custom-actions" style="margin-top:0.6rem">
    <button class="cp-btn cp-btn-outline" onclick="cpjaUndoPoint()">元に戻す</button>
    <button class="cp-btn cp-btn-danger" onclick="cpjaClearPoints()">全消去</button>
  </div>
  <div class="cp-points-list" id="cpja-points-list">ポイントなし — プレビューをクリックして開始。</div>
</div>

<!-- Background color -->
<div>
  <div class="cp-section-label">プレビューオプション</div>
  <div class="cp-color-row">
    <label>図形の色</label>
    <input type="color" id="cpja-shape-color" value="#667eea" oninput="cpjaUpdateColor()">
  </div>
</div>

<div class="cp-preview-wrap">
  <div class="cp-preview-label">ライブプレビュー — <span id="cpja-preview-size-label"></span></div>
  <div class="cp-canvas-wrap" id="cpja-canvas" onclick="cpjaCanvasClick(event)">
    <div class="cp-shape-el" id="cpja-shape"></div>
  </div>
</div>

<div class="cp-output-wrap">
  <div class="cp-output-header">
    <span class="cp-output-title">CSS出力</span>
    <button class="cp-copy-btn" id="cpja-copy-btn" onclick="cpjaCopyCSS()">コピー</button>
  </div>
  <div class="cp-output-code" id="cpja-output-code"></div>
</div>
🟢
フリーランス・個人事業主の方へ — freeeで経理・確定申告を自動化

ツール制作などの副業・フリーランス収入も、freeeなら帳簿付けから確定申告まで簡単に管理できます。

freeeを試す

関連ツール

ボックスシャドウを生成 → CSS Box Shadow ジェネレーター ボーダー半径を設定 → CSS Border Radius ジェネレーター SVGパスを作成 → SVG Path エディター