【Tailwindcss入門】利用者急上昇中のCSSフレームワークのTailwindcssで簡単なウェブサイトを作ってみよう

Summary

Dieses Videotutorial führt durch die Erstellung einer einfachen und responsiven Website mit der CSS-Framework Tailwind CSS. Es veranschaulicht, wie man schnell und ohne separate CSS-Dateien eine Web-Präsentation mit Navigationsleiste, zentralen Abschnitten und Bildern erstellt. Der Fokus liegt auf Tailwinds praktischen Klassen und deren Anwendung für schnelles Designing. Zusätzlich werden Customisierungsmöglichkeiten und die Verwendung von IntelliSense für eine effizientere Entwicklung diskutiert.

Takeaways

• 😀 Tailwind CSS ist ein CSS-Framework, das es ermöglicht, schnell und einfach Websites zu erstellen, ohne HTML-Dateien zu verlassen.
• 📚 Die Verwendung von Tailwind CSS kann die Entwicklungsgeschwindigkeit erhöhen und das Erstellen von responsiven Websites vereinfachen.
• 🛠️ Das Tutorial zeigt, wie man eine einfache Website mit Navigationsleiste, zentralem Bereich, Titel und Bild mit Tailwind CSS erstellt.
• 💻 Voraussetzung für das Tutorial ist, dass Node.js und npm installiert sind, um Tailwind CSS und seine Abhängigkeiten zu verwalten.
• 📝 Die Schritte zum Einrichten von Tailwind CSS beinhalten das Initialisieren eines npm-Projekts und das Installieren von Tailwind CSS über die Kommandozeile.
• 🔧 Tailwind CSS bietet eine Konfigurationsdatei (tailwind.config.js) zur Anpassung von Designs und Erweiterung der CSS-Bibliothek.
• 🎨 Die Erweiterung von Visual Studio Code für Tailwind CSS verbessert die IntelliSense-Funktion und erleichtert die Codierung.
• 🌐 Responsive Design wird mit Tailwind CSS erreicht, indem man Klassen wie 'mx-auto' verwendet, um Inhalte zentriert darzustellen, und Breakpoints wie 'sm', 'md', 'lg' für verschiedene Bildschirmgrößen.
• 🔗 Die Tutorial-Skriptanleitung zeigt, wie man Links, Buttons und Bilder in eine Website integriert und wie man die Interaktivität durch Hover-Effekte verbessert.
• 🖼️ Hintergrundbilder können in Tailwind CSS durch die Konfigurationsdatei definiert und in HTML mit entsprechenden Klassen zugewiesen werden.
• 🔧 Abschließend wird gezeigt, wie man die Platzierung von Elementen auf der Seite anpasst, um ein ansprechendes und responsives Layout zu erstellen.

Q & A

Was ist das Hauptthema des Skripts?

Das Hauptthema des Skripts ist die Einführung in Tailwind CSS, ein CSS-Framework, das verwendet wird, um eine einfache und schnelle Erstellung von Websites zu ermöglichen.

Was ist Tailwind CSS?

Tailwind CSS ist ein Toolkit für CSS, das eine praktische Methode zur Erstellung von Websites bietet, indem es eine Vielzahl von vordefinierten Klassen verwendet, die direkt in den HTML-Code eingebettet werden können.

Wie wird Tailwind CSS in einem Projekt integriert?

Tailwind CSS wird in einem Projekt über die Verwendung von npm (Node Package Manager) integriert, indem es installiert und dann in die HTML-Dateien eingebettet wird.

Welche Schritte sind erforderlich, um Tailwind CSS in einem neuen Projekt zu verwenden?

Zunächst muss ein neues Verzeichnis für das Projekt erstellt werden. Dann wird Tailwind CSS mit npm installiert und die Konfigurationsdatei angepasst. Anschließend kann Tailwind CSS in der CSS-Datei des Projekts verwendet werden.

Was ist die Bedeutung von 'Responsive' im Kontext des Skripts?

Responsive bezieht sich auf die Fähigkeit einer Website, sich an verschiedene Bildschirmgrößen und Geräte anzupassen, um eine optimale Benutzererfahrung zu gewährleisten.

Wie wird in Tailwind CSS die Größe von Elementen gesteuert?

In Tailwind CSS werden die Größen von Elementen durch die Verwendung von Klassen gesteuert, die die gewünschten Eigenschaften wie Schriftgröße, Padding usw. direkt anwenden.

Was sind einige der Vorteile von Tailwind CSS?

Tailwind CSS bietet Vorteile wie schnelle Entwicklungszeiten, eine klare und konsistente Stylesheet-Struktur, sowie die Flexibilität, Designs ohne Schreiben von CSS-Code direkt in der HTML zu erstellen.

Welche Rolle spielt die 'config.js'-Datei in Tailwind CSS?

Die 'config.js'-Datei in Tailwind CSS wird verwendet, um das Verhalten von Tailwind CSS anzupassen, z.B. indem benutzerdefinierte Designs und Theme-Einstellungen konfiguriert werden.

Welche Tools oder Erweiterungen werden in dem Skript für die Entwicklung mit Tailwind CSS empfohlen?

Das Skript empfiehlt die Verwendung von Visual Studio Code und der Installation der Tailwind CSS-Erweiterung, um die Entwicklung zu erleichtern, indem es Autovervollständigung und schnellen Zugriff auf Dokumentation bietet.

Wie wird in Tailwind CSS die Interaktivität gesteuert, z.B. Hover-Effekte?

In Tailwind CSS werden Interaktivitäts-Effekte wie Hover durch die Verwendung von speziellen Klassen gesteuert, die mit dem Präfix 'hover:' beginnen und den gewünschten Effekt anwenden, wenn der Mauszeiger über das Element fährt.

Was sind die Schritte, um ein Navigationsmenü mit Tailwind CSS zu erstellen?

Um ein Navigationsmenü zu erstellen, wird in Tailwind CSS ein Container mit den entsprechenden Klassen für Layout und Design verwendet. Dann werden Links innerhalb dieses Containers mit den notwendigen Tailwind-Klassen für die gewünschten Stileingaben erstellt.

Outlines

00:00

😀 Tailwind CSS Einführung

Der erste Absatz führt in die Verwendung von Tailwind CSS als CSS-Framework ein, das es ermöglicht, schnell und ohne HTML-Datei zu verlassen, eine Website zu erstellen. Der Sprecher plant, ein responsives Design mit Navigationsleiste, zentralen Abschnitten, Titeln und Bildern zu erstellen und erklärt, wie man Tailwind CSS installiert und initialisiert, um eine Vorlage zu erstellen. Es wird auch erwähnt, dass das Channel-Abonnement für weitere Wissensvermittlung gedacht ist.

05:00

🛠 Tailwind CSS Installation und Projektsetup

In diesem Absatz wird der Prozess der Installation von Tailwind CSS mit npm (Node Package Manager) erläutert. Der Sprecher führt durch die Erstellung eines Verzeichnisses für das Tutorial, die Initialisierung eines npm-Projekts und die Installation von Tailwind CSS. Es wird auch gezeigt, wie man die Konfigurationsdatei 'tailwind.config.js' anpasst, um die CSS-Vorlage zu erstellen und wie man Tailwind CSS in der Quell-CSS-Datei aktiviert.

10:02

🎨 Anwendung von Tailwind CSS in der Praxis

Der dritte Absatz konzentriert sich auf die praktische Anwendung von Tailwind CSS, um die Gestaltung einer Website zu beschleunigen. Hier werden die Vorteile der Verwendung von Tailwind CSS hervorgehoben, wie z.B. die schnelle Anpassung von Schriftgrößen, Farben und anderen Stileigenschaften ohne die Erstellung eigener CSS-Regeln. Der Sprecher demonstriert, wie man mit Tailwind CSS-Klassen schnell Designänderungen vornehmen kann.

15:04

🌐 Responsive Webdesign mit Tailwind CSS

In diesem Absatz wird erläutert, wie Tailwind CSS für responsives Webdesign eingesetzt werden kann. Der Sprecher erklärt, wie man mit Hilfe von Tailwind CSS-Klassen die Anzeige einer Website an verschiedene Bildschirmgrößen anpasst. Dabei werden auch Breakpoints und die Verwendung von Tailwind CSS-Klassen für verschiedene Bildschirmgrößen diskutiert.

20:08

📝 Erstellen einer Navigationsleiste mit Tailwind CSS

Der fünfte Absatz beschäftigt sich mit der Erstellung einer Navigationsleiste mit Tailwind CSS. Hier wird gezeigt, wie man mit den CSS-Klassen von Tailwind ein responsives Layout für die Navigation erstellen kann, das sowohl auf Desktop- als auch auf mobilen Geräten gut funktioniert. Es werden auch Techniken für die Anordnung von Elementen in einer Zeile und die Anpassung von Abständen behandelt.

25:11

🖼️ Integration von Bildern und Buttons in der Website

In diesem Absatz wird die Integration von Bildern und Buttons in die Website mit Tailwind CSS erläutert. Der Sprecher zeigt, wie man mit Tailwind CSS-Klassen die Größe und Position von Bildern und Buttons anpasst und wie man interaktive Elemente wie Hover-Effekte für Buttons hinzufügt. Auch die Verwendung von Breakpoints für die Anpassung von Elementen an verschiedene Bildschirmgrößen wird behandelt.

30:12

🔄 Fertigstellung und Anpassung der Website

Der letzte Absatz beschreibt die endgültige Anpassung und Fertigstellung der Website mit Tailwind CSS. Hier werden letzte Details wie die Anpassung von Abständen, die Zentralisierung von Elementen und die Anpassung von Schriftgrößen diskutiert. Der Sprecher betont die Flexibilität von Tailwind CSS und wie es ermöglicht, schnell und einfach Websites zu erstellen und anzupassen.

Keywords

💡Tailwind CSS

Tailwind CSS ist ein CSS-Framework, das für die schnelle Entwicklung von Websites ohne die Notwendigkeit, eigenes CSS zu schreiben, verwendet wird. Im Video wird gezeigt, wie Tailwind CSS verwendet wird, um eine einfache Website mit Navigationsleiste, zentralem Bereich, Titel und Bild zu erstellen. Es ist ein Kernkonzept des Videos, das für die Gestaltung und das Responsive Design der Website sorgt.

💡Responsive Design

Responsive Design bezieht sich auf die Fähigkeit einer Website, sich auf verschiedene Bildschirmgrößen anzupassen. Im Video wird demonstriert, wie die Website mit Tailwind CSS so konfiguriert wird, dass sie auf verschiedenen Geräten korrekt dargestellt wird, was durch die Verwendung von Tailwind-Klassen wie 'sm:' und 'md:' für verschiedene Breakpoints ermöglicht wird.

💡Klassen (Klassenspezifikationen)

In Tailwind CSS werden Stile nicht durch CSS-Dateien, sondern durch Klassen angewandt, die direkt in der HTML-Datei verwendet werden. Im Video werden viele Beispiele gegeben, wie man Tailwind-Klassen wie 'text-xl' für große Schriftgrößen oder 'bg-blue-400' für Hintergrundfarben verwendet, um die Gestalt der Website zu definieren.

💡Navigationsleiste

Die Navigationsleiste ist ein wichtiger Bestandteil der Website, die im Video erstellt wird. Sie enthält Links wie 'Home', 'Blog' und 'Kontakt' und wird mit Tailwind CSS gestaltet, um eine einheitliche und ansprechende Oberfläche zu bieten. Die Navigationsleiste ist ein Beispiel für die praktische Anwendung von Tailwind-Klassen für Layouts.

💡HTML

HTML (HyperText Markup Language) ist die Grundlage für die Struktur einer Website. Im Video wird HTML verwendet, um die Grundgerüst der Seite mit Elementen wie 'header', 'main', 'section' und 'nav' zu erstellen, auf denen dann die Tailwind-Klassen angewendet werden.

💡npm (Node Package Manager)

npm ist ein Tool zum Verwalten von JavaScript-Paketen, das im Video verwendet wird, um Tailwind CSS zu installieren. Der Befehl 'npm init' wird verwendet, um eine neue Package-JSON-Datei zu erstellen, und 'npm install -D tailwindcss' wird verwendet, um Tailwind CSS als Entwicklungsabhängigkeit hinzuzufügen.

💡Configurieren

Das Konfigurieren von Tailwind CSS beinhaltet die Anpassung der 'tailwind.config.js'-Datei, um benutzerdefinierte Designs und Stileinstellungen vorzunehmen. Im Video wird gezeigt, wie man die Konfigurationsdatei ändert, um die Anwendung von Tailwind-Klassen auf bestimmte Dateien und Verzeichnisse zu steuern.

💡Bauprozess (Build-Prozess)

Der Build-Prozess ist eine Serie von Schritten, die zum Zusammenstellen und Optimieren der Quelldateien einer Website führen. Im Video wird der Build-Prozess von Tailwind CSS beschrieben, bei dem der Befehl 'npx tailwindcss build' verwendet wird, um die CSS-Dateien zu erstellen und zu optimieren.

💡Customisierung (Anpassung)

Die Anpassung bezieht sich auf die Änderung von Standardeinstellungen, um eine benutzerdefinierte Erfahrung zu erstellen. Im Video wird die Verwendung von 'tailwind.config.js' erläutert, um die Standardeinstellungen von Tailwind CSS anzupassen, um beispielsweise benutzerdefinierte Farben oder Schriftgrößen zu erstellen.

💡IntelliSense

IntelliSense ist eine Funktion in vielen Code-Editoren, die die Vervollständigung von Code-Snippets und die Bereitstellung von Informationen zu APIs und Methoden ermöglicht. Im Video wird empfohlen, die Tailwind CSS-Erweiterung für IntelliSense zu installieren, um die Entwicklung mit Tailwind CSS zu erleichtern, indem es die Schreibweise von Klassennamen und deren Verwendung im Code erleichtert.

Highlights

テイルウィンドCSSを使用してウェブサイトを作成し、レスポンシブデザインを簡単に実装する方法を紹介

ウェブサイトの基本構造をナビゲーションバー、セクション、タイトル、画像で構成し、テイルウィンドCSSでスタイルを適用

テイルウィンドCSSフレームワークのインストールと初期設定方法を説明

npmを使用してテイルウィンドCSSをインストールし、プロジェクトに追加する方法

テイルウィンドCSSのカスタム設定をconfig.jsで変更し、プロジェクトに反映させる手順

input.cssファイルにテイルウィンドCSSのベースとコンポーネントクラスを追加する必要性

テイルウィンドCSSのクラス名を使用して、HTML要素にスタイルを直接適用する方法

テイルウィンドCSSの便利なクラスを使用して、テキストサイズや色を簡単に変更する方法

レスポンシブデザインで使用するクラスを紹介し、画面サイズに応じてスタイルを変更する方法

テイルウィンドCSSの拡張機能を使用して、コーディング効率を高める方法

HTMLとテイルウィンドCSSを組み合わせて、ヘッダーとナビゲーションバーを作成

背景画像を設定し、テイルウィンドCSSの背景関連クラスを使用して画像を表示

レスポンシブデザインのためのクラスを用いて、タイトルとロゴのレイアウトを調整

ボタンを作成し、ホバーエフェクトやスタイルを適用して、ユーザーインタラクションを向上させる方法

テイルウィンドCSSフレームワークの利点とデメリットを比較し、プロジェクトでの使用を検討

ウェブサイトの完成形を紹介し、レスポンシブ対応を確認

テイルウィンドCSSを使用したポートフォリオサイトの作り方と、個人での学習リソースの紹介

Transcripts

はいどうもシーンです今回はテイル

ウィンド css 入門ということで画面

に表示されているようなウェブサイト簡単

に作っていきたいとおもいます

上にナビゲーションバーガーって真ん中に

セクションがあると左にタイトル右に画像

ですねはいでこちらですねレスポンシブに

も対応しておりましてこのように画面を

ちっちゃくしていくとこんな感じに表示さ

れるとそんなレスポンシブに対応した

web サイトをテイルウィンドし衛星

するという css フレームワークを

使って構築していきたいとおもいます

はいえーこちらがテイルウィンド css

なんですけども html ファイルを

離れることなくもう旦那ウェブサイトを

簡単に早く構築することができる css

フレームワークになっていますこちら学ん

でみたい方は最後までご覧くださいすべて

説明しますはいえーこのチャンネルでは

返事に後しての幅広い知識を身につけて

いただくためのチャンネルになっています

ので気になる方はチャンネル登録よろしく

お願い致しますそれでは早速始めていき

ましょうはいで動画を始める前に私いうで

みー講師でもありますので教材買いたい方

はですね92パーセント割引のクーポン

概要欄に貼っておきますので気になる方

だけご覧くださいはいということで適当に

ターミナルを開いてください vs こと

で私は開いていますそしてテイルウィンド

css というですねディレクトリーの中

にいますでここにですね mkdir と

してテイルウィンド css

チュートリアル youtube という

ふうに打っておきましょうはいそしてその

中に移動してあげます

はい youtube ですねそして

コードとっととしてその階層で vs

コードを立ち上げておきましょうはいっ

濃度がですねインストールされていること

を確認しておいてくださいそれではまずは

npm init ハイフンは意図して

パッケージ度と json を初期化して

おきますこんな感じですねこのパッケージ

. j その中にテイルウィンド css

のライブラリーを入れていきたいとおもい

ます

ライブラリーてがフレームワークを入れて

いきますねということでこちら公式

ドキュメントを見ていきましょうを始め

ましょうのボタンを押してみます今回は

リアクソだったりビューティー

フレームワークを使わずに普通にですね

7フレームワークを使わずに構築していき

たいとおもいますということでこちら

インストールのところを見てください

タミナルにですねまず npm

install ハイフン d という風

に書いてありますのでこちら見ながらです

ねやっていきたいとおいます

はいということで n pmi の

ハイフン d のテイルウィンド css

と打ち込んでください

はい演奏するとですねこのパッケージ度と

j その中にテイルウィンド css の

3.0のバージョンが入っていることを

確認してください

その後にこちらですね npx テイル

ウィンド css いいとですねっている

テイルウィンド

css フィニッととしてあげてください

そうするとですねこちら左側にテイル

ウィンド config js という

ものが出てきますこれはですねテイル

ウィンドカスタマイズデザインするための

ものになりますのでこちら必要になった時

に説明したいと思いますはいとりあえず

このままやっていきましょうそして

テンプレートパスを構成するということで

config js をこのように変更

する必要があるみたいなのでこちらコピー

した状態でこのコンテントを書き換えて

おきましょう

要はこのカスタムデザインを適用するとき

にどのファイルに対応させるか適用させる

かっていうのがこのソース回想の中の

html だったり javascript

に適用させるみたいなそういう意味が含ま

れているかと思いますはいということで

続いてやっていきます a

テイルウィンドディレクティブを css

に追加しますということでまずですね

こちら新しくディレクトリーのソース

ディレクトリを作ってくださいそしてその

中にインプット. css を作っていき

ますでこの中にですねこちらの技術を

コピー&ペーストしてくださいこんな感じ

ですねテイルウィンドベーステイル

ウィンドコンポーネントこちらですねこれ

がないと実際にテイルウィンド css が

適用されないので気をつけておいて

ください皆さんもしかしたらこのテイル

ウィンドの@のところにだ3戦が入って

いるかと思います

な店が入ってでもですね実際にテイル

ウィンド使えますのでそこまで気にする

必要はありませんで気になる人はですね

ちょっとこの歯車のマークを押して設定

ボタンを押してくださいそして右上の

プロパファイルのボタンを押してみて

くださいそうするとですねこちら

セッティング数ととジェイソンに飛びます

のでこちら下の方にちょっとスクロールし

ていきましょう

皆さんの所にはこれがですねこの最後の1

行がついていないかと思いますこちらです

ねルールズアンノウンブールずーーという

ですねバーニングというのをですね6時

することができる記述になりますので消し

たい方はこちらの1行を記入しておいて

くださいはい動画と目ですねこちら移して

みるといいと思いますはいというこので

やっていきましょうかこれで続いてやって

いきますそれではテールのビルドプロセス

というのを開始したいと思いますねこちら

をコピーしてこれターミナルに貼り付けて

もいいんですけども1日こうやってですね

長い文章を打つのがめんどくさいので私は

ちょっとパッケージ.ジェイソンに書いて

おきますパッケージ度とジェイソンの

こちらねカンマで区切ってあげてビール度

としてあげてですね先ほどの記述をコピー

&ペーストしておきます

それでは npm ランプフィールドとし

てください

はいそうするとこのね文章が実行されて

自動的にこのディストというディレクトリ

がですね出現するようになりました

output . css ですねこの

アウトプット css っていうのはこの

ソースディレクトリの input .

css のものをコンパイルするみたいな

意味がありますねはいあこちらはですね

まああんまり気にする必要があるません

とりあえず index . html に

テイルウィンド css の記述を書い

たらまあこのようにですね自動的に常に

ビルドされていますのですぐにコンパイル

してくれるということですねはいまあ

サクッとそんな感じの説明でやっていき

ますそれでは html ファイルを作っ

ていきましょうソースディレクトリを選択

した状態で indexおっと html

ファイルを作りますそしてビックリマーク

のエネット機能でこのように展開をして

送ってくださいちょっと見にくいですね

はいってこのタイトルをテイルウィンド

入門という風にしておきます

css にしときましょうかねはいはいと

いうことでこれで下準備ができましたと

いうことでテイルウィンド親切どのように

使うのかというのをと試しに説明していき

たいとおもいます入門者向けに説明します

ね html ファイルを離れずに css

フレームワークを使うことができると書い

てありましたねどういう意味なのか説明し

ていきますまずはへ一番宅を作るておいて

くださいそこで

ハローっている

ウィンド css というふうに打ち込ん

でおきましょうこの状態でブラウザを確認

してみますはい何も変わっていませんね

またらの一番タグなわけですねはいでこれ

に対してじゃあ例えばフォントの大きさを

大きくしようとした場合普通の acss

だったら例えばこれにタイトルっていう

クラスをつけて input . cs

ですでタイトルそして

フォント bold フォントサイズ

みたいな感じでですね20ピクセルに

しようとかですねこういうふうに調整を

かけていくというのが今までの css の

書き方だったんですよねえですがテイル

ウィンド css だとどのように記述

するのかというとこちらクラス名をつける

んじゃなくてもうそのままですねテキスト

の例えば大きくしたいんだダナー xl

みたいな感じでここで指定するわけですね

これホバーすると分かる通りフォント

サイズが4.5霊夢が自動的に付け加え

られます line height も市

が自動的に付け加えられます4.5ゲーム

というのは70 p 72ピクセルのこと

ですなのでフォントサイズが72ピクセル

に大きくなりますはいかなり大きくなり

ましたね

はいちょっと小さくしたらこんな感じでし

たすいません私拡大してたみたいですね

普通であればこんな感じのめちゃくちゃ

ちっちゃいんですけども7 xl にする

とでかくなるということですこれがテイル

ウィンド css ですじゃあこの

テキストなら xl ってどこで確認

できるのかっていうと公式ドキュメントで

検索すればいいだけですねこの虫眼鏡の

ところをしてですねたとえはテキスト

サイズというふうに検索してみてください

体操するとフォントサイズでありまして

今さっき7 xl てしたんですけど

こちらですねこのクラスを適用させると

このプロパティーが反映させるみたいな

感じで対応してるんですよ

なので絵馬フォントサイズを大きくし

たければフォントサイズというふうに検索

をかけてあげてまあクラスを探していくん

ですよねはいじゃあ例えばテキストの色を

変えたいのであれば例えばテキストカラー

と検索してあげてこちらの色を使っていけ

ばいいというわけです例えば赤色にしたい

のであればこのクラスに続いてですね

テキストのレッドとしてあげて例えば

500にしてみようと400ですね402

するとオレンジ色になるというわけですね

はいオレンジ色にありました

まぁこんな感じでテイルウィンド css

をつくっていくということです

なのでさらにクラスを追加したい時はこの

ようにですねまぁどんどんどんどん長く

なっていくみたいな感じですねはいまあね

こんな感じでクラス名が長くなっていくの

で家族性が落ちちゃうんですよですが

css ファイルが左がしなくて良いと

いうことですクラス名をいちいち考えたり

しなくていいところがメリットになります

アメリットデメリットありますのでそちら

でですね結構議論が行われてたりとかする

んですよね css フレームワーク使う

ハート使わない派みたいな感じで結構

分かれるところではあります

bootstrap とかですねあのまあ

結構学んだ方いらっしゃると思うんです

けどもまぁ結局何かよくわからんで辞めた

人もいると思います自分で css と1

メール作った方がいいとかですねまあ実務

の方でじゃあ

出るウィンドしせず使ってますかっていう

とまあそのリアクトとかビュー js を

使っているプロジェクトであればテレビの

cs 使う可能性ありますが本格的な

web サイト2の web サイトを

作ろうとなった時はやっぱりまあ率直ね

あの普通にですね html css を

使った方使ってるプロジェクトの方が多い

のかなというふうに思います

まあですがですね9人的にも結構出てる日

の c 雪って増えてきたので需要が増え

てきているわけなのでそういうのを学んで

おくとですねまあすぐに対応できるのかな

と思いますということで早速先ほどですね

最初の方の動画で見せた web サイト

作っていきたいと思いますということで

こちらへ一番を消してあげてください早速

作っていきましょうかハイ作っていく

ウェブサイトですねまず一番上にヘッダー

がありますまあこちらはお馴染みですよね

はいこちらヘッダーがありましてここに

画像があってここにタイトルがあってここ

に朗報があるという風なものを作っていき

ます

はいでこちらの後ろの画像だったりとか

このロゴに感謝はですね私の切っと羽生

概要欄に貼っておきますのでこのイメージ

のところにですね全部置いております

main .の bg だったりとかあと

はテイルウィンドのロゴですねでこちらに

ですね画像を2つ用意しておりますので

この最後のやつは関係ないですこの2つを

ですねダウンロードしておいてくださいを

クリックしてですね右クリックすれば

ダウンロードできると思いますのでやって

みてください

はい

まあ素材はですね各自用意しておいて

くださいま別にに合わせる必要はありませ

ん

ハイチュウことでまずはナビゲーション

バーの方を作っていきますここにですね

ナビゲーションがあってこちらですね2つ

要素があります進行度の要素と右側の

こちらの要素ですねまぁこういう構成に

なっていますのでこれをテイルウィンド

css を使って作っていきます

[音楽]

それではさっそく見ていきましょう

はいオープン is live サーバー

で今真っ白な状態なので書いていきたいと

おもいます

でですね今回テイルウィンド css の

補完機能点を使っていきますのでこちら

拡張機能のところをしてあげてですね

テイルウィンドというふうに検索してみて

ください

そうするとですね拡張機能がありまして

これですね intellisense

っていうのがありますのでこれでですね

非常にコーディングがやりやすくなるので

こちらはインストールしておいてください

いい

それでは html の方を見ていき

ましょう

はいえーも body タグがあるんです

けれどもここにですねヘッダータグを追加

していきますちょっと大きくしていきます

ね

大きな枠ですねヘッダーをつくってあげて

そこにな2子をつくってあげますそして

その中にティ2付でここではじめて進行.

com というな場合を決めてあげますね

さらに右側のリンクがあったと思うんです

けど

まあこれもディヴタグで

はい右側にリングがあったと思うんです

けどこちらに a タグですね a タグ

を作ってあげてここに例えばまあホーム

みたいな感じで書いていきましょうかはい

はいえーでちょっと見にくいのでちょっと

ね段落書いてあげますね a ここに

ホームを貼り付けて下に4つフォト複製し

たいと思いますそしてホームではなくて

まあブローグですね

ブログとはお問い合わせ

はい

でこちら以降方ですねはい3つ用意して

おいてくださいでまだテレビの c 刹那

にも充てていませんこの状態で確認すると

はい今こんな感じですね

はいということでこちらに tail

wind css を当てていきたいと

おもいます

わかりやすいようにこちら左半分に寄せて

おいたほうがいいですかね

若干見にくいかもしれませんがこれでやっ

ていきましょう

まずですね後ろの色ですね本番見てみると

これ青色になっていると思うのでこの青色

のバックグラウンドカラーをつけていき

ますまあどこにつけるのかと言うとこの

ヘッダーのところにですねクラスと書いて

あげますねえ bg のハイフンそして

ブルーのハイフン400としてあげて

くださいそしてもう一度リロードしてみ

ますデスレースが変わらないのはちょっと

ですねターミナルを開いてですねちゃんと

ビルド状態にしておいてくださいこれ

たまに忘れる時あるので気をつけましょう

ね

これちゃんとしないと適用されないので気

をつけましょう上 bg として

padding 内側の100当てていき

たいので p ハイフン4としてあげます

配送すると違うの100が16ピクセラ

あたります

でこちらのプロパティの詳細はこちら

ホバーしてあげるとですね padding

一例も開けますよっていうのは説明書が

書かれているのでこちらで確認していき

ましょう

非常に簡単ですよねクラス目決めて css

ファイル作ってインポートしてそれで適応

させるみたいな猫どうしなくていいので

個人開発と顔で非常に高

爆速で web サイトとか作れるんじゃ

ないかなと思います

ファイで続いてやりたいのがこちらですね

タイトルば進行度と com とこの

リンクこれを横並びにしたいということ

です横並びにするためにはフレックスって

いうねプロパティを当てる必要があります

のでそちらやっていきましょう

+として

フレックスですねはい

そうすると横並びにすることができます

ここでのフレックスを知識とかそれに関し

ては css の大きさになりますので

わからない方はそちら勉強してみて

ください

ジャスティファイ1インというのがあり

ますこれするとですねいい感じにですねを

も白をするとこうよ幅をですねとって

くれるということです

さらにですね mうん x オートという

風にしておきましょうか中央寄せにするん

ですけれども

山田ですねちょっとかなり左端に酔っ

ちゃってる同筐体なのでこちらでですね今

ていなぁというクラスつけていきましょう

か金典韋らークラスを付加したいと思い

ますはいそうするとこんな感じになります

ねはいで子猫んてーなークラスの意味なん

ですけどもうちょっとデビューロッパー

ツールを開いてみます

でですねこちら音です本死亡ちょっと確認

していくんですけど

このようにですねもう自動的に

こう幅を決めてくれるっていうね

プロパティが根底なぁのクラスになります

こんな感じでですね r 堺を起点にこの

ようにですね幅がこう変わっていることが

分かりますね max ワイドですね最大

の幅がこのねラージサイズとか md

サイズとか sm サイズによってもう

すぐに決められているというのが根底

ダグラスになりますなので11ですねその

横幅ね最大の横幅っていうの私たちが11

あろうブレークポイントを気にしながら

実装する必要がないということですこれね

ちょっと公式ドキュメントで確認するん

ですけど

つまり幅が640ピクセルの時は自動的に

max ワイドが640ピクセル提供され

ます768ピクセル joinだったら

max ワイドが768ピクセルに自動的

に設定されるということなのでこの根底な

グラス1個ポーンと張ってあげるだけで

バーレスポンシブにこういい感じにですね

幅をとってくれるって言うのがこの根底な

クラスになります

はいでコンテナクラス使うときはですね m

x オートはですねまあセットにして使っ

ていくことが一般だと思いますこれですね

外してしまうとですね左によってしまうん

ですよね

左にちょっとね若干よってしまうので m

x オートをつけることによって

様は真ん中寄せにすることができるという

ことです margin left

margin right auto が

適用されるのではい家事に真ん中によると

いうことですね

はいで一応ですねこれちゃんと中央によっ

ている感じがするのですが一応ですねここ

にアイテムズセンターを追加しておき

ましょうかアイテムずセンターとして

ください

そうするとですねこうさ軸を中心に黄砂軸

の中心をですねこのようにあると思うん

ですけどこれを中心にちゃんとですね文字

と文字の位置を揃えることができるっての

がまあアイテムズ根底なアイテムず

センターですねいうのがアイテムズ

センターになりますこれはライン

アイテムズセンターのことですねマーシー

清酒の基礎だと思います

合図ですね今ちょっと見るんですけど左側

の進行度とゴムの文字が小さいので大きく

していきますということでクラスの

テキストハイフン4 xl という風に

書いてあげましょう

大きくなりましたね

はいで続いてやっていきたいのがこちらの

リンクのですね幅がかなりキツキツの状態

になってしまっています本番の通りにこの

ようにですね間隔をあけて行きたいと思い

ますのでそのためにはどうすればいいのか

というとこちら a 卓を囲んでいる

ディヴタグにですねクラスをつけてあげて

スペースハイフン x 12として

くださいそうするとですねはいこの d 部

の親要素で囲まれている下の子要素ですね

それをに間隔を空けることができるという

ことですねはいスペース x まあホバー

するとですねこれ意味がちゃんと書いて

あるのでわからなくなれば確かめてみて

ください

まスペース x などで横ですねスペース

y だと縦の等間隔に幅分けてくれると

いうことになります

はいでホントちょっと太くしておきたいの

でフォントボールとも付け加えましょう

はいということで続いてこちらのリンク

たちですねこれにホバーしたら色が変わる

とそういったことを実装していきますと

いうことで暮らすとしてあげましょう

ちょっと見にくくなったので大きくして

いきますクラスとしてあげてえっとフォバ

したら色を変えたいのでホバーコロンの

テキストグリーンの例えば2009

緑色に変えていきましょうかはいそうする

とホバーしたら緑色に変わりますはい

こんな感じですね簡単ですねちょっとね

じゅレーションをかけていきたいので

transition all のばじゅ

レーションの例えば300とかにしておき

ましょう

そうすると0.3秒かけてホバーするよう

になります

こんな感じです

はいということで他のリンクも提供して

おきたいのでこれねコピーしておいて

ブログのほうにも貼り付けましょう

はいそうすると

はいいい感じになったと思います

はいということでこんな感じでですね

ナビゲーションバーを作ることができまし

た

いいと思います

はいということで続いてはこちらでお手本

みるんですけど後ろの背景に画像があって

左側にテキスト右側にロゴこちらを追加し

ていきます

でこの画像に関しては私の概要欄ときっと

ハブからダウンロードしておいてください

マネ背景画像付のめんどくさんよという方

はまあ各自用意していただくかそのままで

画像はつけないでそのまま行ってみると

いいと思いますそれではやっていき

ましょう

ば続きから書いていきましょうか私はです

ねいみじフォルダーに用意しています

main . bg とテレビのロゴの方

ですねはいこのね3番目はちょっと関係

ないのでいいんですけどもはいということ

でヘッダーの下に書いていきますメインた

後をつけていきましょう

でここにですねさらに下にティブタグを

作ってあげてここにマハk 画像を追加し

ていきます

はいさあ背景画像をどうやって追加するの

かというのはテイルウィンド config

js にちょっと戻ってみてくださいはい

ですね背景画像ですねこちらに設定する

ことができてエクステンドのですねこちら

下にですね

バックグラウンドイメージという風に書い

てみてくださいこれ綴り間違ってますね

バックグラウンド意味ですね

でダブルコーテーションのチュートリアル

bg という名前にしておきましょう

そしてここで url を設定します

これ右下にちょこちょこ出てくるのは

ちょっと1回無視してください大丈夫です

url でシングルクォーテーション

はいシングルクォーテーションで囲って

あげて

ソースディレクトリーの中のイメージ

フォルダの中のメイン回分 bg 度と

jpeg ですねこちらを利用していき

ますはいこれでですね背景画像を利用する

ことができますまあカスタマイズデザイン

ですね背景画像麻浦の文字列で実際に使う

言葉できますこれね書いてしまうとビルド

が止まってしまうので npm ラン

ビルドとしてもう一度ビルド立ち上げて

おきましょう

ということで html で書き加えて

いきますクラスとしてあげて bg

ハイフンチュートリアル i 分 bg

ですねこれで背景画像を設定設定すること

ができるます確認していきましょうか

はいえーですが映らないのでちょっと

とあるプロパティを追加していきます民

ハイフン h ハイフンスクリーンとして

あげましょう

はいそしてリロードしてみますはいそう

すると映りましたね高さの調整をしてい

なかったのでちょっと写ってませんでした

この民ハイフンってのは最小2の高さての

100 v1にしましょうちょーっという

プロパティになってますね

そうすると背景画像が映りますですが

繰り返し表示されてしまっているので

そちらを解消するためには解消するために

は bg ハイフンカバーとしておいて

くださいはいこのような感じでですねまあ

繰り返し表示がなくなりますこの bg

カバーというのは background

size かpart ことですまあその

高さとか幅に合わせて画像ねいい感じに

こう表示させてくれるというプロパティに

なっています

そして bg のセンターで画像の中央を

表示してあげますそしてオブジェクト

カバーですね

オブジェクトカバーにしておいてください

はいそうするとですねいい感じになるので

はないでしょうかはいということで続いて

はこちらのですね左側のタイトル撮ろう

この方追加していきますそれでは見ていき

ましょう

この二部タグの下にですねさらに2具を

置いておきます

そしてその中にさらに一部タグを作って

おいてそこで初めて h 1タグ

おい追い風を感じるですねロケットマーク

さらにこれネジ部タグを作ってあげて

こちらロゴの方ですねイメージとしてあげ

て路号

いみじの

こちらを挿入しておきます

つまりこのディヴタグとこのディ2グって

いうのはフレックスで横並びにするので後

でですねこれを大きく母も過去もこの

ディヴタグに関してはフレックスをつけて

いきますんまぁ今の状態だとおそらく

縦並びになっているはずですねはいこの

ような感じになっているのでテイル

ウィンド css をつけてちょっと

横並びにしたりとかね修正していきますん

はいということでテイルウィンド css

で少し修正をしていきますまずですね

こちらの追い風を感じるのテキスト大きく

しておきたいので暮らすとしてテキストの

高 xl ですねはいこんな感じででかく

なりますですがこちらですね大きくした時

はもうちょっとデカイ文字にしてほしいの

でこちらですね sm サイズ以上のとき

はテキストの7 xl に変えておき

ましょう

はい

こんな感じですね

愛でこの sm についての説明なんです

けれどもコンテンダーの説明でもあったん

ですけど

こちらですね640ピクセルという意味が

あります

まぁちょっと調べてみましょうかブレーク

ポイントと調べてみますはいそして一番上

に行ってみるとレスポンシブデザインと

いうものがありましてこちらですねクラス

名の最初に sm とつけることによっで

640ピクセル以上のときはこのカスタム

このスタイルを当ててくださいねみたいな

感じで

簡単にですね指定ができるわけですし衛星

素手格闘このようにメディアクエリで書い

ていく必要がありますがデールウィンド

css だとこのブレークポイントの

プレフィックス

接頭辞ですねも白最初に sm とか md

とが lg とかつけることによってその

ブレークポイント以上のときはこの

スタイルを当ててくださいねっていうふう

に簡単に指定することができます今回の

場合だと asm 何テキスト7 xl な

ので

えーとつまり640ピクセルの幅以上の

ときは大きいテキストにしてくださいと

いうことです逆に640ピクセル留萌花の

時はこのテキストこう xl をあげて

くださいとそういう意味がありますので

ちょっと確認していきましょうかハイ

レスポンシブにしてあげて

ちっちゃくなって680ピクセルよりも下

になるとこのようにちっちゃくなるとです

ねこういう間

face 本支部に対応するサイトを作る

ことができますまあこれの音一例ですね

はい

はいでこのネディ2口の中にさらに p

タグを追加しておきましょうあっあって

いる

デールウィンド css で css

タイリングを

加速させるという風に書いておきます

そしてこちらのテキストも若干大きめにし

ておきたいので

クラスとしてテキストの xl サイズに

して

m b margin bottom を

10%くらいに当てておきましょうかね

はいそうするとこんな感じになります

愛で本番見比べてみるとですねこちら

ボタンがあると思いますのでボタンも設定

していきます p タグの下に a タグ

を作っ作ってあげて

タグを作ってあげて詳しく見るですね

詳しく見るとしてあげて暮らす身をつけて

あげましょうか

クラスとしてはいまボタンを作っていき

たいと思いますということで i こちら

ちょっと大きくして見ていきましょうか

まずボタンの内側の左右の余白ですね内側

の薬を開けておくために px ハイフン

6としておきますはいこちらは

padding left と

padding right こちらを

左右に24ピクセル当てることができます

じゃあ上までておきたいので py の

さんとしておきますねそして

バックグラウンドのカラーをブルーの

600に設定しておきます今の状態を確認

してみましょう

こんな感じでですね簡単にボタンを作れ

ますもうちょっとねスタイルを適用して

いきますね

ラウンディっド m d というのがあり

ますこれは外側の内側の

そのカードの道ですねそれに丸みを帯びさ

せることができます

そしてテキストホワイトにしておいて

ホバーしたらちょっと色を変えておき

ましょうか

ホバーの bg ブルーの800くらいに

ちょっと濃い色にしておきます

はいでカーソルを当てておくので

cursor pointer ですね

はいっ

あえて今回もトランジッションをつけて

おきたいので transition

all の樹レーションを300くらいに

設定しておきますこれで確認しておき

ましょう

はいこんな感じですね

ちゃんとホバーもするボタンが作れました

愛知突いてやっていきたいのが今ね縦並び

になってしまっているので横並びに変更し

ていきます

ということで見ていきましょうこれはです

ねおそらくわかると思います

この大きな子2区に対してこちらですね

こちらのディヴタグに対して

まずはクラスのまフレックスなんですけど

も

スマホサイズの時は縦並びにしたいので

このようにですね flex という風に

書いてしまうとスマホサイズでも横並びに

なってしまうので校ではなくて md

サイズつまり768ピクセル以上の時だけ

横並びにするとそういう記述を書いておき

ます

それでは確認していきましょうを

入っ

はいみてください横並びになってますねで

レスポンシブで3日確認すると

スマホサイズの時はちゃんと縦並びになっ

ているということがわかりますねはいって

今回もこちらに今てんなークラスをつけて

あげて mx 音としておきます配送する

と中央によるはずですね

ハイ見ていきましょう中央にはよってませ

んがいい感じになりましたね

ですがこちらのタイトルのところとロゴが

かなり近いのでちょっとね間を空けておき

たいと思いますこちらも先ほど説明しまし

たね

md のジャスティファイアラウンドと

いうものを適用しておきましょうはい

768ピクセル以上の時はこのように幅を

開けておくということですねこれとこれの

幅を開けておくということです

でちっちゃいサイズになると幅が当たら

なくなって縦並びになるということです

はい

でちょっとね上と葉のナビゲーションと

そのタイトルがからひっついてしまって

いるのでそちらの岩口をあけておき

ましょう

こちらのアラウンドのところにですね py

ハイフンの60として真上の余白を開けて

あげたりとかまたは md の py の

80 proof にしておきますまあ

これはスマホサイズの時では60の上下の

パディングを当ててあげると240

ピクセルを当ててあげますmd 768

ピクセル以上の大きな画面サイズの時は

若干大きく上上と下の幅を取ってあげると

そういう記述になりますはい

まあねこの md の意味がわかれば

おそらく私が説明しなくても皆さん2回

できると思いますのでまあこれから

どんどん書いていくので皆さんブレーク

ポイントを意識しながらですね理解する

ようにしてくださいということではい

ちゃんと上と下のですね内側のい箱を

開けることができましたはいでちょっと

レスポンシブで確認していきましょう金子

ちっちゃくしてみるとはいスマホサイズだ

とですねこのような感じでかなり左に寄っ

ちゃってますよねこれをちょっと修正して

いきます

はいこちらですねディヴタグですねえっ a

1番とか p とか a タグボタンの

あるところのてぃぶタグにですねクラスを

つけて flex にしてあげますですが

flex にすると横並びになってしまい

ますのでこちらを立て並びに変えるために

はフレックスの

ぽるっていうですねプロパティがあります

かラームのことですねまぁ縦に揃えると

いうことです横並びんじゃなくてそのまま

縦にしますそしてテキストをセンターに

寄せておきますねそして

768ピクセル以上のときは文字っていう

のは左寄せにしておくということですこれ

で1回確認してみましょうかねはいみて

くださいこんな感じになりましたテキスト

が中央に寄っていることが分かります

はいえーですがボタンがかなり高横幅に

広くなってしまったのでそちらの修正をし

ます a タグのクラスのところをみて

くださいこれにですね w ハイフン

max という風に書いておきましょうか

ねはいそうするとですねまワイドが

バックスコンテントになりまして詳しく

見るっていう文字の大きさだけ文字の大き

さ分横浜を取ってくれるということですね

愛でちょっと左寄せになってしまっている

ので

セルフセンターとしてあげてくださいそう

すると中央に寄ります

愛でも中央に寄るんですけれども大きい

画面にしていくとこの大きい画面でも中央

によってしまいますのでこの場合は大きい

時は a self のスタートですね2

はいこれで左寄せにしておくということを

やっておきましょう

配送するとスマホサイズの時はまなか

大きくすると左寄せになるということが

実現できます

はいえ続いて気になるのがこの画像ですね

こちらの画像ですね中央に寄せるのとあと

はボタンとの距離を空けておくということ

をやっておきますということでイメージの

タグを見ていきましょうこちらですね

クラスと書いてあげてまずは中央寄せにし

てあげるって上との弱庫を開けておいて

大きいサイズの時はゼロで ok ですと

いうふうに書いておきますこれでおそらく

真ん中によっていい感じになるはずですね

はい

で大きくするとちゃんとですね対応して

いるということになりますはいそれでは h

1のフォントだったりしたのですね4箱を

開けて終わりにしたいと思いますという

ことで見ていきましょう h 1タグに

対してフォントボールドですねフォント

ボールドとしてっと確認しながら見ていき

ましょうかね

でこちら h 1との余白を開けておき

たいので

そうですね mi の16中にしておき

ましょうねはいこんな感じでなると思い

ます

はいいいのではないでしょうか

まあですねちょっと本番と見比べるとです

ね若干ちょっと違うんですけれどもま

フォントが違ったりするんですけども

どちらはて着替えてみてください

はいこちらのナビゲーションのバーの文字

が黒になってるんですけど

まあ白に変えてみたりとかですね的に

ちょっと色んな感じでカスタマイズして

みるといいかもしれません

今回はチュートリアルということでこんな

簡単なサイト作ってみました

はいえーで最後にちょっと宣伝になります

私ですねいうでみー講座の方でテイル

ウィンド css の入門ということを

やっておりますこんな感じでですね個人用

のポートフォリオを

テイルウィンド css を使って作って

おりますので気になる方は概要欄の方確認

してみてください割引を貼っておきます

[音楽]

こんな感じですねまあしっかりと

レスポンシブに対応しております例えば

スマホ財物で見てみるとこんな感じみたい

な感じでこれですねしっかりと基礎の方

からまぁちょっとこの動画でよくわから

んかったよという方は是非ちょっと見てみ

てください

まあねちょっとポートフォリオサイト作っ

ておこうとかですねもうちょっと流れ知り

たいよという方はチェックしてみて

ください

はいということでいかがだったでしょうか

デルフィーノ c 性質の c 雪

フレームワーク使う派とを使わない派って

のは結局結構分かれてくると思うんです

けどまあ今最近ですね就職の求人とか

デールウィンド施設で使える方を応募して

ますとかですね最近見るようになったので

これを機にですね学習してみたい方はです

ねポートフォリオサイトとかですね自分

なりに作ってみるといいかもしれませんね

入れですねこの動画勉強になったという方

はチャンネル登録高評価宜しくお願い致し

ます時間の許す限りこういう

youtube 動画の方でも上げていき

ますのでよろしくお願い致しますまあね

宣伝する時も結構あると思うんですけれど

もそれはご了承下さい愛ということでまた

別の動画でお会いしましょうバイバイ

ちょっと後ろ汚いですね