Bootstrap + Sassでログイン画面を作ろう 【コーディングクッキング】
Рет қаралды 17,081
4 жыл бұрынBootstrapの Sassを、Visual Studio Codeの拡張機能でコンパイルしながら、ログイン画面をコーディングしていきます。Sassをカスタマイズすれば、Bootstrapは超絶便利ですよ！
チャンネル登録→kzfaq.info...
サブチャンネル→ / @user-qe4js5uo9s
TikTok→ / tomosta
Slackコミュニティ→join.slack.com/t/tomosta/shar...
Twitter→ / seltzer
■ Udemyで各種入門講座を販売中
SQL入門 - MySQLでまなぶデータベース
www.udemy.com/course/sql-basi...
kintoneで学ぶ、Webデータベース管理入門
www.udemy.com/course/kintone_...
Git入門： ノンプログラマーのための Git
www.udemy.com/course/git-begi...
PHP+MySQL（MariaDB） Webサーバーサイドプログラミング入門
www.udemy.com/course/php7basi...
[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門
www.udemy.com/course/html-css...
■ 書籍
これからはじめる人のJavaScript/Vue.jsの教科書 [NEW!]
amzn.to/2KrQraK
マンガでマスタープログラミング教室 バージョンアップ編
amzn.to/2Ryyf3z
@seiji7042 Жыл бұрын
非常に勉強になります。ありがとうございます。
@nagai_net Жыл бұрын
何回も見させて頂いています。貴重な動画ありがとうございます。
@tomosta Жыл бұрын
ありがとうございます！ これからも、何度も見ていただける動画を作っていきますー
@user-kq4jv4pp6w 4 жыл бұрын
また実践的な動画欲しいです！
@tomosta 4 жыл бұрын
はい、作りますね！
@chn1858 3 жыл бұрын
VScodeやSassやBootstrapの単体の動画も大変ありがたいし、 こうして組み合わさって実践的に使われてるところを見れるのも すごく勉強になりますね！ほかのプログラミングクッキングも見てみます。 ※私はワイプぜったいあったほうがいいです。 自分のプライベートの時間に勉強するのちょっと辛いですが 人の顔があると、いっしょにいてくれてる感じがして辛さがだいぶ軽減されます。
@tomosta 3 жыл бұрын
クッキング動画ももっと撮影したいのですが、前準備が大変すぎてなかなか撮影できません・・がんばります・・！
@chn1858 3 жыл бұрын
@@tomosta コメントありがとうございます！ 再生リストをみたら全部で９本もあったので、充分すぎます！ ゆるゆるな理解度なぶん、だらだら何度も見るので、たくさんありすぎても、消化できません。。。
@user-xe6ex8qz6i 4 жыл бұрын
こういう動画を待っていました
@tomosta 4 жыл бұрын
良かったです！ この感じで出していきますねー
@tsuba__zutomaro 2 жыл бұрын
完成例だけ示してもらってあとは自分で作る方が一番身に付く気がするので、助かります
@tomosta 2 жыл бұрын
課題っぽくするのも面白いですね！ 何かの題材でやってみます。
@tsuba__zutomaro 2 жыл бұрын
@@tomosta よろしくお願いします！
@baramon55 4 жыл бұрын
いつも動画を拝見させてもらってプログラミングの勉強をしています。 ホームページに模写の仕方がよくわからないので、動画で見せていただけたら嬉しいです。
@tomosta 4 жыл бұрын
模写は皆さんチャレンジされてますよねー。ただ、元サイトの権利的な問題もあって、動画でお伝えするのはなかなか難しいのですが、なにか権利的に問題のないサイトなどで解説できないか考えてみます！
@youko11102000 2 жыл бұрын
とても参考になりました！ですが、実際にやってみたらPCのスペックのせいかコンパイルに時間がかかりすぎて使えないと断念・・。ただ、この方法や考え方は参考にさせていただきました！
@tomosta 2 жыл бұрын
ありゃりゃ、ぜひPCを買い替えたときなどに思い出してくださいー
@yh589 3 жыл бұрын
おすすめの設定などあれば知りたいです！
@tomosta 3 жыл бұрын
こちらは何の設定でしょう？ リクエスト頂ければ、できるだけお応えします！
@yh589 3 жыл бұрын
@@tomosta Bootstrap自体の設定です！動画内ですとフォントサイズやメインカラーの変更を行っていましたが、モダンになるポイントや谷口さんがよく使っている変更点があれば知りたいなと思いました。
@user-gu6en4qw1z 4 жыл бұрын
いつも参考にさせて頂いてます。リクエストなのですがvscodeのスニペットができなくて苦しんでいます。もしよろしければスニペットの仕方について解説動画上げていただきたいです。
@tomosta 4 жыл бұрын
スニペットのしかたというのは、スニペットの使い方という事でしょうか？ mseeeen.msen.jp/vscode-snippet/ このあたりは参考になりますか？ VSCodeの動画は今後も出していきますねー
@user-gu6en4qw1z 4 жыл бұрын
たにぐち まことのともすたチャンネル 返信ありがとうございます！ 参考になります！ありがとうございます！
@user-mn7iq5qe3b 4 жыл бұрын
いつも分かりやすい動画ありがとうございます! 質問です。これってatomでもすべて同じくできますか？例えば、コンパイルの設定のところとかです。cssに変更したところとか。
@tomosta 4 жыл бұрын
もう Atomは何年も？ 使っていないので分からないです・・ VS Codeの方が良いと思いますよ！
@user-mn7iq5qe3b 4 жыл бұрын
たにぐち まことのともすたチャンネル 返信ありがとうございます！分かりました！VSコード使ってみます！！
@kuura4996 4 жыл бұрын
たにぐちさんのBootstrapの講座全部拝見させていただきました！ いつも有益な動画を本当にありがとうございます！ ちなみに実際に作っている中でBootstrapをheadの中で貼り付ける方法で使っているんですがcssの方でh1タグのfzを変更しても変わりません。。クラスをつけたりすれば変更はできるんですが何故なのでしょうか？containerの外ならとも思い外でも書いてみたんですが変更されませんでした..お時間ある時にでも回答いただけると幸いです^^;
@tomosta 4 жыл бұрын
ごめんなさい、fzってなんでしょう・・ セレクターの優先度が低くて上書きされないとかですかね？ Slackコミュニティとかで、ソースを貼り付けてご質問いただければ回答できるかも知れません！
@tkrbass2919 4 жыл бұрын
動画通りにnodeを入れターミナルで実行したところ何故かSCSSのフォルダがでてこず撃沈、、、 ググッても初心者すぎて何がなんだかわからず断念しました、、、 もうちょっと勉強しなおします
@tomosta 4 жыл бұрын
scssフォルダーは手で作っていると思いますね？ cssフォルダーができないって事ですかね？ こちらは、ファイル→設定→拡張機能 で吐き出し先を設定する必要がありますー
@tkrbass2919 4 жыл бұрын
たにぐち まことのともすたチャンネル SCSSファイルが自動でVSCで開いているフォルダに入ると思ってたのですがnode_modulesフォルダに入っているのに気付かなくて時間がかかりました! そのあとはたにぐちさんの動画通りコンパイルして使用できています😂
@heichi-hell0 3 жыл бұрын
内容はとてもわかりやすくテンポもいいのですごく見やすい。 けど、個人的にはワイプの意味を感じないからいらないかな
@tomosta 3 жыл бұрын
ありがとうございます！ それが、ワイプがあるとないとだと視聴維持率に違いがあるんですよ。画面が動かないときなどに、人が話している所が映っているとつい見続けてしまうのかも知れませんねぇ。
@user-mn7iq5qe3b 4 жыл бұрын
質問失礼します。javascriptはどうやって反映させるのか知りたいです。
@tomosta 4 жыл бұрын
次のクッキング動画は、JSを絡めようと思っていますので、また是非ご覧頂けると！
@user-mn7iq5qe3b 4 жыл бұрын
@@tomosta 分かりました！めちゃくちゃ楽しみにしてます！！
@mizuhokimura6070 4 жыл бұрын
Live sass compiler について質問があります。わたしもたにぐちさんと同じwindows を使用していて、どうしてもwatch sassがでてきません。出たとしてもにクリックするとworking on it となってそれ以降はクリックを押せなくなってしまいます。どうしたらlive sass complier を使えるようになるのでしょうか。
@tomosta 4 жыл бұрын
VSCodeを再起動したりしてもダメですか？ その様子の画面ショットを等を頂けると、なにか分かるかも知れません。Slackでコミュニティやっていますので、もしよろしければ是非どうぞ！ join.slack.com/t/tomosta/shared_invite/zt-86wvecc4-HRuMkRh7peTjkcttrZTBvQ
@mizuhokimura6070 4 жыл бұрын
たにぐち まことのともすたチャンネル ご返信ありがとうございます😭コミュニティに参加させて頂きます❗️☺️
@user-en8lr8lk9j 4 жыл бұрын
毎回楽しみに動画を拝見しています。 是非講義してもらいたい部分があります。 自分で作りたいものが見つかってない人向けに 受託開発の部分が知りたいです。 デザイン系の領域も入ってしまうのかもしれないですが、カンプからの書き出しや、納品のやり方、打ち合わせで確認してる内容などです。
@tomosta 4 жыл бұрын
おおぉ、仕事のワークフロー面白そうですね。ちょっと企画を考えてみます！
@hagedebuoyaji 3 жыл бұрын
オイラもとか開発系でよく使われている暗い画面は好きじゃないんですよねー。 白い画面の奴使ってるけどあまりバリエーションないですなぁ。
@naaa1760 4 жыл бұрын
7:12〜7:20の間の音声が倍速になりすぎてて何と説明しているのか分からないです…
@tomosta 4 жыл бұрын
あ、ここは不要な部分なんです（ファイルがコピーされましたくらいしか言ってないです（笑 音声消しちゃえば良かったですね。失礼しました！
@naaa1760 4 жыл бұрын
返信ありがとうございます！ Sassは初めてなのですが、 それ以外にもdiv classと classの命名のemmetのやり方も分かって、 効率の良いコードの書き方も同時に学びになりました！ありがとうございます😊
@tomosta 4 жыл бұрын
@@naaa1760 良かったです！ ありがとうございます！
@user-sv4ww4gg2e 4 жыл бұрын
ふ
@tomosta 4 жыл бұрын
ほ