💡
【第一回】Tailwind CSS×React コピペ3分クッキング【ヘッダー編】
皆さんこんにちは。Sandyマンです。今回は、Tailwind CSS×Reactの構成で3分でヘッダーを作っていこうと思います。それではやっていきましょう！
1.Tailblocksからコードをコピペ
まず、Tailblocks（MITライセンス）というサイトに飛びます。詳しくはこの記事から！！
開いたら左のほうのバーから「Header」のところまでいっていい感じのやつをコピペします。上のView CodeというところをクリックしたらHTMLが出てきます。こいつをコピペしましょう。
2.コードを修正
コピペしたコードは素のHTMLなので、このままでは動きません。今回の場合はReactなので、「class」の部分を「className」に修正する必要があります。一つずつ修正するのは疲れるので、VSCodeだと単語を選択して「Ctrl+D」で一気に選択できるのでそれを使います。
これでエラーがなくなったら動かしてみます。こんな感じで動けば成功です。
3.カスタマイズ
あとは、ロゴを変えたり、日本語にしてみたり、ボタンの色を変えたりと好きなようにカスタマイズすれば完成です。簡単ですね！
まとめ
ということで、コピペで簡単にヘッダーを作ってみました。このようなサイトは他にもいろいろあるので、いろいろ試してどんどん活用していきましょう！それではさようならーーーーーーー！！
Discussion