Tailwind CSS実装例(サンプルコード)の紹介 〜 フォトサイト/LP 〜

Home > TECH BLOG > Tailwind CSS実装例(サンプルコード)の紹介 〜 フォトサイト/LP
公開日:2022年8月5日 更新日:2022年8月5日

記事概要


Codejumpのデザインをもとに、Tailwind CSSの実装例を作成してみました。
Tailwind CSSのサンプルコードとしてもご活用いただければ幸いです。
コピーして使えるようにGithub URLを掲載いたします。

実装例


  1. ボタンを押すと、デモページが動作するようになります。
  1. ボタンを押すと、Tailwind CSSが記載されたHTMLが閲覧できます。
      • 例えば、class属性に書かれている がTailwind CSSです。
  1. ボタンを押すと、コンパイル済みのCSSが閲覧できます。こちらは、Tailwind CSSのライブラリで自動生成されたCSSです。

コード(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,500円に割引される特別クーポンが適用されます!
    • 有効期限は、です。

関連ブログ