教育動画法人研修システム開発メンバー紹介TECH BLOGお問い合わせ
教育動画法人研修システム開発メンバー紹介TECH BLOGお問い合わせ

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

Home > TECH BLOG > Tailwind CSS実装例(サンプルコード)の紹介 〜 フォトサイト／LP
公開日：2022年8月5日　更新日：2022年8月5日
著者：藤澤 勇樹(FUJISAWA Yuki)

記事概要

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

実装例

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

See the Pen Tailwind CSS実装例(サンプルコード)の紹介 〜 フォトサイト／LP 〜 by ふじポン@CEO兼エンジニア (@fujipon-wywy) on CodePen.

コード(Github)

開発環境などにも興味がある方は、以下、Githubをご確認ください。
README.mdに開発環境の構築方法、コンパイ方法など記載してあります。

デザイン参考(Codestep)

デザインは、「作って学ぶコーディング学習サイトのCodestep」様のデザインを参考にさせていただきました。ありがとうございます。
【HTML/CSS コーディング練習】入門編：フォトサイト／LP
※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています。 課題内容 写真集を出版することになった友人のために、紹介用のWebページを制作します。スマホやタブレットでも表示できるようにレスポンシブの対応も行います。 設定単価 コーディング1ページ：1万円 素材 学習用の素材をダウンロードする ※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています デザインイメージ ▼PC表示 ▼スマホ表示 コーディング仕様 コンテンツ幅 メインビジュアルが1000px、中のコンテンツが600pxです。 INDEX 白背景にします。 DETAIL 画像とテキストを横並びに配置します。 著者、出版社、発行年のエリアの上下には罫線を引きます。 レスポンシブ ブレークポイントは1024pxです。 DETAILのコンテンツは縦積みにします。 デモサイトをもとに、模写コーディングに挑戦してみましょう！ コーディングで悩んだ場合は、下記のレイアウト構成の組み立て方を参考にしてみてください。 サイト全体と各パーツのレイアウト構成について解説しています。 コーディングが完了したら、下記の「 ソースコード 」を参考に、自分の作ったコードとサイトをチェックしてみてください。 コーディングの1例です。コーディングの仕方は1パターンだけではないので、あくまでも参考として自分のソースコードと比較しながらチェックしてみてください。 ソースコードはこちら 模写コーディングのやり方に迷った方は、こちらの模写コーディングの手順を参考にしてみてください。 デザインカンプからのコーディングに挑戦してみましょう！ コーディングで悩んだ場合は、下記のレイアウト構成の組み立て方を参考にしてみてください。 サイト全体と各パーツのレイアウト構成について解説しています。 コーディングが完了したら、下記の「 ソースコード」と「 デモサイト 」を参考に、自分の作ったコードとサイトをチェックしてみてください。 ソースコード コーディングの1例です。コーディングの仕方は1パターンだけではないので、あくまでも参考として自分のソースコードと比較しながらチェックしてみてください。 ソースコードはこちら デモサイト デモサイトと自分で作成したサイトを比較して、デザインや動きなどをチェックしてみてください。
https://code-step.com/photo-menu/

まとめ

実装例を見ると、結構、「Tailwind CSS難しいな」って感じられた方もいるのではないのでしょうか？ただ、一回、実装してみると通常のHTML/CSSよりもわかりやすくなるので、以下参考に是非学んでみてください！

参考1：公式サイト

最新のインストール方法など、公式情報が満載です。ブログなどは古い情報も混じっているので、まずは公式サイトを一通りチェックすることをお勧めします。

参考2：ユーティリティーファーストとTailwind CSSのススメ

Qiitaの人気記事です。Tailwind CSSは、ユーティリティーファーストという考え方が、特徴的なのですが、具体例を交えてわかりやすく説明してくています。

参考3：TailWindCSSを始めようとしている人へ

Zennのわかりやすい記事です。「使い方をざっくり知りたい人」「できることをざっくり知りたい人」に向けて、要点がよくまとまっているサイトです。これから実際に始める方には、まず読む資料だと思います。

関連ブログ

ブログ一覧
Twitterでシェア