【ガリアのIT講座】Geminiでサイトの表（テーブル）をかっこよくしてみた。

2026-01-04

<PR>

サイトに表示される表（テーブル）って、ちょっとかっこ悪かったりします。PCではきちんと表示されていても、スマホにすると崩れてしまったり。

ワードプレスにデフォルトで入っているテーブル機能も、デザイン的に今一つ。

こんな悩みを解決するために、GeminiにHTMLを書かせてみました。

STEP1

まずWPのテーブル機能で表をつくります。

まあ、こんな感じです。

STEP2

この表をHTMLにしてコピーし、Geminiのプロンプトに指示します。

ガリア

次の表を角丸にして、スマホでもきれいに出るように（スクロールあり）、色はブルー（少しパステル）を基調にして組みなおして。

<figure class=”wp-block-table”><table class=”has-fixed-layout”><tbody><tr><td class=”has-text-align-center” data-align=”center” rowspan=”2″><strong>学校</strong></td><td class=”has-text-align-center” data-align=”center” rowspan=”2″><strong>性別</strong></td><td class=”has-text-align-center” data-align=”center” rowspan=”2″><strong>定員</strong></td><td class=”has-text-align-center” data-align=”center” colspan=”2″><strong>令和7年度</strong></td></tr><tr><td class=”has-text-align-center” data-align=”center”><strong>志願者</strong></td><td class=”has-text-align-center” data-align=”center”><strong>倍率</strong></td></tr><tr><td class=”has-text-align-center” data-align=”center” rowspan=”3″>中央中等</td><td class=”has-text-align-center” data-align=”center”>男</td><td class=”has-text-align-center” data-align=”center”>60</td><td class=”has-text-align-center” data-align=”center”>148</td><td class=”has-text-align-center” data-align=”center”>2.5</td></tr><tr><td class=”has-text-align-center” data-align=”center”>女</td><td class=”has-text-align-center” data-align=”center”>60</td><td class=”has-text-align-center” data-align=”center”>154</td><td class=”has-text-align-center” data-align=”center”>2.6</td></tr><tr><td class=”has-text-align-center” data-align=”center”>合計</td><td class=”has-text-align-center” data-align=”center”>120</td><td class=”has-text-align-center” data-align=”center”>302</td><td class=”has-text-align-center” data-align=”center”>2.5</td></tr><tr><td class=”has-text-align-center” data-align=”center” rowspan=”3″>四ツ葉学園</td><td class=”has-text-align-center” data-align=”center”>男</td><td class=”has-text-align-center” data-align=”center”>60</td><td class=”has-text-align-center” data-align=”center”>97</td><td class=”has-text-align-center” data-align=”center”>1.6</td></tr><tr><td class=”has-text-align-center” data-align=”center”>女</td><td class=”has-text-align-center” data-align=”center”>60</td><td class=”has-text-align-center” data-align=”center”>109</td><td class=”has-text-align-center” data-align=”center”>1.8</td></tr><tr><td class=”has-text-align-center” data-align=”center”>合計</td><td class=”has-text-align-center” data-align=”center”>120</td><td class=”has-text-align-center” data-align=”center”>206</td><td class=”has-text-align-center” data-align=”center”>1.7</td></tr><tr><td class=”has-text-align-center” data-align=”center” rowspan=”3″>太田中</td><td class=”has-text-align-center” data-align=”center”>男</td><td class=”has-text-align-center” data-align=”center”>51</td><td class=”has-text-align-center” data-align=”center”>94</td><td class=”has-text-align-center” data-align=”center”>1.8</td></tr><tr><td class=”has-text-align-center” data-align=”center”>女</td><td class=”has-text-align-center” data-align=”center”>51</td><td class=”has-text-align-center” data-align=”center”>141</td><td class=”has-text-align-center” data-align=”center”>2.8</td></tr><tr><td class=”has-text-align-center” data-align=”center”>合計</td><td class=”has-text-align-center” data-align=”center”>102</td><td class=”has-text-align-center” data-align=”center”>200</td><td class=”has-text-align-center” data-align=”center”>2.3</td></tr></tbody></table></figure>