Aiにデザイン頼むと、React＆TailwindCSSで書いてくるのであった。
一応、知っておかないと気持ち悪いので、Reactの本を買って読む。まったくわからない。というか、便利なの？面倒くさい気がする。。。 でも、それでも、これならやれるなと思ってしまった。 が Tailwind CSSは、これは覚えるようなものじゃなく、AI用ですね。
そうか、AIが書いて、プログラミングなんて、そんな知らんくてもいいんや！
PHPで書いて、CSSあてて、Bootstrapでみたいなことはもう終わったんだと悲しみにくれるが、内容を知ると、素晴らしいなと思うのだった。
Tailwind CSS の最新は、4.3 Amazonでも英語の本しか最新の情報はない。
ショーケースというのを見ていると楽しくなってくる。
まあ。こんな私が、そんなオシャレなサイト作るはずはないけど。
Blogger で 大阪都構想 大阪市廃止反対のホームページを作らせてもらいました。 Aiに相談しながら作ると、なんと、オシャレになるのでしょう。。。
でも、文字を流すようにしてくれとか、指示したのは私なんで。はい。 なんか、そういう時代なんだなぁって思います。
max-w-6xl 要素の最大幅（Maximum Width）
mx-auto 左右の余白（Margin X-axis）を「自動（auto）」に。p-4 要素の内側の余白（Padding）を指定します。
bg-zinc-950 背景色（Background）を指定しています。ここを参照。text-zinc-100 文字の色（Text color）を指定
flex-col 並びの方向（Flex Direction）を「縦方向（Column）」に指定
gap-6 縦や横に並んだ子要素同士の間隔（隙間）を指定します。6 は 1.5rem（通常24px）に相当し、カードとカードの間に程よい余白を作ります。
grid-cols-1 コラムが1列を基本的に指定し
md:grid-cols-2 md: はメディアクエリ（画面幅が特定のサイズ以上、通常はタブレットやパソコン向けの 768px 以上）のときだけ2列にしろの指定.
bg-zinc-950/60 背景色（Background）を指定しています。bg-zinc-950（非常に濃い黒に近い色）に、/60 という 透明度（Opacity / 透過度） を指定
rounded-xl 要素の角を丸くします
h-48 要素の高さ（Height）を指定しています。48 は 12rem（約192px）
高さや幅をピクセルで指定もできる
h-[200px] 幅 w-[350px].mt-[15px] マージントップ15px と、わりと直感的
<script src="https://cdn.tailwindcss.com"></script> と書いたらいいだけなんですごい
皆さんがんばりました
カジノはいらない！
熱心に高校生が聞いてくれました
0 コメント :
コメントを投稿
コメントありがとうございます。