ขนาดวิดีโอ: 1280 X 720853 X 480640 X 360
แสดงแผงควบคุมโปรแกรมเล่น
เล่นอัตโนมัติ
เล่นใหม่
これから数回に分けてTailwind CSSに関する講座をアップしていきます！今流行りのCSSフレームワークでReactやVue.jsと一緒に使われることも多いです！React, Next.js, npm, ...etcなどのモダンJS講座は現在サロンで先行公開中 → it-kingdom.com/
class名を考えなくてもいいのでという本来使い物にならない空タグが当たり前に置けるのがいいですよね！display: flexでspace-betweenのときにレイアウトが変わってしまう恐れがなくなり、これだけでめちゃくちゃ感動しました。
オブジェクト指向 CSS の高機能で気の利いたやつって感じですね。FLOCSS 的な組み方をする場合でも utility クラスは書かずに Tailwind CSS を使うと、イレギュラー対応を手癖でできそうです
Tailwind CSSは気になっていたので講座開始嬉しいです。
おーそれはグッドタイミングでした😂これから楽しみにしていてください✨
最近拝見していますがこの内容が無料で見られるのはちょっと信じられないですね…IT大学と謳っていますが実際は大学よりも超実務寄りなので現場でも初心者でも助かることこの上ないコンテンツですね！ありがとうございます！
そのように言ってくださりありがとうございます。たいへんうれしいです😂
いいものを紹介してくれてありがとうございます！今開発してるものに早速組み込みますね！
GOODでした
質問です！XDであらかじめデザインを決めている場合、どちらの方法が効率的ですか？・Tailwind CSSを使用してXDからサイトの値をトレースする・自分でclassを決めCSSを付与して従来通りXDからトレースしてデザインしていくよろしくお願い致します
おそくなりましたが、完全にその人のスキル次第です。TailwindCSSを使えるのであれば確実に前者のほうが効率的ですね😊
お疲れ様です！勉強させていただきます！
ぜひぜひ学んでいってください😊✨
待ってました👏👏
お待たせしましたー(・∀・；)
tailwind css気になってたので、とても楽しみです！✨特に、Bootstrapとの差別化が気になります🤔🤔
ありがとうございます〜！！Bootstrapとの違いは要望も多いのでまた動画で解説しますね💪
正統派イケメンに教えてもらって嬉しい限りです
正統派イケメン！！😂
ちょうどTailwind CSSの話を聞いて勉強しようかなーってタイミングだったので、すごく助かります！
プロダクトでも使ってください👍✨
css版jQueryって感じだねcssもjsみたいにモジュールとかスコープ的なもの欲しいけど、カスケーディングって言うくらいだから来ないだろうな…
これだと結局は自分でデザイン考えないといけない感じがしちゃって、個人開発では結局Bulmaとか使いたくなっちゃいそう、、
デザインが苦手であれば仰るとおりかもしれませんね😂
ReactやReactNativeなどのライブラリでも使用することはできるのでしょうか?
Reactではもちろん使えます。私はむしろヘビーユースしていますよ💪💪React Nativeは有志が頑張ってTailwind CSSを使うためのライブラリを作っていたりはしますが基本は公式じゃないので辞めた方が良いです。
ありがとうございます
コメント嬉しいです。動画投稿がんばります💪💪
Bootstrap と何が違うんですか？
Bootstrapとの違いについては、他の方からの要望も多かったのでまた動画で解説しますね🙏
複数人が触る場合のメンテナンス性とかってどうなんだろう？sassで必要なものだけ変数指定するよりこっちのほうが楽なのかな？
メンテナンス性はかなり高いと思いますよ〜！ただJSフレームワークとの組み合わせでかなり威力を発揮する部分もあるので、Reactとかも一緒に学んでおきたいところではありますね！👀
@@shimabu_it なるほど！レスポンシブ対応も簡単にできますか？デザインによるかもですが、、、
Bootstrapより柔軟性があるように感じました。Bootstrapとの差やtailwindCSS一択なのかなど解説頂けると嬉しいです。いつもありがとう御座います
次の動画がBootstrapとの比較動画です😊お楽しみに〜！✨
tailwind cssいつかやってくれると信じてました。どれぐらいのボリュームになりそうですか？
私も激推しのフレームワークです😊ボリュームは未定ですが10本ぐらいはいきそうです(・∀・；)
bootstrapとの違いを詳しく知りたいです！
こちら、他の方からもたくさん要望をいただいたので動画で解説させていただきますね！😊✨
CSSフレームワークを選定する上で、TailwindCSSとCSS Moduleで迷ってます。Qiitaなどでも少し漁りましたが正直、どちらも良さそうで結局迷ったままです。しまぶーさんはCSS Moduleと比較した上でどの点で、またどういったケースで、TailwindCSSが優れているとお考えでしょうか？
完全に用途によるとは思っているのですが、自分の場合は実装速度を割と重視していて、その場合Tailwind CSSの方が向いているなと思って使っています。cssファイルを作ったり命名したり細かい単位を決めたりする手間が無い分、Tailwind CSSは早いです。反面、デザイナーとの協業だったりではCSS Modulesの方が秀でていそうですね！ざっくりですが参考になれば😆
@@shimabu_it ご回答下さりありがとうございます！参考にさせていただきます！m(_ _)m
HTML2.0からコーディングしてるおじさんですが、もうついていけない。。💦
なんとそんな昔から・・・（私がまったく知らない時代！笑）間違いなく便利にはなっているはずですので、覚えておいて損はないと思います😊
クラスがどうしても長くなると思うのですが、慣れたら気にならないでしょうか？
まったくもって気にならないです！慣れですね！👍👍
個人的にめっちゃ使いづらかった。長所の一つに微調整で頭を使わなくていいとおっしゃってましたが、逆にいうと微調整する時はかなり面倒くさい。例えばheight 64px にしたいなどとなったら、いっこいっこconfigに書かないといけない。あとcss のプロパティ名が純粋なcssと完全一致じゃないから一回一回調べるのかなり面倒くさかった。
どうやら一つ目の問題はアップデートで指定できる範囲が増えたっぽいですね
ですです！後ほど講座で扱う予定ですが微調整は簡単に行なえます。覚えるのは大変ですが一度覚えたら超楽になる感じですね。最初だけ頑張りが必要です😂
こういうのHTML内のclassの量は気にしないの？
（cssファイルができることとのトレードオフなので）気にならないのもありますが、applyを使うことで解決もできますよー！
いつも助かってます！ファンです！IT KINGDOMに入国するとREST APIの講座も受けられますか？また、現在はDjangoでAPIを叩いていますが、FirebaseとNode.jsも学びたいです！
ありがとうございます！REST APIの講座はまだ無いですが、質問できる環境はあります。またFirebaseとNode.jsも講座としてはまだないですが、私含め運営の得意とする技術スタックなので、ぜひ質問してください！😊ちなみにサロン内ではPythonコミュニティが熱いので、そこもオススメです！👍✨
ブートストラップに似てる？
Bootstrapとの比較動画を次に出しますね😊
普通にsassで書いた方が効率的な気がする
web制作にも利用できますかね〜🤔
Web制作でも使えると思いますよー！私だったら使います😊
@@shimabu_it ありがとうございます！試してみます☺️
凄く使いやすそうで良いですねー！！有益動画ありがとうございます！1つ質問なのですが。。デザインカンプありきで作成する場合こういったフレームワーク的なのって逆に手間が増えたりする時あるのですが、デザインありきのコーディングの場合も問題無く活用できる感じでしょうか？？🧐
Bootstrapのようなデザインまで関与するCSSフレームワークだと手間が増えるかと思いますが、Tailwind CSSの場合はほとんど手間は増えないかと思いますよ！むしろ慣れると早くなって工数削減できるかと思います！👍👍
@@shimabu_it 返信ありがとうございます！！回答して貰えるとは思ってなくてめっちゃ嬉しいです☺️しまぶーさんの動画も見つつ実践してみます！😍
初心者にも向いてますか？
CSSのある程度の理解があれば理解できるはずです！👌
@@shimabu_it ありがとうございます。
TailwindからJava Scriptを使う方法が分かりません
ん～～～、まるでstyle属性に直書きしている様ですね。メディアクエリーも使えるのでもっと便利なのでしょうけど。。
便利なようにも見えるけどHTMLにcssを書き込んでるような構造になってしまって、デザインと文書構造の分離っていうcssを使う利点が潰れてしまうような気がしますね
applyを使うことで回避できますので、そこは問題ないはずですよー！！😊
こりゃCSSの書き方を覚えなくなるな。
変態かよ、使い所がわからん。Bootstrapもいらんけど。mindBEMdingか、 Vue.jsのScoped CSSが最高。
結構流行ってきていますよー！特にTwitterの海外アカウントをフォローしてるとプロダクトの採用事例とかでよく目にします！BEMは結構古く最近のプロジェクトだと採用されていない印象ですが、Vue.jsのScoped CSSは良いと思います！👍
What are you saying?😞
Tailwind CSS is great and talks about why to choose it! 😊
@@shimabu_it ow🙄
これはプロの現場では使えませんね
これから増えていくと思いますよー！
@@shimabu_it さん失礼ながら、全く使わないクラスをこれだけ内包しているものをプロは使いませんし、これを使うより早くコーディングできますよ。。。プロは
@@ぞのw 11:06 ちなみにプロはスタイリングは何を使うのですか？
これから数回に分けてTailwind CSSに関する講座をアップしていきます！
今流行りのCSSフレームワークでReactやVue.jsと一緒に使われることも多いです！
React, Next.js, npm, ...etcなどのモダンJS講座は現在サロンで先行公開中 → it-kingdom.com/
class名を考えなくてもいいのでという本来使い物にならない空タグが当たり前に置けるのがいいですよね！display: flexでspace-betweenのときにレイアウトが変わってしまう恐れがなくなり、これだけでめちゃくちゃ感動しました。
オブジェクト指向 CSS の高機能で気の利いたやつって感じですね。
FLOCSS 的な組み方をする場合でも utility クラスは書かずに Tailwind CSS を使うと、イレギュラー対応を手癖でできそうです
Tailwind CSSは気になっていたので講座開始嬉しいです。
おーそれはグッドタイミングでした😂
これから楽しみにしていてください✨
最近拝見していますがこの内容が無料で見られるのはちょっと信じられないですね…
IT大学と謳っていますが実際は大学よりも超実務寄りなので現場でも初心者でも助かることこの上ないコンテンツですね！
ありがとうございます！
そのように言ってくださりありがとうございます。
たいへんうれしいです😂
いいものを紹介してくれてありがとうございます！今開発してるものに早速組み込みますね！
GOODでした
質問です！XDであらかじめデザインを決めている場合、どちらの方法が効率的ですか？
・Tailwind CSSを使用してXDからサイトの値をトレースする
・自分でclassを決めCSSを付与して従来通りXDからトレースしてデザインしていく
よろしくお願い致します
おそくなりましたが、完全にその人のスキル次第です。
TailwindCSSを使えるのであれば確実に前者のほうが効率的ですね😊
お疲れ様です！勉強させていただきます！
ぜひぜひ学んでいってください😊✨
待ってました👏👏
お待たせしましたー(・∀・；)
tailwind css気になってたので、とても楽しみです！✨
特に、Bootstrapとの差別化が気になります🤔🤔
ありがとうございます〜！！
Bootstrapとの違いは要望も多いのでまた動画で解説しますね💪
正統派イケメンに教えてもらって嬉しい限りです
正統派イケメン！！😂
ちょうどTailwind CSSの話を聞いて勉強しようかなーってタイミングだったので、すごく助かります！
プロダクトでも使ってください👍✨
css版jQueryって感じだね
cssもjsみたいにモジュールとかスコープ的なもの欲しいけど、カスケーディングって言うくらいだから来ないだろうな…
これだと結局は自分でデザイン考えないといけない感じがしちゃって、個人開発では結局Bulmaとか使いたくなっちゃいそう、、
デザインが苦手であれば仰るとおりかもしれませんね😂
ReactやReactNativeなどのライブラリでも使用することはできるのでしょうか?
Reactではもちろん使えます。私はむしろヘビーユースしていますよ💪💪
React Nativeは有志が頑張ってTailwind CSSを使うためのライブラリを作っていたりはしますが基本は公式じゃないので辞めた方が良いです。
ありがとうございます
コメント嬉しいです。動画投稿がんばります💪💪
Bootstrap と何が違うんですか？
Bootstrapとの違いについては、他の方からの要望も多かったのでまた動画で解説しますね🙏
複数人が触る場合のメンテナンス性とかってどうなんだろう？
sassで必要なものだけ変数指定するよりこっちのほうが楽なのかな？
メンテナンス性はかなり高いと思いますよ〜！ただJSフレームワークとの組み合わせでかなり威力を発揮する部分もあるので、Reactとかも一緒に学んでおきたいところではありますね！👀
@@shimabu_it なるほど！レスポンシブ対応も簡単にできますか？デザインによるかもですが、、、
Bootstrapより柔軟性があるように感じました。
Bootstrapとの差やtailwindCSS一択なのかなど解説頂けると嬉しいです。
いつもありがとう御座います
次の動画がBootstrapとの比較動画です😊
お楽しみに〜！✨
tailwind cssいつかやってくれると信じてました。どれぐらいのボリュームになりそうですか？
私も激推しのフレームワークです😊
ボリュームは未定ですが10本ぐらいはいきそうです(・∀・；)
bootstrapとの違いを詳しく知りたいです！
こちら、他の方からもたくさん要望をいただいたので動画で解説させていただきますね！😊✨
CSSフレームワークを選定する上で、TailwindCSSとCSS Moduleで迷ってます。Qiitaなどでも少し漁りましたが正直、どちらも良さそうで結局迷ったままです。しまぶーさんはCSS Moduleと比較した上でどの点で、またどういったケースで、TailwindCSSが優れているとお考えでしょうか？
完全に用途によるとは思っているのですが、自分の場合は実装速度を割と重視していて、その場合Tailwind CSSの方が向いているなと思って使っています。cssファイルを作ったり命名したり細かい単位を決めたりする手間が無い分、Tailwind CSSは早いです。反面、デザイナーとの協業だったりではCSS Modulesの方が秀でていそうですね！ざっくりですが参考になれば😆
@@shimabu_it ご回答下さりありがとうございます！参考にさせていただきます！m(_ _)m
HTML2.0からコーディングしてるおじさんですが、もうついていけない。。💦
なんとそんな昔から・・・（私がまったく知らない時代！笑）
間違いなく便利にはなっているはずですので、覚えておいて損はないと思います😊
クラスがどうしても長くなると思うのですが、慣れたら気にならないでしょうか？
まったくもって気にならないです！慣れですね！👍👍
個人的にめっちゃ使いづらかった。
長所の一つに微調整で頭を使わなくていいとおっしゃってましたが、逆にいうと微調整する時はかなり面倒くさい。例えばheight 64px にしたいなどとなったら、いっこいっこconfigに書かないといけない。
あとcss のプロパティ名が純粋なcssと完全一致じゃないから一回一回調べるのかなり面倒くさかった。
どうやら一つ目の問題はアップデートで指定できる範囲が増えたっぽいですね
ですです！後ほど講座で扱う予定ですが微調整は簡単に行なえます。覚えるのは大変ですが一度覚えたら超楽になる感じですね。最初だけ頑張りが必要です😂
こういうのHTML内のclassの量は気にしないの？
（cssファイルができることとのトレードオフなので）気にならないのもありますが、applyを使うことで解決もできますよー！
いつも助かってます！ファンです！
IT KINGDOMに入国するとREST APIの講座も受けられますか？また、現在はDjangoでAPIを叩いていますが、FirebaseとNode.jsも学びたいです！
ありがとうございます！REST APIの講座はまだ無いですが、質問できる環境はあります。またFirebaseとNode.jsも講座としてはまだないですが、私含め運営の得意とする技術スタックなので、ぜひ質問してください！😊
ちなみにサロン内ではPythonコミュニティが熱いので、そこもオススメです！👍✨
ブートストラップに似てる？
Bootstrapとの比較動画を次に出しますね😊
普通にsassで書いた方が効率的な気がする
web制作にも利用できますかね〜🤔
Web制作でも使えると思いますよー！私だったら使います😊
@@shimabu_it ありがとうございます！
試してみます☺️
凄く使いやすそうで良いですねー！！
有益動画ありがとうございます！
1つ質問なのですが。。
デザインカンプありきで作成する場合こういったフレームワーク的なのって逆に手間が増えたりする時あるのですが、デザインありきのコーディングの場合も問題無く活用できる感じでしょうか？？🧐
Bootstrapのようなデザインまで関与するCSSフレームワークだと手間が増えるかと思いますが、Tailwind CSSの場合はほとんど手間は増えないかと思いますよ！むしろ慣れると早くなって工数削減できるかと思います！👍👍
@@shimabu_it
返信ありがとうございます！！
回答して貰えるとは思ってなくてめっちゃ嬉しいです☺️
しまぶーさんの動画も見つつ実践してみます！😍
初心者にも向いてますか？
CSSのある程度の理解があれば理解できるはずです！👌
@@shimabu_it ありがとうございます。
TailwindからJava Scriptを使う方法が分かりません
ん～～～、まるでstyle属性に直書きしている様ですね。
メディアクエリーも使えるのでもっと便利なのでしょうけど。。
便利なようにも見えるけどHTMLにcssを書き込んでるような構造になってしまって、デザインと文書構造の分離っていうcssを使う利点が潰れてしまうような気がしますね
applyを使うことで回避できますので、そこは問題ないはずですよー！！😊
こりゃCSSの書き方を覚えなくなるな。
変態かよ、使い所がわからん。Bootstrapもいらんけど。
mindBEMdingか、 Vue.jsのScoped CSSが最高。
結構流行ってきていますよー！特にTwitterの海外アカウントをフォローしてるとプロダクトの採用事例とかでよく目にします！
BEMは結構古く最近のプロジェクトだと採用されていない印象ですが、Vue.jsのScoped CSSは良いと思います！👍
What are you saying?😞
Tailwind CSS is great and talks about why to choose it! 😊
@@shimabu_it ow🙄
これはプロの現場では使えませんね
これから増えていくと思いますよー！
@@shimabu_it さん
失礼ながら、全く使わないクラスをこれだけ内包しているものをプロは使いませんし、これを使うより早くコーディングできますよ。。。プロは
@@ぞのw 11:06
ちなみにプロはスタイリングは何を使うのですか？