HTMLテーブル
道具と価格を、一覧で見せる
Webパーツ工房｜テーブル・カードUIをコード生成
テーブル支部
データを入れて、使えるWebパーツへ。
テーブル(table)、カード(card)、アコーディオン(accordion)を、コーディング不要で作成。プレビューを確認しながらデータや色を編集し、HTML / CSS / JSをコピーできます。
- 無料
- 登録不要
- ブラウザで利用
入力データはブラウザ内で処理します。設置先でも表示と動作を確認してください。
データから、3つのWebパーツへ
同じ編集画面から、テーブル・カード・アコーディオンを作れます。画像は実際に生成したパーツの表示例です。
カード
画像と説明を並べて紹介する
アコーディオン
質問と回答を、開いて見せる
データを、サイトで使えるUIへ
完成形を確認しながら、色やデータを編集できます。
Webパーツを作る入力 → プレビュー → HTML / CSS / JS
表データを貼り付けて、すぐ確認
スプレッドシートやCSVのデータを貼り付け、ストライプ・枠線・ホバーなどを選べます。カードはPC・タブレット・スマホそれぞれのカラム数を指定できます。
道具,用途,価格
メモ帳,記録,300円
クリップ,整理,150円
ファイル,保管,500円
生成したHTMLの例
<!-- <body>タグ内に貼り付けてください -->
<div class="table-container p-4">
<table class="resizable-table w-full">
<thead>
<tr>
<th class="p-3 text-center">道具</th>
<th class="p-3 text-center">用途</th>
<th class="p-3 text-center">価格</th>
</tr>
</thead>
HTML / CSS / JSは、それぞれのコードタブからコピーできます。
プレビューを見ながら、直感的に編集
リアルタイムプレビュー
設定を変更するとプレビューへ反映されます。色やデザインを見ながら調整できます。
レスポンシブ確認
PC・タブレット・スマホの表示を切り替え、設置前に見え方を確認できます。設置先でも実際の表示をご確認ください。
こんなUIパーツ作りに
- HTMLで表を作るのが難しくて諦めてしまった
- アコーディオンUIを導入したいけどJavaScriptが分からない
- 毎回カードレイアウトのCSSを書くのが面倒
- オンラインのコード生成ツールはデザインの自由度が低い
入力データは、ブラウザ内で処理
入力データとコード生成はブラウザ内で処理します。入力内容を当サイトのサーバーへアップロードする機能はありません。
カードなどに外部の画像URLを指定すると、その画像の取得先への通信が発生します。公開するコードに機密情報が含まれていないか確認してください。
設置先がHTML・CSS・JavaScriptを許可する必要があります。他のスタイルやスクリプトとの組み合わせで見え方が変わるため、公開前に確認してください。
HOW TO USE
使い方
パーツを選ぶ
左のパネルから、テーブル・カード・アコーディオンなど作成したいパーツを選択します。
データとデザインを編集
中央のパネルでデータを入力し、色やデザイン、オプションをカスタマイズします。
コードをコピー＆ペースト
プレビューを確認後、HTML / CSS / JS のコードをコピーしてサイトに貼り付けます。
FAQ
よくある質問
Q1: 料金はかかりますか？入力データはどう扱われますか？
A1: 無料で利用できます。入力データとコード生成はブラウザ内で処理します。外部の画像URLを指定した場合は画像の取得先への通信が発生します。
Q2: 生成したコードは商用サイトでも使えますか？
A2: 生成コードは個人・商用サイトに設置できます。掲載する文章・画像などの利用条件と、設置先での表示・動作をご確認ください。
Q3: WordPressでの使い方は？
A3: カスタムHTMLブロックに、生成したHTML、CSS（styleタグごと）、JS（scriptタグごと）を順番に貼り付けてください。設置先でも表示と動作を確認してください。
次のUIパーツを、プレビューから
データを入力して、必要なコードをコピーできます。
無料でテーブル支部を使う