【Tailwindcss入門】利用者急上昇中のCSSフレームワークのTailwindcssで簡単なウェブサイトを作ってみよう
Summary
TLDRDieses 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
😀 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.
🛠 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.
🎨 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.
🌐 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.
📝 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.
🖼️ 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.
🔄 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.
Mindmap
Keywords
💡Tailwind CSS
💡Responsive Design
💡Klassen (Klassenspezifikationen)
💡Navigationsleiste
💡HTML
💡npm (Node Package Manager)
💡Configurieren
💡Bauprozess (Build-Prozess)
💡Customisierung (Anpassung)
💡IntelliSense
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 動画の方でも上げていき
ますのでよろしくお願い致しますまあね
宣伝する時も結構あると思うんですけれど
もそれはご了承下さい愛ということでまた
別の動画でお会いしましょうバイバイ
ちょっと後ろ汚いですね
Ver más vídeos relacionados
Crashkurs für Anfänger | Canva Tutorial Deutsch
Übungsaufgabe Ersatzspannungsquelle
3 Levels Of Drum Patterns: How To Make PRO Drum Patterns
Online-Bewerbung – die 4️⃣ Arten, sich online zu bewerben
Make Passive Income with YouTube shorts, Instagram Reels & Tiktok videos
You won't believe WordPress can do this!
5.0 / 5 (0 votes)