序章
開発者は、カスケードスタイルシート(CSS)を使用してWebサイトのスタイルを設定します。 しかし、大規模なWebサイトやアプリを構築する場合、これらのルールを最初から作成するのは面倒になることがよくあります。 これが、 Bootstrap 、 Foundation 、 Bullma 、 Pure 、などのCSSの記述を容易にする複数のCSSフレームワークがある理由です。 X157X]マテリアライズなど。
Taiwind CSS は、デフォルトのテーマがなく、組み込みのUIコンポーネントがないため、前述のフレームワークとは多少異なります。 Tailwindは、カスタムユーザーインターフェイスを迅速に構築するためのユーティリティファーストのCSSフレームワークです。 つまり、サイトを構築するための事前に設計されたウィジェットのメニューを備えたフレームワークを探している場合、Tailwindは適切なフレームワークではない可能性があります。 代わりに、Tailwindは、2つのサイトが同じように見えることを奨励することなく、複雑なユーザーインターフェイスの構築を容易にする、高度に構成可能な低レベルのユーティリティクラスを提供します。
このチュートリアルでは、スマートヘルスモニタリング腕時計(SHMW)製品を顧客に紹介するためのランディングページを作成します。
最終的な製品は次のようになります。
ランディングページは次のように分割されます。
- ナビゲーションバー
- ヒーローセクション
- 機能セクション
- 証言
- アクションの呼び出し
- フッター
このプロジェクトのアセットは、このGitHubページからダウンロードできます。
前提条件
CSSの基本的な理解が役立つ場合がありますが、必須ではありません。
ステップ1—プロジェクトの設定
まず、shmw
という名前の新しいプロジェクトディレクトリを作成し、その中にindex.html
ファイルを作成します。
mkdir shmw cd shmw nano index.html
Tailwind CSSをすばやく起動して実行するために、CDN(Content Delivery Network)を介して最新のデフォルト構成ビルドを取得します。 次のスニペットをindex.html
に追加します。
index.html
<!DOCTYPE html> <html lang="en"> <head> <title>Smart Health Monitoring Wristwatch</title> <link rel="stylesheet" href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" /> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700" rel="stylesheet" /> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body class="text-gray-700 bg-white" style="font-family: 'Source Sans Pro', sans-serif"> </body> </html>
このスニペットでは、ボディに白い背景を付け、GoogleFontsからSource SansProフォントを引き出しました。
注: Tailwind CSSの機能の多くは、CDNビルドを使用して利用できません。 Tailwind CSS機能を最大限に活用するには、npmを介してTailwindをインストールします。
ステップ2—ナビゲーションバーを構築する
navbarは2つの列に分割されます。 最初の列にはロゴが表示され、2番目の列にはナビゲーションリンクが表示されます。 index.html
ファイルの<body>
の直後に次のコードを追加します。
index.html
<nav> <div class="container mx-auto px-6 py-2 flex justify-between items-center"> <a class="font-bold text-2xl lg:text-4xl" href="#"> SHMW </a> <div class="block lg:hidden"> <button class="flex items-center px-3 py-2 border rounded text-gray-500 border-gray-600 hover:text-gray-800 hover:border-teal-500 appearance-none focus:outline-none"> <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <title>Menu</title> <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" /> </svg> </button> </div> <div class="hidden lg:block"> <ul class="inline-flex"> <li><a class="px-4 font-bold" href="/">Home</a></li> <li><a class="px-4 hover:text-gray-800" href="#">About</a></li> <li><a class="px-4 hover:text-gray-800" href="#">Contact</a></li> </ul> </div> </div> </nav>
.container
を追加すると、要素のmax-width
が、現在のブレークポイントのmin-width
と一致するように設定されます。 コンテナを中央に配置するには、.mx-auto
と.px-6
を追加して、両側(左右)にパディングを配置します。 水平方向のナビゲーションバーが必要なので、コンテナの表示をflex
に設定し、そのアイテムの表示方法を指定します。 各アイテムの間に等量のスペースが必要です(.justify-between
を使用)。これにより、両方の列が端に押し出されます。 それらは垂直方向の中央に配置されます(.items-center
を使用)。 最後に、.py-2
を使用して、コンテナーの上部と下部の両方にパディングを追加します。
最初の列には、ナビゲーションバーにビジネスロゴ(この場合はテキストのみ)が表示されます。 2番目の列では、リンクがモバイルとデスクトップで異なって表示されるようにします。 div
には、モバイルメニューのボタンが含まれています。このボタンは、小さな画面のデバイスでのみ表示されます。 これを実現するために、.block
と.lg:hidden
の両方を追加します。これにより、ボタンがモバイルデバイスで表示され、大画面で非表示になります。
注:デフォルトでは、Tailwind CSSはモバイルファーストのアプローチを採用しているため、小さな画面から大きな画面に構築します。
次に、デスクトップリンクに対して、.hidden
と.lg:block
を追加します。これは、上記の逆を行います。 実際のリンクについては、.inline-flex
を追加して、リンクを水平に表示します。 個々のリンクについては、両側にパディングを付けます。 アクティブなリンク(この場合は home リンク)を示すために、テキストを太字にします。 残りのリンクについては、リンクにカーソルを合わせると、濃い灰色を使用します。
ステップ3—ヒーローセクションの構築
ヒーローセクションには、スマートヘルスモニタリング腕時計に関する情報と、ユーザーがすぐに行動を起こすための召喚ボタンが表示されます。 ナビゲーションバーの直後に次のコードスニペットを追加します。
index.html
<div class="py-20" style="background: linear-gradient(90deg, #667eea 0%, #764ba2 100%)" > <div class="container mx-auto px-6"> <h2 class="text-4xl font-bold mb-2 text-white"> Smart Health Monitoring Wristwatch! </h2> <h3 class="text-2xl mb-8 text-gray-200"> Monitor your health vitals smartly anywhere you go. </h3> <button class="bg-white font-bold rounded-full py-4 px-8 shadow-lg uppercase tracking-wider"> Pre Order </button> </div> </div>
まず、上部と下部の両方にパディングを追加してから、背景のグラデーションを設定します。 召喚ボタンについては、背景色を白にし、テキストを太字にし、パディングを付け、完全に丸みを帯びた境界線を付けて丸薬の形にします。 最後に、シャドウを付けてテキストを大文字にします。
ヒーローセクションを作成したので、機能セクションを作成する準備が整いました。
ステップ4—機能セクションの構築
このステップでは、デバイスの注目すべき機能を一覧表示するセクションを作成します。
ヒーローセクションの直後に以下を追加します。
index.html
<section class="container mx-auto px-6 p-10"> <h2 class="text-4xl font-bold text-center text-gray-800 mb-8"> Features </h2> <div class="flex items-center flex-wrap mb-20"> <div class="w-full md:w-1/2"> <h4 class="text-3xl text-gray-800 font-bold mb-3">Exercise Metric</h4> <p class="text-gray-600 mb-8">Our Smart Health Monitoring Wristwatch is able to capture you vitals while you exercise. You can create different category of exercises and can track your vitals on the go.</p> </div> <div class="w-full md:w-1/2"> <img src="assets/health.svg" alt="Monitoring" /> </div> </div> <div class="flex items-center flex-wrap mb-20"> <div class="w-full md:w-1/2"> <img src="assets/report.svg" alt="Reporting" /> </div> <div class="w-full md:w-1/2 pl-10"> <h4 class="text-3xl text-gray-800 font-bold mb-3">Reporting</h4> <p class="text-gray-600 mb-8">Our Smart Health Monitoring Wristwatch can generate a comprehensive report on your vitals depending on your settings either daily, weekly, monthly, quarterly or yearly.</p> </div> </div> <div class="flex items-center flex-wrap mb-20"> <div class="w-full md:w-1/2"> <h4 class="text-3xl text-gray-800 font-bold mb-3">Syncing</h4> <p class="text-gray-600 mb-8">Our Smart Health Monitoring Wristwatch allows you to sync data across all your mobile devices whether iOS, Android or Windows OS and also to your laptop whether MacOS, GNU/Linux or Windows OS.</p> </div> <div class="w-full md:w-1/2"> <img src="assets/sync.svg" alt="Syncing" /> </div> </div> </section>
機能自体は、機能テキストと付随する画像の2列のグリッドに表示されます。 モバイルデバイスでは、互いに積み重ねます。 フレックスボックスを使用してグリッドを構築します。
ステップ5—証言セクションの作成
このステップでは、いくつかの証言のカードを含む証言セクションを作成します。 カードには、ユーザーの証言とユーザーの名前が含まれます。
機能セクションの直後に以下を追加します。
index.html
<section class="bg-gray-100"> <div class="container mx-auto px-6 py-20"> <h2 class="text-4xl font-bold text-center text-gray-800 mb-8"> Testimonials </h2> <div class="flex flex-wrap"> <div class="w-full md:w-1/3 px-2 mb-4"> <div class="bg-white rounded shadow py-2"> <p class="text-gray-800 text-base px-6 mb-5">Monitoring and tracking my health vitals anywhere I go and on any platform I use has never been easier.</p> <p class="text-gray-500 text-xs md:text-sm px-6">John Doe</p> </div> </div> <div class="w-full md:w-1/3 px-2 mb-4"> <div class="bg-white rounded shadow py-2"> <p class="text-gray-800 text-base px-6 mb-5">As an Athlete, this is the perfect product for me. I wear my Smart Health Monitoring Wristwatch everywhere I go, even in the bathroom since it's waterproof.</p> <p class="text-gray-500 text-xs md:text-sm px-6">Jane Doe</p> </div> </div> <div class="w-full md:w-1/3 px-2 mb-4"> <div class="bg-white rounded shadow py-2"> <p class="text-gray-800 text-base px-6 mb-5">I don't regret buying this wearble gadget. One of the best gadgets I own!.</p> <p class="text-gray-500 text-xs md:text-sm px-6">James Doe</p> </div> </div> </div> </div> </section>
まず、セクションに背景を付けて、ページの中央に配置します。 実際の証言では、フレックスボックスを使用してグリッドに表示します。 モバイルデバイスで表示するときに、それらを互いに積み重ねる(つまり、画面の全幅をとる)必要があります。したがって、.w-full
です。 次に、大きな画面では、.md:w-1/3
を使用して3列で表示する必要があります。 個々のカードには、白い背景、丸みを帯びた境界線、および影を付けます。
ステップ6—行動を促すフレーズを作成する
召喚状のセクションは、ユーザーが当社の製品の機能とデモユーザーからの証言を読んだ後すぐに行動を起こすことができるようにするために必要です。 証言セクションの直後に以下を追加します。
index.html
<section style="background-color: #667eea"> <div class="container mx-auto px-6 text-center py-20"> <h2 class="mb-6 text-4xl font-bold text-center text-white"> Limited in Stock </h2> <h3 class="my-4 text-2xl text-white"> Get yourself the Smart Health Monitoring Wristwatch! </h3> <button class="bg-white font-bold rounded-full mt-6 py-4 px-8 shadow-lg uppercase tracking-wider" > Pre Order </button> </div> </section>
召喚状を作成したので、フッターを作成する準備が整いました。
ステップ7—フッターを作成する
フッターには、ブログ、プライバシーポリシー、ソーシャルメディアなどの追加のリンクが含まれます。 召喚状セクションの直後に以下を追加します。
index.html
<footer class="bg-gray-100"> <div class="container mx-auto px-6 pt-10 pb-6"> <div class="flex flex-wrap"> <div class="w-full md:w-1/4 text-center md:text-left"> <h5 class="uppercase mb-6 font-bold">Links</h5> <ul class="mb-4"> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500">FAQ</a> </li> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500">Help</a> </li> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500">Support</a> </li> </ul> </div> <div class="w-full md:w-1/4 text-center md:text-left"> <h5 class="uppercase mb-6 font-bold">Legal</h5> <ul class="mb-4"> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500">Terms</a> </li> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500">Privacy</a> </li> </ul> </div> <div class="w-full md:w-1/4 text-center md:text-left"> <h5 class="uppercase mb-6 font-bold">Social</h5> <ul class="mb-4"> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500">Facebook</a> </li> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500">Linkedin</a> </li> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500">Twitter</a> </li> </ul> </div> <div class="w-full md:w-1/4 text-center md:text-left"> <h5 class="uppercase mb-6 font-bold">Company</h5> <ul class="mb-4"> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500">Official Blog</a> </li> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500">About Us</a> </li> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500">Contact</a> </li> </ul> </div> </div> </div> </footer>
このコードは、4列のグリッドに一連のリンクを表示します。 各列は互いに重なり合い、小さな画面で表示するとテキストは中央に配置されます。
これで、ランディングページが完成しました。 完成したindex.html
ファイルは次のようになります。
index.html
<!DOCTYPE html> <html lang="en"> <head> <title>Smart Health Monitoring Wristwatch</title> <link rel="stylesheet" href="https://unpkg.com/tailwindcss@next/dist/tailwind.min.css" /> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700" rel="stylesheet" /> </head> <body class="text-gray-700 bg-white" style="font-family: 'Source Sans Pro', sans-serif" > <!--Nav--> <nav> <div class="container mx-auto px-6 py-2 flex justify-between items-center" > <a class="font-bold text-2xl lg:text-4xl" href="#" > SHMW </a> <div class="block lg:hidden"> <button class="flex items-center px-3 py-2 border rounded text-gray-500 border-gray-600 hover:text-gray-800 hover:border-teal-500 appearance-none focus:outline-none" > <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" > <title>Menu</title> <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" /> </svg> </button> </div> <div class="hidden lg:block"> <ul class="inline-flex"> <li> <a class="px-4 font-bold" href="/">Home</a> </li> <li> <a class="px-4 hover:text-gray-800" href="#" >About</a > </li> <li> <a class="px-4 hover:text-gray-800" href="#" >Contact</a > </li> </ul> </div> </div> </nav> <!--Hero--> <div class="py-20" style="background: linear-gradient(90deg, #667eea 0%, #764ba2 100%)" > <div class="container mx-auto px-6"> <h2 class="text-4xl font-bold mb-2 text-white"> Smart Health Monitoring Wristwatch! </h2> <h3 class="text-2xl mb-8 text-gray-200"> Monitor your health vitals smartly anywhere you go. </h3> <button class="bg-white font-bold rounded-full py-4 px-8 shadow-lg uppercase tracking-wider" > Pre Order </button> </div> </div> <!-- Features --> <section class="container mx-auto px-6 p-10"> <h2 class="text-4xl font-bold text-center text-gray-800 mb-8"> Features </h2> <div class="flex items-center flex-wrap mb-20"> <div class="w-full md:w-1/2"> <h4 class="text-3xl text-gray-800 font-bold mb-3"> Exercise Metrics </h4> <p class="text-gray-600 mb-8"> Our Smart Health Monitoring Wristwatch is able to capture you vitals while you exercise. You can create different category of exercises and can track your vitals on the go. </p> </div> <div class="w-full md:w-1/2"> <img src="assets/health.svg" alt="Monitoring" /> </div> </div> <div class="flex items-center flex-wrap mb-20"> <div class="w-full md:w-1/2"> <img src="assets/report.svg" alt="Reporting" /> </div> <div class="w-full md:w-1/2 pl-10"> <h4 class="text-3xl text-gray-800 font-bold mb-3"> Reporting </h4> <p class="text-gray-600 mb-8"> Our Smart Health Monitoring Wristwatch can generate a comprehensive report on your vitals depending on your settings either daily, weekly, monthly, quarterly or yearly. </p> </div> </div> <div class="flex items-center flex-wrap mb-20"> <div class="w-full md:w-1/2"> <h4 class="text-3xl text-gray-800 font-bold mb-3"> Syncing </h4> <p class="text-gray-600 mb-8"> Our Smart Health Monitoring Wristwatch allows you to sync data across all your mobile devices whether iOS, Android or Windows OS and also to your laptop whether MacOS, GNU/Linux or Windows OS. </p> </div> <div class="w-full md:w-1/2"> <img src="assets/sync.svg" alt="Syncing" /> </div> </div> </section> <!-- Testimonials --> <section class="bg-gray-100"> <div class="container mx-auto px-6 py-20"> <h2 class="text-4xl font-bold text-center text-gray-800 mb-8"> Testimonials </h2> <div class="flex flex-wrap"> <div class="w-full md:w-1/3 px-2 mb-4"> <div class="bg-white rounded shadow py-2"> <p class="text-gray-800 text-base px-6 mb-5"> Monitoring and tracking my health vitals anywhere I go and on any platform I use has never been easier. </p> <p class="text-gray-500 text-xs md:text-sm px-6"> John Doe </p> </div> </div> <div class="w-full md:w-1/3 px-2 mb-4"> <div class="bg-white rounded shadow py-2"> <p class="text-gray-800 text-base px-6 mb-5"> As an Athlete, this is the perfect product for me. I wear my Smart Health Monitoring Wristwatch everywhere I go, even in the bathroom since it's waterproof. </p> <p class="text-gray-500 text-xs md:text-sm px-6"> Jane Doe </p> </div> </div> <div class="w-full md:w-1/3 px-2 mb-4"> <div class="bg-white rounded shadow py-2"> <p class="text-gray-800 text-base px-6 mb-5"> I don't regret buying this wearble gadget. One of the best gadgets I own!. </p> <p class="text-gray-500 text-xs md:text-sm px-6"> James Doe </p> </div> </div> </div> </div> </section> <!--Call to Action--> <section style="background-color: #667eea"> <div class="container mx-auto px-6 text-center py-20"> <h2 class="mb-6 text-4xl font-bold text-center text-white"> Limited in Stock </h2> <h3 class="my-4 text-2xl text-white"> Get yourself the Smart Health Monitoring Wristwatch! </h3> <button class="bg-white font-bold rounded-full mt-6 py-4 px-8 shadow-lg uppercase tracking-wider" > Pre Order </button> </div> </section> <!--Footer--> <footer class="bg-gray-100"> <div class="container mx-auto px-6 pt-10 pb-6"> <div class="flex flex-wrap"> <div class="w-full md:w-1/4 text-center md:text-left "> <h5 class="uppercase mb-6 font-bold">Links</h5> <ul class="mb-4"> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500" >FAQ</a > </li> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500" >Help</a > </li> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500" >Support</a > </li> </ul> </div> <div class="w-full md:w-1/4 text-center md:text-left "> <h5 class="uppercase mb-6 font-bold">Legal</h5> <ul class="mb-4"> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500" >Terms</a > </li> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500" >Privacy</a > </li> </ul> </div> <div class="w-full md:w-1/4 text-center md:text-left "> <h5 class="uppercase mb-6 font-bold">Social</h5> <ul class="mb-4"> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500" >Facebook</a > </li> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500" >Linkedin</a > </li> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500" >Twitter</a > </li> </ul> </div> <div class="w-full md:w-1/4 text-center md:text-left "> <h5 class="uppercase mb-6 font-bold">Company</h5> <ul class="mb-4"> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500" >Official Blog</a > </li> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500" >About Us</a > </li> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500" >Contact</a > </li> </ul> </div> </div> </div> </footer> </body> </html>
結論
このチュートリアルでは、TailwindCSSを使用してランディングページを作成しました。 Tailwindが提供するクラスを使用することに加えて、グラデーションカラーを使用して、ランディングページの奥行きを増やしました。 Tailwind CSSの詳細については、公式Webサイトのドキュメントを参照してください。