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