【CSS #1】基礎からちゃんと学ぶ CSS 入門！基本構文を抑えよう！【ヤフー出身エンジニアが教える初心者向けプログラミング講座】
Тәжірибелік нұсқаулар және стиль
文系プログラミング未経験 → Yahoo! JAPANエンジニア → 起業家
📙 もくじ
0:00 プロジェクトの準備
1:12 実際にcssを書いてみる
2:24 cssの専門用語を解説
4:59 MDNでドキュメントを見る
6:54 宣言方法の違い + 内部スタイルシートの説明
7:35 インラインスタイルで宣言
8:44 外部スタイルシートで宣言
10:18 主流の宣言方法はどれかを解説
11:22 まとめ + 次回予告
🚀 今日のひとこと
プログラミング講座のCSS編スタートです！
入門的な内容からやるので初心者にオススメです。
今回は専門用語の解説とMDNレファレンス、
内部・外部スタイルシートやインラインスタイルといった
宣言方法の違いについて見ていきました。
次回はプロパティと値について深堀りします！
🔥基礎からちゃんと学ぶ CSS 入門！
【第2回】プロパティについて深堀りしよう！
• 【CSS #2】基礎からちゃんと学ぶ CSS...
【第3回】この講座だけでセレクターは完結できます！
• 【CSS #3】基礎からちゃんと学ぶ CSS...
【第4回】スタイルが効かないときはだいたいカスケード・詳細度・継承のどれかが原因！
• 【CSS #4】基礎からちゃんと学ぶ CSS...
【第5回】ボックスモデルはCSSを書いていく上で常に意識する必要があります
• 【CSS #5】基礎からちゃんと学ぶ CSS...
【第6回】フレックスボックス (flexbox) の使い方をゲームで学ぼう！
• 【CSS #6】基礎からちゃんと学ぶ CSS...
【第7回】flexbox の flex プロパティの使い方を徹底解説
• 【CSS #7】基礎からちゃんと学ぶ CSS...
👨💻 自己紹介
ヤフー株式会社でプログラマーとして働いていました！
現在は起業家として新規サービスを開発中です！
下記に興味がある方はチャンネル登録をおねがいします！
・IT業界、Web系、プログラミング講座
・リモートワーク、在宅勤務、副業
・スタートアップ、ベンチャー、経営者、社長
🌏 SNS
Twitter: / shimabu_it
Instagram: / shimabu_it
🏷️ タグ
#CSS #CSS入門 #プログラミング講座
Пікірлер: 89
めっちゃ分かりやすくてためになります。
待ってました！！✨
めちゃくちゃ分かりやすい！
非常にシンプルでわかりやすくて助かります。ありがとうございます！
@shimabu_it
4 жыл бұрын
良かったです。CSS基礎は既に作り終えて、今後は応用・実践編を考えております。基礎を学び終えたら、そちらも見てくださいね😊
こんなにわかりやすい講座は初めてです！スピード感もありすばらしいです！
先生の説明じゃcss全くわからなかったけどこの動画見たらスッキリわかりました。今の世代KZreadさえあればほとんどのことが無料でわかるけどこれこそ一番リーズナブル。 どんどん活用きていきます！！
初心者に分かりやすい！
とても分かりやすいです！
最近htmlを始めて、cssの外部シートで詰まっていた所を解決できました。ありがとうございました。
わかりやすい。本当にありがとうございました
初心者に分かりやすい！ありがとうございます！！！
単純なところでつまづいていたのですが、この動画を見て解決できました。ありがとうございます
CSS入門：７コンテンツを全て拝見しました。章立てがとても見やすく、理解しやすかったです。現場での苦労感が伝わってきます。頑張ってレイアウト編も拝見したいと思います。Grid！楽しみです。ありがとうございます！
非常に分かりやすくて助かります
@shimabu_it
3 жыл бұрын
ありがとうございます！😂
初心者に分かりやすい
分かりやすい！
見ました！ 最後まで見ますね！！
@shimabu_it
4 жыл бұрын
いつもコメントありがとうございます！ 学びにしていってくださいね！😊
勉強になります。自分にもできそうです。
いつも有益な講座を無料で公開して頂きありがとうございます！ プログラマーになるため、まずはドットインストールとしまぶーさんの動画で学んでいきたいと思います^ ^
@shimabu_it
4 жыл бұрын
ありがとうございますー！ 今後もたくさん学びになる動画を出していきます！😊
すげーーーーーー分かりやすいです！！！ 有料級の動画！
アラフォーです！ ITの専門学校卒で三年間ほどSEしてましたが、それ以降全然違う職業に従事しておりました。 自身でwebサイトを作ってみたいと思い、勉強中です！ 非常に分かり易くてとても助かります！
分かりやすくて草 最高です！
今日から拝見させていただきます。 よろしくお願い致します。
私でも理解できますっ！ありがとうございます！
Visual Studio Codeの動画とHTMLの動画をみました、これからCSSとJSの動画をみたいと思います! 色々HTMLやCSSやプログラミングを動画で見ましたが一番初心者にわかりやすいです! ありがとうございます
すっごくわかりやすかったですー😭😭 基礎の基礎がわからないので、助かります。
自分は理解力ないんで 大学の講義＋この動画を観てます
しまぶーさんありがとうございます。
Good job
ありがとうございます😊 cssが反映されなかったのが 反映されました。 ありがとうございます。😁
初めまして。すごく分かりやすいです。例えば、一度作成したサイトで、同じフォルダー・ファイル内で似たようなサイトを作成する場合、既存のCSSファイルにファイルを作成しないでリンクする方法を教えてください。
いつもわかりやすい動画ありがとうございます atomでcssを書くときタグの補完がされないのですが要因がわかりません、違うテキストエディタの話で申し訳ないのですが、教えてもらえないでしょうか
study japanese and IT together ^^ , thank you sensei
@vanthiennguyen1751
3 жыл бұрын
Đồng chí cũng đang học luôn ha
とても分かりやすく勉強させていただいてますが、1点質問があります。 VSCの便利機能？で と一発で入力できます。 は、style.cssを呼び出すんだなと何となくわかるのですが、 rel="stylesheet" とは何なのでしょうか？ ""で囲んでいるので文字列を指しているんだなと想像しますが、何処にもそのような記述が見当たりません。 MDN抜粋： 「rel は "relationship" を意味し、おそらく 要素の重要な機能の一つです。 - 値はこれを含んでいる文書にどのように関係するかを示します。」 読み続けたら気を失っていました・・
HTMLで画像を挿入して、その画像の上（右上端）に文字を乗せたいのですが、なかなかうまくいかず、どうしてもブラウザ画面上（margin上）の右上端になってしまいます。どうしたら良いでしょうか。良い解決方法はありませんか？
外部スタイルシートをやる時に、右クリックすると非表示、空いているエディタ、空いているフォルダがありません、アウトライン、タイムラインの５つしかでてきません！どうすれば宜しいですか？
kintoneでCSSを使っているのですが、 詳細画面と編集画面でテーブルに入っているタイトル項目の幅を狭めようとしたのですが、編集画面だけできません。widthなど幅を使うものは使って、importantも使ったのですができませんでした。編集画面ではできないのでしょうか？ちなみに狭めようとしているフィールドはユーザー選択と組織です。
カラーと文字の大きさが反映されない原因は何がありますか？
Chromeとの同期はどのようにしたら良いですか？
使用する教材はどのようにしてダウンロードできるのですか？
最近、wixというホームページ制作サイトを知ったのですがその機能を見たらHTMLとCSSを使わなくてもいいと書いてあったのですが、それを見てCSSとHTMIを学ぶ意欲少し失せたんですけど、どういったときに使えますか？HTMIとCSSの学ぶ意味がわからなくってきました泣
@shimabu_it
4 жыл бұрын
自分の作りたいものがホームページ作成レベルでよろしければwixでもいいかもしれませんが、エンジニアを目指す上ではhtml, cssは必要な知識になります。 wixを使ったらどんなデザインでもできるというわけではなく、細かいことをしようとすると難しかったり、また実際のサービス運用という点では向いていません。wix系のツールが得意なのはホームページ作成レベルで、基本的にサービス開発では使えません。例えばYahoo、食べログ、ホットペッパーなども、htmlとcssの知識が必ず使われています。
@user-oz8no2wf2t
4 жыл бұрын
ありがとうございます！！
文字の間隔とか決まりあるんですか？
プログラミング初心者です。 参考にさせてもらっています。 便利・よく使用するショートカットキーがありましたら、 動画等や、参考にできるもの(サイト)があれば、教えていただきたいです。 また、入力スピードが初心者なのでとても遅いのですが、 入力スピードは、慣れなのでしょうか？ あるいわ、 入力スピードが早くなる方法があれば是非教えていただきたいです。 どうかよろしくお願いします。
font-sizeがでてきません。 なぜでしょう？ そこから進むことができません。 教えてほしいです。
プロジェクト見つかりません。ファイルから開けますか？びっくりマークいれても出できませんでした
この人多分めちゃくちゃ頭いい気がする
@shimabu_it
4 жыл бұрын
なんかコメント笑いましたｗ ありがとうございます😂
いつもわかりやすい動画ありがとうございます。 ひとつわからないところがあるのですが、外部スタイルシートの時にindex.htmlの左側で右クリックしてもNew Fileと出てきません。
@shimabu_it
4 жыл бұрын
こちらこそ質問ありがとうございます！2点下記を確認してみてください！ ・index.htmlにカーソルを当てず余白のところで右クリックする ・1番左側に5つアイコンがあると思いますが1番上になっているか確認 こちらで解決しなかった場合は、もう少し具体的に状況を教えていただけると解決できるかもしれません😊✨
@artfc547
4 жыл бұрын
しまぶーのIT大学 すごくわかりやすい説明で解決しました^_^ ありがとうございます！！ あといじっていたら一番左の5つあるアイコン、上から1つ、2つと消えてしまって残りの3つしかアイコンが表示されない場合、再表示はできますか？ 何度も質問すいません、、
@shimabu_it
4 жыл бұрын
@@artfc547 解決されたようで良かったです！😊 左のバーの部分で右クリックをすると、チェックマークが入っているものと入っていないものがあると思いますが、チェックマークがあるものが現在表示されているアイコンになります。なので、クリックをしてチェックマークを入れると、アイコンがまた表示されるかと思います！ また最初はVS Codeを日本語化した方が使いやすいと思うので、拡張機能を入れて日本語化してみてください！ twitter.com/shimabu_it/status/1239881589703634945
この動画を見てプログラマーを目指せます。36歳のプログラマーは遅いですか？
在宅で5万円稼げるようになりたくて、プログラミングを勉強し始めた3人の子育てママです。色々と参考にさせて下さい(^^)
@shimabu_it
4 жыл бұрын
良い目標ですね！まずは勉強してスキルアップかと思いますが、私の講座が少しでもお力になれれば嬉しいです😊 一緒に頑張っていきましょ〜！
@hanahana6831
4 жыл бұрын
ありがとうございます。 よろしくお願いします(^^)
実践的でやる気が出ます。command + /はWindowsでは何ですか。無効にできません。
@shimabu_it
4 жыл бұрын
こちら非常にうまくまとめられているショートカット対応表になります。 qiita.com/oruponu/items/ae9c720d4522c1606daf 該当のキーですと「Ctrl+/」ですね！😊
@user-dt3rl4bw7v
4 жыл бұрын
ありがとうございます。
スタートした瞬間からもうわからない
初心者です。文字のカラーの色が設定されず反映されないのはなぜなのか教えてほしいです。
@shimabu_it
3 жыл бұрын
おそらく拡張子がうまく設定できていないかもです。 まずは後ろが .css になっていることを確認してみてください！🙏
style.cssが読み込まれません😭保存して、index.htmlから読み込んですのですが…
@shimabu_it
4 жыл бұрын
ご質問ありがとうございます！下記該当していないかご確認ください！ ・タイピングミス ・読み込むタグは下記と同じですか？ ・cssへのパスはあっていますか？ href="style.css" の部分でstyle.cssのファイルの場所があっているかご確認ください。 ・style.css内で間違いはありませんか？ 例えば、宣言ブロック（{}）を閉じ忘れていたり、宣言の最後のセミコロン（;）を入れ忘れていたりしませんか？ これらに該当しなければコードをいただけると幸いです🙇♂️
@user-rb9ke2yq3t
4 жыл бұрын
しまぶーのIT大学index内のhref style.cssを打ってませんでした😅そりゃ読み込まれないですよね…。詳しくありがとうございました！
@shimabu_it
4 жыл бұрын
@@user-rb9ke2yq3t あらら😅笑 解決できたようで何よりです。私も凡ミスを何回もしてきましたし最初はそういうミスはあるあるです。くじけず前に進みましょう！💪
パソコンすら持ってないのに勉強してるって変ですよね、、、笑 経済的に厳しくて💦 でも、こういう勉強をしていくとどんどん覚えたいと思うので、無理やりでも買おうか迷います😂😂 経験なしで会社に入るのは厳しいですよね😭
@user-zj1rl5ze4s
2 жыл бұрын
こんなコメントしてたのも11ヶ月前！！ 成長したちょっとだけ！笑
@user-rs8hg6fk9l
Жыл бұрын
かわいい
@user-zj1rl5ze4s
Жыл бұрын
@@user-rs8hg6fk9l この通知でコメント書いてたの思い出しました（笑）こんなこと書いてたの懐かしい！！今はエンジニアとして働いてます✨✨ 頑張ってよかったです🍓
@user-rs8hg6fk9l
Жыл бұрын
@@user-zj1rl5ze4s ええ！すごい！就職おめでとです👏🏻 自分もいま就活生でプログラミングスキル0からエンジニア目指してます…！
@user-zj1rl5ze4s
Жыл бұрын
@@user-rs8hg6fk9l おおお！！就活しながら勉強とは！！えらいです✨ 私の就職先めちゃくちゃ自由なので本当にストレスフリーです！！転職してよかったと心から思ってます😹 まだまだ勉強の日々ですので、お互い頑張っていきましょうね！！
初めまして！参考にさせていただいています！emmet の機能が全く機能しないのですが対処法を知りたいです！使っているパッケージは emmet です。検索もしてみましたが出てこないので、質問させていただきます。よろしくお願いいたします
このアプリなんだ？
すみません。htmlのファイルをクロームで動かしてみたのですが、なぜか表示されません 同じ書き方、同じソースコードで書きました 考えられる原因をいくつか挙げてください
@shimabu_it
4 жыл бұрын
おっと・・・今も詰まり中でしょうか？原因として考えられることは、うまくパス（自分のindex.htmlへのリンク）が間違っていることでしょうか。 Chromeに直接index.htmlをドラッグ・アンド・ドロップで反映させることもできるので、ぜひ試してみてください。それでも未解決のようでしたらまた教えて下さい！
Habla español
早すぎてわからん
早すぎるしゃべりと動きが
@user-ld3zl8bn4c
2 жыл бұрын
おそくすればええやん
もう少しゆっくり話せませんか？