Tailwind CSS実装例(サンプルコード)の紹介 〜 フォトサイト／LP 〜
公開日：2022年8月5日 更新日：2022年8月5日
記事概要
Codejumpのデザインをもとに、Tailwind CSSの実装例を作成してみました。
Tailwind CSSのサンプルコードとしてもご活用いただければ幸いです。
コピーして使えるようにGithub URLを掲載いたします。
実装例
- ボタンを押すと、デモページが動作するようになります。
- ボタンを押すと、Tailwind CSSが記載されたHTMLが閲覧できます。
- 例えば、class属性に書かれている がTailwind CSSです。
- ボタンを押すと、コンパイル済みのCSSが閲覧できます。こちらは、Tailwind CSSのライブラリで自動生成されたCSSです。
See the Pen Tailwind CSS実装例(サンプルコード)の紹介 〜 フォトサイト／LP 〜 by ふじポン@CEO兼エンジニア (@fujipon-wywy) on CodePen.
コード(Github)
開発環境などにも興味がある方は、以下、Githubをご確認ください。
README.mdに開発環境の構築方法、コンパイ方法など記載してあります。
デザイン参考(Codejump)
デザインは、「作って学ぶコーディング学習サイトのCodejump」様のデザインを参考にさせていただきました。ありがとうございます。
まとめ
実装例を見ると、結構、「Tailwind CSS難しいな」って感じられた方もいるのではないのでしょうか？ただ、一回、実装してみると通常のHTML/CSSよりもわかりやすくなるので、以下参考に是非学んでみてください！
参考1：公式サイト
最新のインストール方法など、公式情報が満載です。ブログなどは古い情報も混じっているので、まずは公式サイトを一通りチェックすることをお勧めします。
参考2：ユーティリティーファーストとTailwind CSSのススメ
Qiitaの人気記事です。Tailwind CSSは、ユーティリティーファーストという考え方が、特徴的なのですが、具体例を交えてわかりやすく説明してくています。
参考3：TailWindCSSを始めようとしている人へ
Zennのわかりやすい記事です。「使い方をざっくり知りたい人」「できることをざっくり知りたい人」に向けて、要点がよくまとまっているサイトです。これから実際に始める方には、まず読む資料だと思います。
[宣伝] GASプログラミング入門の教材 - Udemy
- 2023年11月時点で、約3,000人の受講生を獲得し、「Udemy Business」に選定されてます。
- 「Udemy Business」とは、Udemyが「企業研修」向けに提供しているサービスのことです。
- Udemyで販売している全ての講座の中から、「企業研修」に提供できる高品質な講座をレビューや内容を加味して厳選していることが特徴のサービスです。
- その「Udemy Business」で、このGAS講座は採用されております。
- 教材の詳細は、以下のUdemyに記載しておりますので内容ご確認ください
- 以下のバナーから購入すると、通常、定価27,800円が1,600円に割引される特別クーポンが適用されます！