Tailwind CSS実装例(サンプルコード)の紹介 〜 フォトサイト/LP 〜
公開日:2022年8月5日 更新日:2022年8月5日
記事概要
Codestepのデザインをもとに、Tailwind CSSの実装例を作成してみました。
Tailwind CSSのサンプルコードとしてもご活用いただければ幸いです。
コピーして使えるようにGithub URLを掲載いたします。
実装例
Run Pen
ボタンを押すと、デモページが動作するようになります。
HTML
ボタンを押すと、Tailwind CSSが記載されたHTMLが閲覧できます。- 例えば、class属性に書かれている
bg-[#f4f9ff]
がTailwind CSSです。
CSS
ボタンを押すと、コンパイル済みのCSSが閲覧できます。こちらは、Tailwind CSSのライブラリで自動生成されたCSSです。
See the Pen Tailwind CSS実装例(サンプルコード)の紹介 〜 フォトサイト/LP 〜 by ふじポン@CEO兼エンジニア (@fujipon-wywy) on CodePen.
コード(Github)
開発環境などにも興味がある方は、以下、Githubをご確認ください。
README.mdに開発環境の構築方法、コンパイ方法など記載してあります。
デザイン参考(Codestep)
デザインは、「作って学ぶコーディング学習サイトのCodestep」様のデザインを参考にさせていただきました。ありがとうございます。
まとめ
実装例を見ると、結構、「Tailwind CSS難しいな」って感じられた方もいるのではないのでしょうか?ただ、一回、実装してみると通常のHTML/CSSよりもわかりやすくなるので、以下参考に是非学んでみてください!
参考1:公式サイト
最新のインストール方法など、公式情報が満載です。ブログなどは古い情報も混じっているので、まずは公式サイトを一通りチェックすることをお勧めします。
参考2:ユーティリティーファーストとTailwind CSSのススメ
Qiitaの人気記事です。Tailwind CSSは、ユーティリティーファーストという考え方が、特徴的なのですが、具体例を交えてわかりやすく説明してくています。
参考3:TailWindCSSを始めようとしている人へ
Zennのわかりやすい記事です。「使い方をざっくり知りたい人」「できることをざっくり知りたい人」に向けて、要点がよくまとまっているサイトです。これから実際に始める方には、まず読む資料だと思います。
関連ブログ
ブログ一覧