マジセミドライブ
ウェビナー関連のニュースやITサービス&ツールの最新情報を随時配信します。
AIツール実験室
2023.07.12
【AIツール実験室】AI対抗「HTML テーブル装飾CSS 」デザインセンス選手権
コンテンツ
はじめに
ごあいさつ
日本全国の「AI対抗選手権ファン」のみなさま、
おつかれさまです。
「機動戦士ガンダム 水星の魔女」(全24話)の履修が完了したわけですが、
「エリクトの真相」についてのシナリオトラップが浅めであったのではないかと思う反面で、
「今までガンダム作品を1つも見たことがないガンダムビギナー」にとっても入り込みやすく、
過去の作風とも異なる「新しいガンダム」としては、素晴らしい作品であると思うわけで、
「ハイライトシーンはどこだと思いますか?」と尋ねられるとするならば、
やはり「お手てでパーン」を挙げざるを得ない、
マジセミ担当者Aでございます。
今回の企画概要
今回は「AI選手のみなさん」に「テーブル装飾CSS」を作ってもらおうと思います。
どちらのAI選手が「もっともナイスなCSS」を仕上げてくれるのか、期待しましょう。
前回までのあらすじ
→【ちょちょいと自動化DX】 WordPress関数を作って記事リストを出力
こちらで作成した「自動出力されるテーブル」を装飾するCSSを作ってもらいます。
ご注意点
※本記事は、担当者Aの主観により作成されていますので、なにとぞ、そういうことでよろしくお願いします。
出場AI選手紹介
背番号 | AI選手 | 備考 | オフィシャルサイト |
---|---|---|---|
01 | ChatGPT4 | エースの風格 | https://chat.openai.com/ |
02 | Bing | GPTの系譜を継ぐ者 | https://www.bing.com/ |
03 | Bard | 回答は速い。たまに嘘情報が出る。 | https://bard.google.com/ |
04 | Perplexity | 回答が速い。日本語は苦手? | https://www.perplexity.ai/ |
対象となるHTMLテーブル出力関数
装飾対象のHTMLテーブルは、
こちらのPHP関数から出力されます。
“
function staffA_get_article_chatGptPlugin() { // WP_Queryの引数 $args = array( 'cat' => 339, 'orderby' => 'date', 'order' => 'DESC', ); // クエリ $query = new WP_Query( $args ); // ループ if ( $query->have_posts() ) { $output = '<table>'; $output .= '<tr><th>登録日</th><th>記事名</th><th>ページ</th></tr>'; while ( $query->have_posts() ) { $query->the_post(); $output .= '<tr>'; $output .= '<td>' . get_the_date('Y/m/d') . '</td>'; $title = get_the_title(); $title = str_replace('【ChatGPTプラグイン探訪】', '', $title); $output .= '<td>' . $title . '</td>'; $output .= '<td><a href=""' . get_permalink() . '"" target=""_blank"">ページリンク</a></td>'; $output .= '</tr>'; } $output .= '</table>'; } else { // 投稿が見つからなかった場合 $output = '該当する記事が見つかりませんでした。'; } // 元の投稿データを復元 wp_reset_postdata(); return $output; } add_shortcode('staffA_get_article_chatGptPlugin', 'staffA_get_article_chatGptPlugin');
”
①プロンプトを作成します
■指示
HTMLテーブルを装飾するCSSを作成してください。
■補足
・最新情報を検索して「最新CSSトレンド」を取得してください。
・さまざまなCSSテクニックを駆使して「クールなCSS」にしてください。
■デザインイメージ要望
・見やすい
・さわやか
・明るい
・ソリッド
・パステルカラフル
■説明
CSS装飾対象HTMLテーブルは、WordPressのPHP関数から出力されます。
■HTMLテーブル出力関数
※※※HTMLテーブル出力PHP関数コード※※※
■参考情報
この指示は、以下の4つのAIに対して出題しています。
・ChatGPT4
・Bing
・Bard
・Perplexity
他のAIに負けないように、素晴らしいCSSを作成してください。
②CSSを作成してもらいます
01:ChatGPT4選手の回答
実行結果
CSS
“
table { width: 100%; border-collapse: collapse; box-shadow: 0 0 20px rgba(0,0,0,0.15); } table tr { background-color: #f8f8f8; border-bottom: 1px solid #ddd; } table tr:nth-child(even) { background-color: #f1f1f1; } table th, table td { padding: 12px 15px; text-align: left; } table th { background-color: #d5e9fa; color: #333; text-transform: uppercase; font-size: 0.85em; } table td a { color: #3498db; display: inline-block; margin: 0 0 1em; padding: 10px 15px; text-decoration: none; background: #eaf2f8; color: #2980b9; border-radius: 3px; transition: background 0.25s ease-in-out; } table td a:hover { background: #3498db; color: #fff; }
”
02:Bing選手の回答
実行結果
※うまくスクショが取れないので、テキストを貼ります。
ご指示ありがとうございます。最新のCSSトレンドについて調べました。
2022年に注目したいCSSの新機能として、コンテナクエリ(@container)、条件式(@when/@else)、アクセントカラー(accent-color)、カスケードレイヤー(Cascade Layers)、スクロールタイムライン(@scroll-timeline)、ネスト(入れ子)、新たなビューポート単位(New Viewport Units)、新しいメディアクエリの書き方(Media Query Ranges)などがあります1。
以下は、ご指示のデザインイメージ要望に沿った、見やすく、さわやかで明るく、ソリッドでパステルカラフルなHTMLテーブルを装飾するCSSの例です。
このCSSは、WordPressのPHP関数から出力されるHTMLテーブルに適用することができます。他のAIに負けないように、素晴らしいCSSを作成しました。ご確認ください。
CSS
“
table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #f2f2f2; } th { background-color: #4CAF50; color: white; }
”
03:Bard選手の回答
実行結果
CSS
“
table { border-collapse: collapse; width: 100%; margin: 0 auto; } th, td { border: 1px solid #ccc; padding: 5px; text-align: center; } th { background-color: #f0f0f0; font-weight: bold; } td { background-color: #fff; } tr:nth-of-type(odd) { background-color: #eee; } tr:nth-of-type(even) { background-color: #fff; } th, td { color: #333; } a { text-decoration: none; color: #333; } a:hover { text-decoration: underline; color: #000; }
”
04:Perplexity選手の回答
実行結果
CSS
“
table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } th { background-color: #f2f2f2; color: #333; } tr:nth-child(even) { background-color: #f2f2f2; } tr:hover { background-color: #ddd; }
”
③作成CSS結果披露
【ご参考】オリジナル無装飾版
01:ChatGPT4選手
アピールポイント
・テーブルの見た目を改善
・リンクにホバーエフェクトを追加
・奇数行と偶数行で背景色を交互に変更することで、テーブルの読みやすさを向上
審査コメント
スッキリシンプルですね。
しかし、要望内容に対して、地味で堅実すぎる面があるかもしれません。
もっと、アクティブに冒険してほしかったですね。
CSS装飾結果
02:Bing選手
アピールポイント
・『他のAIに負けないように、素晴らしいCSSを作成しました。』
審査コメント
タイトル行の「緑の背景色」+「白のテキスト」が見やすいですね。
行間が詰まっているので、件数が増えても、長ったらしくならないところも、よいですね。
CSS装飾結果
03:Bard選手
アピールポイント
・『以下のCSSをHTMLテーブルに適用すると、見やすく、さわやか、明るい、ソリッド、パステルカラフルなテーブルになります。』
・『他のAIに負けないように、CSSを作成しました。』
・最新のCSSトレンドを反映
・さまざまなCSSテクニックを駆使して作成
審査コメント
だいぶ地味な感じになってしまいましたね。
記事名は「中央寄せ」よりも「左寄せ」のほうが、よい感じがします。
CSS装飾結果
04:Perplexity選手
アピールポイント
・テーブルのセルの余白を設定
・テーブルの背景色を設定
・テーブルの列のヘッダーを設定
・テーブルの偶数行の背景色を設定
・マウスオーバー時のテーブルの行の背景色を設定
審査コメント
シンプルといえば、そうなのですが、
これも、また、地味なんですね。
CSS装飾結果
④「HTMLテーブル装飾CSS」デザインセンス選手権 優勝AI発表
厳正な審査の結果、
優勝は「Bing選手」に決定いたしました。
やはり、「ヘッダ行の背景を緑色にした」という点が、ポイント高かったですね。
おめでとうございます!
⑤改善版CSS作成
もうちょい改善してもらいます。
プロンプト
■指示
CSSを改善してください。
■改善点
・テーブル行選択時のホバー効果を追加してください。
■改善追加提案
・他にこのCSSを改善する方法はありますか?
■説明
CSS装飾対象HTMLテーブルは、WordPressのPHP関数から出力されます。
■HTMLテーブル出力関数
※※※HTMLテーブル出力PHP関数コード※※※
■CSS
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
th {
background-color: #4CAF50;
color: white;
}
実行結果
CSS改善版
“
table { border-collapse: collapse; width: 100%; border: 1px solid #ddd; } th, td { text-align: left; padding: 8px; border: 1px solid #ddd; } tr { max-height: 200px; overflow: auto; } tr:nth-child(even) { background-color: #f2f2f2; } tr:hover { background-color: #ddd; } th { background-color: #4CAF50; color: white; } td a:hover { color: #4CAF50; }
”
【改善比較】改善前
【改善比較】改善後
枠線が追加されて、見やすくなりましたね。
よい感じなので、これにて、とりあえず完成としましょう。
⑥【ChatGPTプラグイン探訪】記事リストポータルページ アップデートされました
ちょちょいと作ってもらって、
良い感じになったテーブル表示あたりをご確認ください。
最後に
「とってもシンプルすぎるテーブル」が「それなりのテーブル」になれました。
現状のAI選手たちは「色味まわりのデザイン感覚的なもの」は、まだまだ苦手のようですね。
しかし、さらにグイグイに進化していくことで、
「プロの業者を上回るデザイン」をしてくれるようになるのは、
それほど先の未来ではないかもしれません。
次回予定
「真っ白な背景をなんとかしてみる」などをやってみようと思います。
「進んで2つ」くらいはもらえるように、やってまいりましょう。
【お知らせ】「マジセミ」のご紹介
「マジセミ」では、日々、多くのIT関連セミナーを開催しています。
多くのセミナーの中から「ご自身のスキルやビジネスを強化できるセミナー」を見つけて、ぜひ1度、参加してみてください。
マジセミ関連プラットフォーム
プラットフォーム | 説明 | URL |
---|---|---|
マジセミ | マジセミで実施されるさまざまなセミナーの開催情報を確認できます。 「IT関連セミナー」「製造業関連セミナー」など、ご自身のビジネスを強化できるセミナーを検索できます。 |
→majisemi.com |
マジセミサービス | 「セミナーを開催したい方」向けの情報を確認できます。 トライアルからの利用が可能です。 |
→majisemi.com →service |
マジセミドライブ | 「IT関連コンテンツ」などを紹介しています。 | →majisemi.com →topics |
マジセミFacebook | 毎日「マジセミ関連情報」や「IT関連ニュース」などを紹介しています。 ★フォローお願いします。 |
→facebook.com →OSSNews |
マジセミTwitter | マジセミFacebookと同様に、 毎日「マジセミ関連情報」や「IT関連ニュース」などを紹介しています。 ★フォローお願いします。 |
→twitter.com →Majisemi_it |
※「ご意見」「ご感想」「誤字がありましたよ」「こんな使い方もあるみたいですよ」などありましたら、
マジセミSNS(Facebook or Twitter)まで、お知らせください。
この記事のタグ一覧
フリーワード検索
カテゴリー一覧
アクセスランキング
- 🏆ランク1位🏆
【無料で使える】「 翻訳 」ツールまとめ - 🏆ランク2位🏆
【OSS情報アーカイブ】Redis - 🏆ランク3位🏆
【OSS情報アーカイブ】Node-RED - 🏆ランク4位🏆
【OSS情報アーカイブ】Apache Flink - 🏆ランク5位🏆
【OSS情報アーカイブ】SQLite - 🏆ランク6位🏆
【AIツール実験室】楽曲作成ツール「 Suno AI 」〜AI生成ミュージックフェス〜 - 🏆ランク7位🏆
【無料で使える】「 エンドポイントセキュリティ 」ツールまとめ - 🏆ランク8位🏆
【OSS情報アーカイブ】PuTTY - 🏆ランク9位🏆
【無料で使える】「 プロジェクト管理 」ツールまとめ - 🏆ランク10位🏆
【OSS情報】クラウドネイティブ分散SQLデータベース「 CockroachDB 」
おすすめの記事
ChatGPT探訪
2024.05.07
【ChatGPT探訪】「 無限議論 」〜最強スタンド考察〜🤔
マジセミSNSに投稿した 【担当者A】の「 無限議論 」〜最強スタンド考察〜💬 を記事化したものです。 ChatGPTに課金していないみなさんにも、 AI同士の議論をお楽しみいただけます👍 ※原稿テキストを放り込むだけで、 ジョジョ風イラストを作成してしまう生成AIがすごくないですか?