世界一わかりやすいCSS講座！

プログラミングを学習したい初心者さん、エンジニア転職を目指している方、Web制作したい方であれば序盤で抑えておきたいのがCSSです。
フロントエンドエンジニアなら必須！バックエンドエンジニアでも触れる機会はあるので最低限抑えておきましょう。
------------------------------------------------------------------
👩‍💻ゼミ形式で学ぶプログラミング学習・研修「SiiD」
• プログラミングゼミ・SiiDの実態をぶ...
👨‍💻エンジニアによる転職キャリア相談「EEE転職」
• 若手エンジニア皆さんの転職やキャリア相談にのります
------------------------------------------------------------------
ニッチな情報やライブ配信のお知らせをしています。
メルマガ：my131p.com/p/r/Ym43EzoZ
LINE：lin.ee/eR6BXOD
------------------------------------------------------------------
今回紹介したコードはGitHubで確認できます
github.com/seito-developer/ht...
Visual Studio Code
code.visualstudio.com/
CSSプロパティ一覧の例
www.htmq.com/css3/
HTML講座入門
• 世界一わかりやすいHTML講座！ #初心者向...
JavaScript入門
• 【JavaScript超入門講座】わずか50...
🔽目次
00:00 はじめに
02:29 HTML/CSSとは？
04:59 環境構築
11:34 ディレクトリ・ファイルを作成
18:37 基本ルール
22:12 プロパティ・プロパティ値
40:02 セレクタ（主要なやつのみ）
55:29 CSSがバッティングしたらどうなる？
01:01:57 @規則
01:07:09 デフォルトのスタイル
01:14:30 ボックスモデルとブロック要素・インライン要素について
01:20:04 さいごに
🔽Special Thanks
動画編集：ぽぴぃ氏 Twitter ▷@poppy0p0
画像素材：いらすとや さん
#メルマガとLINE始めました

[@webit7652]

↓こちらもよければチェックしてみてください〜 👩‍💻ゼミ形式で学ぶプログラミング研修「SiiD」 kzbin.info/www/bejne/jYq4Y3qfqZ2XiMk 👨‍💻エンジニアによるキャリア相談「EEE転職」 kzbin.info/www/bejne/g3-3q4F8fMygj6s

[@body8722]

マジで待ってました！！

[@webit7652]

あざます！！

[@user-zx2jd1gf9h]

めっちゃ勉強になりました。スランプなりかけだったのでモチベ上がりました。次の動画も楽しみにしてます😁

[@webit7652]

よかったです！スランプ抜けましょう！！

[@taka-no-me9]

これが無料で見れるのはすごいです。ありがとうございます！

[@webit7652]

あざます！

[@KentaroxKondo]

次回も超たのしみにしています！

[@webit7652]

あざます！！

[@hiromitomura1971]

css を全く知らなくてどこかで勉強しなければならないなと思っていたのですが、この動画で概要はつかめたと思います。シンプルにまとめて分かりやすいものを作って頂いてありがとうございます。

[@webit7652]

よかったです！！

[@hiromitomura1971]

上の様に思っていたのですが、実際に自分のプログラムに使ってみると全然動きません 全く分かっていません。で再度復習に来ました。

[@user-sn4xp8hw3x]

今webサイト作成を勉強中です 今CSSでつまづいてるので わかりやすく解説していただきありがとうございました。

[@user-du4db5oj6y]

java,pythonは大学で学んでたのですが このようなマークアップ言語も面白いなと思いました。 非常にわかりやすい説明で理解できました

[@bololl8419]

大学2年だけどjava,python,c言語,html,cssしてるよ。

[@nokky9824]

​@@bololl8419中学生みたいなマウントやな

[@ts_book]

オンラインスクールで学習していて カリキュラムが文字ベースであんまり理解できなかったのですが この動画見てから理解できるようになりました！ めちゃめちゃありがたいです！他の動画もどんどん見させてもらいます！

[@webit7652]

なによりです！あざます！

[@user-dx2ip9bi5o]

わかりやすい動画ありがとうございます！！ (自分用メモです) 24:15 30:20 41:04 41:35 44:41 46:30

[@user-rg7tz2oy6y]

4月からフロントエンジニアとして働き始めます。 勉強したいと思い、セイトさんにいきつきました。 JS→HTML→CSSの順で動画を見ました！ unkoに最初は「え？」と思ってましたが、最後まで見て、 やってみたら、クイズゲームやWEBサイトも作れそうでした！この動画は本当にすごいです！ オブジェクト指向で、コード整理とか、実務でも役に立つような考え方も学べました。 他の動画も見て、実務で活躍できるようになりたいと思います

[@user-pb3bs2un2v]

初めまして。セイト様の非常にわかりやすい動画のおかげでようやくプログラマーを職にする事が出来そうです。本当にありがとうございます。

[@webit7652]

ありがとうございます！よかったです！

[@user-jf1ox2zb4m]

初めて講座系の動画で勉強しました。 話も聞き取りやすく、そして分かりやすかったです。

[@webit7652]

ありがたやです！

[@NM-qx8xv]

すごいなあ、この動画っ！ 最高ですよ！ コンピューターと会話できるようになれるっ！！ ありがとうございます！

[@webit7652]

恐縮です！！

[@3nr088]

cssもありがとうございます

[@webit7652]

使ったってください！！

[@user-lc8vv7es3v]

よくも悪くも世界一わかりやすくはなかった（それくらいわかれよという話は省かれていたという意味で）ですが、少し勉強してなんとなく雰囲気を掴んだ後だとすごくわかりやすく感じる気がします。

[@aiai-in5lr]

簡潔なのにすごく分かりやすくて助かりました(;_;) ありがとうございます！

[@OO-xu9ul]

他の先生のUdemy講座も取りましたが、この動画は1時間半でコンパクトに重要な部分をまとめてくださってありがたいです！

[@webit7652]

嬉しい感想ありがとうございます😭

[@switchtoanotherone]

ありがとうございます！ インライン要素も同じことが言えますが、ブロック要素の特徴である横ドーンをcssの記述によりインライン要素の横並びに変えられるとしたら、それぞれの特徴について意識してhtmlを書かなくても良いのではないかという印象を受けました。この後からどうにでも変えられるだろうという思考は良くないでしょうか？

[@KentaroxKondo]

やったーーーー！！

[@webit7652]

いえーい

[@bztv9288]

必要な人に必要な教育素材です

[@webit7652]

☺️☺️☺️

[@user-uu2br2gs7f]

恥ずかしながらン十年前に趣味で同人サイトの運営をしていて、その時にHTMLは本を片手に何とかなったんですがCSSで挫折して市販のソフトに逃げてしまいましたが、最初からこっちらの動画を拝見したら尚更自分の事は自分でしなくちゃ！と思い地味サイトにもちょっと彩りが加わりました。 解り易くありがとうございましたm(_ _"m)

[@YOUYOU-ey2ug]

凄くわかりやすく、勉強になりました。 その中で1つ気になったのですが、なぜbackground-colorは、redやblueなどの入力じゃ良くないのでしょうか？ 細かな色ならば16進数でいいかと思いますが、#FFFと書くよりも、whiteと書いた方がわかりやすいかと思い、気になったので質問しました。

[@repopo]

白って200色あんねん（）

[@7zk47]

コメントするか迷ったのですが、未来の自分が見るかもなので一応。 アプリ活用させて貰ってます。ありがとうございます。 5/23からプログラミング初めて、楽しくて仕方なかったのでIT企業に飛び込むために転職活動中です。 んで、ついさっき二次面接受けてきました。 ①HTML/CSS一通りとJSが少し分かります。(ポートフォリオも見せました) ②仕事できるなら選びません。チャンスがあるなら掴みに行きます。 ③仕事させて頂けるなら言語、バックフロントインフラは問いませんしやれと言われればやります の3つを根本として面接受けてきました。 内定取れたらいいなぁ(白目)

[@webit7652]

アプリ使ってくれているとは…！ありがとうございます！！

[@haruymth]

15:56 ぐらいのパスの設定ってドットスラッシュ(./)とスラッシュのみ(/)って同じですか？

[@user-ke4mr9uq1p]

本読んで色々勉強してましたが、途中からなんかよくわからなくなって、先生のとこ来ました！よろしくお願いします！

[@webit7652]

ようこそ！

[@kohei1218]

kintoneでCSSを使っているのですが、 詳細画面と編集画面でテーブルに入っているタイトル項目の幅を狭めようとしたのですが、編集画面だけできません。widthなど幅を使うものは使って、importantも使ったのですができませんでした。編集画面ではできないのでしょうか？ちなみに狭めようとしているフィールドはユーザー選択と組織です。

[@webit7652]

KintoneはOSSじゃないし中の人に聞いた方がええと思うで！

[@world-ikarashi]

vscodeをChromebookのパソコンでは使えないですか？Chromebook用のWebmakerというのを使って実践しているのですが、まだ初心者なので、Chromeでオススメあれば教えて下さい！

[@webit7652]

Mac/Windowsなどふつーの王道なPCがいいですよー タブレットとかChromebookとかだとコーディングしてる人が少なすぎて情報あんまりないです！僕もわかりません！

[@world-ikarashi]

@@webit7652 ありがとうございます！！ Chromeでどこまでできるかもっと調べてみます。

[@user-qc7dj3qq4r]

①ヘッドにリンクタグを入れて、スタイルシートを作る ②スタイルシートの中で、どのHTMLに（セレクター）どのような（プロパティ）種類（プロパティの値）の装飾を入れるかを書き込む

[@syo5724]

セイトさんにお供できる存在になりたい！

[@webit7652]

お供！😂

[@hmisono9965]

こちらの動画を拝見した後に書籍を読みつつ手を動かしながら勉強していると頭に入ってきて本当にありがたいです。今回のCSSも同様に進めていこうかと思いますが、＋αでやったほうが良いことがあれば教えていただきたいです。単語帳で用語を覚えるとか？なのか…よろしくお願いします

[@webit7652]

とにかくつくる！アウトプット命！です

[@hmisono9965]

@@webit7652 お忙しいところありがとうございます。 場数をこなして実践力を鍛えろってことですね。ど素人ですが、とりあえず今月簡単なHPが作れるようになる事が目標です。 また悩んだら相談させて下さい。 よろしくお願いしますm(_ _)m

[@chun.a.5330]

全く関係なくて恐縮なのですが、新卒就活についてご意見をお聞かせください。 現在、大手SIerの子会社と、独立系組み込みソフトウェアの会社から内定を頂いていて、どちらかに就職しようと考えています。 将来性やスキルの観点から、組み込みの方に気持ちがありますが、福利厚生でかなり劣っており、組み込みの方に就職することに不安があります。 組み込みエンジニアの市場価値や将来性が◎であれば、下積みだと思って頑張ろうと思いますが、一方で大手のSIerの業務でも転職等で武器になるスキルが身につくのであれば、前者でもいいかなと思っています。 質問は2つで、 ①大手のSIerの業務と、組み込みの自社製品や受託の開発を行う業務とでは、身につくスキルや経験の価値にどれくらい差があるとおもいますか。 ②組み込みエンジニアは一般のSEに比べて、現在と今後の待遇や市場価値は伸びる/凹むと思いますか。 長くなってしまい、申し訳ありません。セイトさん、視聴者の皆さんのご意見をいただけると幸いです。

[@webit7652]

明日ライブするので、そこで聞いてくれたら答えましょうｗ

[@chun.a.5330]

@@webit7652 わかりました！ ご返信ありがとうございます

[@user-qc7dj3qq4r]

CSS①HTMのボディにスタイルタグ②スタイルの中にインライン　③head中にリンクタグを使う　rel="styleseet"どのようなリソースか href="./style.css”リソースのある場所

[@user-qc7dj3qq4r]

②は、ボディ中にHTMLのように書けるからピンポイントでデザインを付けたいときに使いやすいけど長い

[@Knokiwami]

同じ手順で同じことをしているのですが、htmlでもcssでも属性がが反映されません。 入力できるのですが、属性の色である水色のコードにならず、カラーやフォントサイズを選んでも反映されないのですが、考えられる間違えとして何がありますかね？ ちなみに｛｝これとかはしっかり使ってます。

[@user-qk2ek7kn8x]

もしかして idとかになってません？

[@user-qc7dj3qq4r]

ｐ（セレクター）｛　中かっこ 　　color(プロパティ） :red（プロパティの値）;　←コロン×２,ラストはセミコロン ｝　　中かっこ閉じ

[@maru2216]

いつも勉強してます、ありがとうございます！ 動画の最初にプロモーションと表示されますが、なんかの提供なのかな？といつも思っていて疑問でした！

[@webit7652]

自社広告でも表紙必要なんです＞＜

[@maru2216]

@@webit7652 なるほど！ありがとうございます！

[@stelonetv3023]

1時間4分のmax widthのところでコード通りやったけど適用されませんでした。なぜですか？

[@user-kh9gm4eu9l]

コメント失礼します。同じ方法でvscodeでやろうとしたのですがindex.htmlのファイルにChromeマークがつかず、編集したものが確認できません😢

[@eeeg]

右クリック、アプリケーションで開く

[@3sukonb]

vs codeの拡張機能を検索しても何故か検索されないのですが、対処法を教えてください。

[@design_yoshimi]

50:19 問題コピペ用です。 - 「.abc」に {color: red;} - 「h1 でかつ、.headline」に {color: red;} - 「.abc」の子要素すべてに {color: red;} - 「.abc」の直下の子要素の隣のpタグのみに {color: red;} - 「.abc」の直下の タグのみにカーソルを乗せてた時だけ {color: red;}

[@user-uc8he1cc9w]

コメント失礼します！この動画を有効活用させていただきたいのですが、一通り動画を見るタイプなのか 一緒にコードを書いていくタイプなのかわかりません。見るフェーズと実践するフェーズをもっと明確にしていただけると助かります！わがまま言ってすみません🙇‍♂️

[@snissy2154]

どうでも良くて草

[@webit7652]

好きなように使ってくれていいすよ！w

[@user-hy9bz4np2v]

プログラミング以前に勉強する事自体が向いてなさそうなコメントや。。。

[@inte3191]

自分用 44:48

[@user-pi9xx4qy8r]

自分用 50:26 テスト

[@uuii2437]

23:24 margin ！！！！！！！

[@user-Fav123]

11:45 16:00

[@user-tt6iq4zn2e]

21:51

[@stelonetv3023]

58分のところで、Pタグだけでカラーをブルーに設定して、インポータントを設定しても色がブルーバイオレットのままでした。 動画の通りになりませんでした。

[@Gbo_tt]

先生、Javaをやる予定は…

[@webit7652]

Javaは詳しくはないんす…ごめん🥺

[@user-cb6fy1lh6c]

35:00背景画像入れ方

[@KS-rn3qc]

CSSはプログラミングではありません

[@webit7652]

はい、そうですね！

[@Gbo_tt]

そうだったのか