Тёмный

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

セイト先生のWeb・ITエンジニア転職ラボ
Просмотров 147 тыс.
50% 1

プログラミングを学習したい初心者さん、エンジニア転職を目指している方、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始めました

Хобби

Опубликовано:

 

5 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 96   
@webit7652
@webit7652 Год назад
↓こちらもよければチェックしてみてください〜 👩‍💻ゼミ形式で学ぶプログラミング研修「SiiD」 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-WYU2Git8dRg.html 👨‍💻エンジニアによるキャリア相談「EEE転職」 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-MNTzNFGgmYI.html
@body8722
@body8722 2 года назад
マジで待ってました!!
@webit7652
@webit7652 2 года назад
あざます!!
@raheso4374
@raheso4374 12 дней назад
ホントにわかりやすいので、ありがたいです。
@user-zx2jd1gf9h
@user-zx2jd1gf9h 2 года назад
めっちゃ勉強になりました。スランプなりかけだったのでモチベ上がりました。次の動画も楽しみにしてます😁
@webit7652
@webit7652 2 года назад
よかったです!スランプ抜けましょう!!
@taka-no-me9
@taka-no-me9 Год назад
これが無料で見れるのはすごいです。ありがとうございます!
@webit7652
@webit7652 Год назад
あざます!
@KentaroxKondo
@KentaroxKondo 2 года назад
次回も超たのしみにしています!
@webit7652
@webit7652 2 года назад
あざます!!
@user-sn4xp8hw3x
@user-sn4xp8hw3x Год назад
今webサイト作成を勉強中です 今CSSでつまづいてるので わかりやすく解説していただきありがとうございました。
@user-rg7tz2oy6y
@user-rg7tz2oy6y Год назад
4月からフロントエンジニアとして働き始めます。 勉強したいと思い、セイトさんにいきつきました。 JS→HTML→CSSの順で動画を見ました! unkoに最初は「え?」と思ってましたが、最後まで見て、 やってみたら、クイズゲームやWEBサイトも作れそうでした!この動画は本当にすごいです! オブジェクト指向で、コード整理とか、実務でも役に立つような考え方も学べました。 他の動画も見て、実務で活躍できるようになりたいと思います
@ts_book
@ts_book 2 года назад
オンラインスクールで学習していて カリキュラムが文字ベースであんまり理解できなかったのですが この動画見てから理解できるようになりました! めちゃめちゃありがたいです!他の動画もどんどん見させてもらいます!
@webit7652
@webit7652 2 года назад
なによりです!あざます!
@hiromitomura1971
@hiromitomura1971 2 года назад
css を全く知らなくてどこかで勉強しなければならないなと思っていたのですが、この動画で概要はつかめたと思います。シンプルにまとめて分かりやすいものを作って頂いてありがとうございます。
@webit7652
@webit7652 2 года назад
よかったです!!
@hiromitomura1971
@hiromitomura1971 Год назад
上の様に思っていたのですが、実際に自分のプログラムに使ってみると全然動きません 全く分かっていません。で再度復習に来ました。
@user-pb3bs2un2v
@user-pb3bs2un2v Год назад
初めまして。セイト様の非常にわかりやすい動画のおかげでようやくプログラマーを職にする事が出来そうです。本当にありがとうございます。
@webit7652
@webit7652 Год назад
ありがとうございます!よかったです!
@user-du4db5oj6y
@user-du4db5oj6y Год назад
java,pythonは大学で学んでたのですが このようなマークアップ言語も面白いなと思いました。 非常にわかりやすい説明で理解できました
@bololl8419
@bololl8419 11 месяцев назад
大学2年だけどjava,python,c言語,html,cssしてるよ。
@nokky9824
@nokky9824 9 месяцев назад
​@@bololl8419中学生みたいなマウントやな
@user-dx2ip9bi5o
@user-dx2ip9bi5o Год назад
わかりやすい動画ありがとうございます!! (自分用メモです) 24:15 30:20 41:04 41:35 44:41 46:30
@user-lc8vv7es3v
@user-lc8vv7es3v 6 месяцев назад
よくも悪くも世界一わかりやすくはなかった(それくらいわかれよという話は省かれていたという意味で)ですが、少し勉強してなんとなく雰囲気を掴んだ後だとすごくわかりやすく感じる気がします。
@user-jf1ox2zb4m
@user-jf1ox2zb4m Год назад
初めて講座系の動画で勉強しました。 話も聞き取りやすく、そして分かりやすかったです。
@webit7652
@webit7652 Год назад
ありがたやです!
@NM-qx8xv
@NM-qx8xv 2 года назад
すごいなあ、この動画っ! 最高ですよ! コンピューターと会話できるようになれるっ!! ありがとうございます!
@webit7652
@webit7652 2 года назад
恐縮です!!
@3nr088
@3nr088 2 года назад
cssもありがとうございます
@webit7652
@webit7652 2 года назад
使ったってください!!
@switchtoanotherone
@switchtoanotherone Год назад
ありがとうございます! インライン要素も同じことが言えますが、ブロック要素の特徴である横ドーンをcssの記述によりインライン要素の横並びに変えられるとしたら、それぞれの特徴について意識してhtmlを書かなくても良いのではないかという印象を受けました。この後からどうにでも変えられるだろうという思考は良くないでしょうか?
@OO-xu9ul
@OO-xu9ul 6 месяцев назад
他の先生のUdemy講座も取りましたが、この動画は1時間半でコンパクトに重要な部分をまとめてくださってありがたいです!
@webit7652
@webit7652 6 месяцев назад
嬉しい感想ありがとうございます😭
@aiai-in5lr
@aiai-in5lr 11 месяцев назад
簡潔なのにすごく分かりやすくて助かりました(;_;) ありがとうございます!
@user-uu2br2gs7f
@user-uu2br2gs7f Год назад
恥ずかしながらン十年前に趣味で同人サイトの運営をしていて、その時にHTMLは本を片手に何とかなったんですがCSSで挫折して市販のソフトに逃げてしまいましたが、最初からこっちらの動画を拝見したら尚更自分の事は自分でしなくちゃ!と思い地味サイトにもちょっと彩りが加わりました。 解り易くありがとうございましたm(_ _"m)
@bztv9288
@bztv9288 11 месяцев назад
必要な人に必要な教育素材です
@webit7652
@webit7652 11 месяцев назад
☺️☺️☺️
@KentaroxKondo
@KentaroxKondo 2 года назад
やったーーーー!!
@webit7652
@webit7652 2 года назад
いえーい
@user-qc7dj3qq4r
@user-qc7dj3qq4r Год назад
①ヘッドにリンクタグを入れて、スタイルシートを作る ②スタイルシートの中で、どのHTMLに(セレクター)どのような(プロパティ)種類(プロパティの値)の装飾を入れるかを書き込む
@7zk47
@7zk47 2 года назад
コメントするか迷ったのですが、未来の自分が見るかもなので一応。 アプリ活用させて貰ってます。ありがとうございます。 5/23からプログラミング初めて、楽しくて仕方なかったのでIT企業に飛び込むために転職活動中です。 んで、ついさっき二次面接受けてきました。 ①HTML/CSS一通りとJSが少し分かります。(ポートフォリオも見せました) ②仕事できるなら選びません。チャンスがあるなら掴みに行きます。 ③仕事させて頂けるなら言語、バックフロントインフラは問いませんしやれと言われればやります の3つを根本として面接受けてきました。 内定取れたらいいなぁ(白目)
@webit7652
@webit7652 2 года назад
アプリ使ってくれているとは…!ありがとうございます!!
@haruymth
@haruymth Год назад
15:56 ぐらいのパスの設定ってドットスラッシュ(./)とスラッシュのみ(/)って同じですか?
@YOUYOU-ey2ug
@YOUYOU-ey2ug 6 месяцев назад
凄くわかりやすく、勉強になりました。 その中で1つ気になったのですが、なぜbackground-colorは、redやblueなどの入力じゃ良くないのでしょうか? 細かな色ならば16進数でいいかと思いますが、#FFFと書くよりも、whiteと書いた方がわかりやすいかと思い、気になったので質問しました。
@repopo
@repopo Месяц назад
白って200色あんねん()
@kohei1218
@kohei1218 2 года назад
kintoneでCSSを使っているのですが、 詳細画面と編集画面でテーブルに入っているタイトル項目の幅を狭めようとしたのですが、編集画面だけできません。widthなど幅を使うものは使って、importantも使ったのですができませんでした。編集画面ではできないのでしょうか?ちなみに狭めようとしているフィールドはユーザー選択と組織です。
@webit7652
@webit7652 2 года назад
KintoneはOSSじゃないし中の人に聞いた方がええと思うで!
@user-ke4mr9uq1p
@user-ke4mr9uq1p 2 года назад
本読んで色々勉強してましたが、途中からなんかよくわからなくなって、先生のとこ来ました!よろしくお願いします!
@webit7652
@webit7652 2 года назад
ようこそ!
@user-qc7dj3qq4r
@user-qc7dj3qq4r Год назад
CSS①HTMのボディにスタイルタグ②スタイルの中にインライン ③head中にリンクタグを使う rel="styleseet"どのようなリソースか href="./style.css”リソースのある場所
@user-qc7dj3qq4r
@user-qc7dj3qq4r Год назад
②は、ボディ中にHTMLのように書けるからピンポイントでデザインを付けたいときに使いやすいけど長い
@design_yoshimi
@design_yoshimi 11 месяцев назад
50:19 問題コピペ用です。 - 「.abc」に {color: red;} - 「h1 でかつ、.headline」に {color: red;} - 「.abc」の子要素すべてに {color: red;} - 「.abc」の直下の子要素の隣のpタグのみに {color: red;} - 「.abc」の直下の タグのみにカーソルを乗せてた時だけ {color: red;}
@user-qc7dj3qq4r
@user-qc7dj3qq4r Год назад
p(セレクター){ 中かっこ   color(プロパティ) :red(プロパティの値); ←コロン×2,ラストはセミコロン }  中かっこ閉じ
@stelonetv3023
@stelonetv3023 Год назад
1時間4分のmax widthのところでコード通りやったけど適用されませんでした。なぜですか?
@syo5724
@syo5724 2 года назад
セイトさんにお供できる存在になりたい!
@webit7652
@webit7652 2 года назад
お供!😂
@world-ikarashi
@world-ikarashi Год назад
vscodeをChromebookのパソコンでは使えないですか?Chromebook用のWebmakerというのを使って実践しているのですが、まだ初心者なので、Chromeでオススメあれば教えて下さい!
@webit7652
@webit7652 Год назад
Mac/Windowsなどふつーの王道なPCがいいですよー タブレットとかChromebookとかだとコーディングしてる人が少なすぎて情報あんまりないです!僕もわかりません!
@world-ikarashi
@world-ikarashi Год назад
@@webit7652 ありがとうございます!! Chromeでどこまでできるかもっと調べてみます。
@3sukonb
@3sukonb 8 месяцев назад
vs codeの拡張機能を検索しても何故か検索されないのですが、対処法を教えてください。
@chun.a.5330
@chun.a.5330 2 года назад
全く関係なくて恐縮なのですが、新卒就活についてご意見をお聞かせください。 現在、大手SIerの子会社と、独立系組み込みソフトウェアの会社から内定を頂いていて、どちらかに就職しようと考えています。 将来性やスキルの観点から、組み込みの方に気持ちがありますが、福利厚生でかなり劣っており、組み込みの方に就職することに不安があります。 組み込みエンジニアの市場価値や将来性が◎であれば、下積みだと思って頑張ろうと思いますが、一方で大手のSIerの業務でも転職等で武器になるスキルが身につくのであれば、前者でもいいかなと思っています。 質問は2つで、 ①大手のSIerの業務と、組み込みの自社製品や受託の開発を行う業務とでは、身につくスキルや経験の価値にどれくらい差があるとおもいますか。 ②組み込みエンジニアは一般のSEに比べて、現在と今後の待遇や市場価値は伸びる/凹むと思いますか。 長くなってしまい、申し訳ありません。セイトさん、視聴者の皆さんのご意見をいただけると幸いです。
@webit7652
@webit7652 2 года назад
明日ライブするので、そこで聞いてくれたら答えましょうw
@chun.a.5330
@chun.a.5330 2 года назад
@@webit7652 わかりました! ご返信ありがとうございます
@Knokiwami
@Knokiwami Год назад
同じ手順で同じことをしているのですが、htmlでもcssでも属性がが反映されません。 入力できるのですが、属性の色である水色のコードにならず、カラーやフォントサイズを選んでも反映されないのですが、考えられる間違えとして何がありますかね? ちなみに{}これとかはしっかり使ってます。
@user-qk2ek7kn8x
@user-qk2ek7kn8x Год назад
もしかして idとかになってません?
@user-kh9gm4eu9l
@user-kh9gm4eu9l Год назад
コメント失礼します。同じ方法でvscodeでやろうとしたのですがindex.htmlのファイルにChromeマークがつかず、編集したものが確認できません😢
@eeeg
@eeeg 5 месяцев назад
右クリック、アプリケーションで開く
@maru2216
@maru2216 2 года назад
いつも勉強してます、ありがとうございます! 動画の最初にプロモーションと表示されますが、なんかの提供なのかな?といつも思っていて疑問でした!
@webit7652
@webit7652 2 года назад
自社広告でも表紙必要なんです><
@maru2216
@maru2216 2 года назад
@@webit7652 なるほど!ありがとうございます!
@hmisono9965
@hmisono9965 Год назад
こちらの動画を拝見した後に書籍を読みつつ手を動かしながら勉強していると頭に入ってきて本当にありがたいです。今回のCSSも同様に進めていこうかと思いますが、+αでやったほうが良いことがあれば教えていただきたいです。単語帳で用語を覚えるとか?なのか…よろしくお願いします
@webit7652
@webit7652 Год назад
とにかくつくる!アウトプット命!です
@hmisono9965
@hmisono9965 Год назад
@@webit7652 お忙しいところありがとうございます。 場数をこなして実践力を鍛えろってことですね。ど素人ですが、とりあえず今月簡単なHPが作れるようになる事が目標です。 また悩んだら相談させて下さい。 よろしくお願いしますm(_ _)m
@inte3191
@inte3191 Год назад
自分用 44:48
@user-uc8he1cc9w
@user-uc8he1cc9w 2 года назад
コメント失礼します!この動画を有効活用させていただきたいのですが、一通り動画を見るタイプなのか 一緒にコードを書いていくタイプなのかわかりません。見るフェーズと実践するフェーズをもっと明確にしていただけると助かります!わがまま言ってすみません🙇‍♂️
@snissy2154
@snissy2154 2 года назад
どうでも良くて草
@webit7652
@webit7652 2 года назад
好きなように使ってくれていいすよ!w
@user-hy9bz4np2v
@user-hy9bz4np2v 2 года назад
プログラミング以前に勉強する事自体が向いてなさそうなコメントや。。。
@user-cb6fy1lh6c
@user-cb6fy1lh6c 10 месяцев назад
35:00背景画像入れ方
@user-Fav123
@user-Fav123 10 месяцев назад
11:45 16:00
@user-pi9xx4qy8r
@user-pi9xx4qy8r Год назад
自分用 50:26 テスト
@user-tt6iq4zn2e
@user-tt6iq4zn2e 2 месяца назад
21:51
@uuii2437
@uuii2437 Год назад
23:24 margin !!!!!!!
@stelonetv3023
@stelonetv3023 Год назад
58分のところで、Pタグだけでカラーをブルーに設定して、インポータントを設定しても色がブルーバイオレットのままでした。 動画の通りになりませんでした。
@Gbo_tt
@Gbo_tt 2 года назад
先生、Javaをやる予定は…
@webit7652
@webit7652 2 года назад
Javaは詳しくはないんす…ごめん🥺
@KS-rn3qc
@KS-rn3qc 2 года назад
CSSはプログラミングではありません
@webit7652
@webit7652 2 года назад
はい、そうですね!
@Gbo_tt
@Gbo_tt 2 года назад
そうだったのか
Далее
Июль в Tanks Blitz
51:46
Просмотров 89 тыс.
🤘РОК или ПОП?💖
3:20:26
Просмотров 1,7 млн
KINDNESS ALWAYS COME BACK
0:59
Просмотров 52 млн
NEGA XECHKIM LAYK BOSMAYDI
0:14
Просмотров 3,3 млн