はじめに
ごあいさつ
日本全国の「AI対抗選手権ファン」のみなさま、
おつかれさまです。
「機動戦士ガンダム 水星の魔女」(全24話)の履修が完了したわけですが、
「エリクトの真相」についてのシナリオトラップが浅めであったのではないかと思う反面で、
「今までガンダム作品を1つも見たことがないガンダムビギナー」にとっても入り込みやすく、
過去の作風とも異なる「新しいガンダム」としては、素晴らしい作品であると思うわけで、
「ハイライトシーンはどこだと思いますか?」と尋ねられるとするならば、
やはり「お手てでパーン」を挙げざるを得ない、
マジセミ担当者Aでございます。
今回の企画概要
今回は「AI選手のみなさん」に「テーブル装飾CSS」を作ってもらおうと思います。
どちらのAI選手が「もっともナイスなCSS」を仕上げてくれるのか、期待しましょう。
前回までのあらすじ
→【ちょちょいと自動化DX】 WordPress関数を作って記事リストを出力
こちらで作成した「自動出力されるテーブル」を装飾するCSSを作ってもらいます。
ご注意点
※本記事は、担当者Aの主観により作成されていますので、なにとぞ、そういうことでよろしくお願いします。
対象となるHTMLテーブル出力関数
装飾対象のHTMLテーブルは、
こちらのPHP関数から出力されます。
“
function staffA_get_article_chatGptPlugin() { |
$query = new WP_Query( $args ); |
if ( $query ->have_posts() ) { |
$output .= '<tr><th>登録日</th><th>記事名</th><th>ページ</th></tr>' ; |
while ( $query ->have_posts() ) { |
$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 = '該当する記事が見つかりませんでした。' ; |
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
“
border-collapse : collapse ; |
box-shadow: 0 0 20px rgba( 0 , 0 , 0 , 0.15 ); |
background-color : #f8f8f8 ; |
border-bottom : 1px solid #ddd ; |
table tr:nth-child(even) { |
background-color : #f1f1f1 ; |
background-color : #d5e9fa ; |
text-transform : uppercase ; |
transition: background 0.25 s ease-in-out; |
”
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
“
border-collapse : collapse ; |
background-color : #f2f2f2 ; |
background-color : #4CAF50 ; |
”
03:Bard選手の回答
実行結果
CSS
“
border-collapse : collapse ; |
background-color : #f0f0f0 ; |
text-decoration : underline ; |
”
04:Perplexity選手の回答
実行結果
CSS
“
border-collapse : collapse ; |
background-color : #f2f2f2 ; |
background-color : #f2f2f2 ; |
”
③作成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改善版
“
border-collapse : collapse ; |
background-color : #f2f2f2 ; |
background-color : #4CAF50 ; |
”
【改善比較】改善前
【改善比較】改善後
枠線が追加されて、見やすくなりましたね。
よい感じなので、これにて、とりあえず完成としましょう。
最後に
「とってもシンプルすぎるテーブル」が「それなりのテーブル」になれました。
現状のAI選手たちは「色味まわりのデザイン感覚的なもの」は、まだまだ苦手のようですね。
しかし、さらにグイグイに進化していくことで、
「プロの業者を上回るデザイン」をしてくれるようになるのは、
それほど先の未来ではないかもしれません。
次回予定
「真っ白な背景をなんとかしてみる」などをやってみようと思います。
「進んで2つ」くらいはもらえるように、やってまいりましょう。
【お知らせ】「マジセミ」のご紹介
「マジセミ」では、日々、多くのIT関連セミナーを開催しています。
多くのセミナーの中から「ご自身のスキルやビジネスを強化できるセミナー」を見つけて、ぜひ1度、参加してみてください。
マジセミ関連プラットフォーム
※「ご意見」「ご感想」「誤字がありましたよ」「こんな使い方もあるみたいですよ」などありましたら、
マジセミSNS(Facebook or Twitter)まで、お知らせください。