【style.cssサンプル】です。 html{ font-size } body{ margin: 0; } .normal{ background: coral; } .box{ background: pink; /* content box */ /* width: 200px; */ /* height: 200px; */ /* Padding box */ /* padding: 8px 12px 16px 20px; */ /* Margin box */ /* margin: 8px 12px 16px 20px; */ /* Border box */ /* border: 5px solid black; */ } .margin{ background: lightblue; /* margin-top: 20px; */ } div,span{ background: orange; /* width: 100px; height: 100px; */ } /* padding, margin, border の挙動 / inline-block */ .example{ background: pink; padding: 20px; } .example span{ margin: 20px; border: 1px solid black; padding: 20px; background: lightgreen; }

本当にわかりやすいです！毎朝みています！

大変勉強になりました！ ありがとございます！！

分かりやすかったです！

毎回かなり分かりやすくて助かります。プログラミング勉強始めたばかりなので、しまぶーさんの動画たくさん見て勉強します！

めっちゃわかりやすいです❗️ ありがとうございます😀

物凄い勉強になります、ありがたいです。

プロゲートだけでは理解が難しかったのですが、この動画で理解できました！ ありがとうございました！繰り返し見て勉強します！

すごく分かりやすいです💛 理解できていなかったことが、理解できました。 ありがとうございます✨

待ってました！！

@shimabu_it

4 жыл бұрын

待たれてました！！🤣 ありがとう😊

thank you ! I'm having fun studying

プロゲートだけではここは理解できなかったのですが、この動画でやっと理解できました！！ ありがとうございました！！

分かりやすすぎます！ これからもよろしくお願い致します！

@shimabu_it

4 жыл бұрын

コメントありがとうございます！ 嬉しすぎるコメントでモチベーション上がります💪 こちらこそ、これからもよろしくお願いします😊

沢山のことを知ることが出来てうれしいです。＊

独学でやってて、重要な概念だとは感じつつもいまいち理解できていなかったんですが、 この動画でめっちゃ詳しく解説してもらってすごい助かりました。 手を動かして理解を深めていこうと思います！

分かりやすくて、とても有益

@shimabu_it

4 жыл бұрын

ありがとうございます！ 嬉しすぎる評価です😊✨

毎度わかりやすくてためになっております。ありがとうございます。

@shimabu_it

3 жыл бұрын

嬉しいコメントをありがとうございます！🙏 動画制作のやる気が上がります🔥

本当にわかりやすいです。モヤモヤが晴れました。 ありがとうございます。

@shimabu_it

3 жыл бұрын

コメントありがとうございますー！ モヤモヤ→スッキリなったようで良かったです😊

ほんとにありがたい！続けて欲しい！

@shimabu_it

4 жыл бұрын

ありがとうございます！もちろん続けます！！ むしろ伝えたいことありすぎて自分の時間が足りなくて困るぐらいです。有益な動画をもっと量産しまくりたい・・・🥺

いつもわかりやすい説明ありがとうございます。独学勢の味方👏

@shimabu_it

4 жыл бұрын

私も独学勢だったので気持ち分かります！ 有料化などもまったく考えていないのでご心配なく！🤣笑 今後も学びになる動画を出していきます！

いろいろなサイトや本で学習しましたがダントツで理解しやすかったです。ありがとうございます👍

学校の教材よりわかりやすかったです。参照先や参照先の見方等も触れてくれるので　一人でやっていてつまずいた時にも対応できてありがたいです。

わかりやす過ぎて動画見ただけで満足してしまう。アウトプットもしなきゃですね

@shimabu_it

4 жыл бұрын

超嬉しいコメントですが、満足はダメですー！！🔥 アウトプット第一でいきましょう😊✨

勉強させてもらいます。

@shimabu_it

4 жыл бұрын

ぜひぜひみんなで学んでいきましょうー！😁

KZreadでいちばん分かりやすい✨ 初心者でも理解しやすい😁

@shimabu_it

4 жыл бұрын

嬉しすぎるでしょ・・・ このコメントに100件ぐらい高評価したい👍👍👍👍👍👍👍👍👍👍

inline、block、inline-block とてもわかりやすかったです🥰 ありがとうございました！

わかりやすい、超

@shimabu_it

4 жыл бұрын

嬉しいコメントです、超

この手の動画を比較してみたら断トツでわかりやすかった。

説明が分かりやすかったです。探してた動画だって感想です。

@shimabu_it

3 жыл бұрын

ありがとうございます〜！！嬉しいです！！😊

とても分かりやすかったです！スクールの課題講座でimgがはみ出ていてなぜか分からなかったのですが、修正できそうです。ありがとうございました。

とても勉強になります。imgタグにwidth,heightが効かない理由とか理解できました。

インライン要素とブロック要素の違いが全然分からなかったのですが、これみてすごく分かりやすかったです😭ありがとうございます！！

別の動画にもコメントしましたが、レイアウトが苦手で「思い通りに動かない」と感じることが多くあります。 今日もありがとうございます！ しまぶー先生！

@shimabu_it

4 жыл бұрын

レイアウトするときはすべての要素にbackground-colorをつけながらコーディングすることをオススメします。影響範囲が明確に分かるので、レイアウト力が格段に上がりますよ！

解説が分かりやすいです。 プログラミングスクールも。このくらい真面目にテキスト作って欲しい！

ボックスモデルとインライン、ブロック要素などの挙動の理解に苦しんでいた（特にmargin）のですが、一気に理解が深まりました！ 本当に感謝いたしますm(_ _)m

めちゃくちゃ分かりやすくて助けられてます！！ いい動画をありがとうございます！

政府でやってるWEB職業訓練校よりレベルが高いと思う

画像をwidthで広げると下の文字と重なってしまう、パディング・マージンも効かない、もっと広げるとコンテンツ幅はみ出して広がるなんでだろうと悩んでた謎が解けました。 ありがとうございます😊

これからITに転職しようとする中国籍の初心者です。今はsalesforceを勉強していますが、周りからhtmlとcssも一緒に勉強した方がいいよとアドバイスくれて、KZreadで探してみたらしまぶーさんの内容がすごくいいと感じています。ありがとうございます。引き続き動画の更新よろしくおねがいします。salesforceについてしまぶーさんなりの見解何かございましたら教えていただきたいです。

いつもわかりやすい動画ありがとうございます。 20:14 で前後のタグを一度に変えているのはどうやっていますか？

いつも勉強になります。 私も神戸大学経営学部です。

復習のつもりで見させて頂きました！ 今回もわかりやすい動画ありがとうございますm(__)m 22:40秒あたりなんですが、img要素とかinput要素ってwidthやhightがインライン要素なのに例外的に効きませんでしたっけ？

@shimabu_it

4 жыл бұрын

いつもコメントありがとうー！😊 ちょっと試してみましたが・・・本当ですね😳😳😳 見た感じinput要素はデフォルトでinline-blockのようです。なのでこちらがwidth, heightが効くのは分かりました。 imgはMDNリファレンスには下記のように書かれていました。なので例外的なプロパティな気はしますね。ちなみに実はボックスモデルには外側・内側の概念があって、内部実装的にはそちらの概念が絡んでくるのかなーとは思いました。余談すぎますが。 ``` は置換要素です。 display の値が既定で inline ですが、既定の寸法は埋め込まれた画像の内部的な値で定義されます。画像には border/border-radius, padding/margin, width, height, などのプロパティを設定することができます。 ``` 私も学びになりました。ありがとうございます！

いつもわかりやすい動画をありがとうございます＾＾ inlineとblockのこと、displayでの指定の意味、理解しました。 サイトのクローンなどをしていたときにこの辺りの意味をきちんと理解していなかったです・・。 何となく表示を合わせてしまっていて、ページの拡縮によって崩れる理由がいまいち掴めていませんでした。 すべてではないですが、今回のinline、blockの特製を理解していなかったことが大きいかったことがわかりました。

分かりやすい解説ありがとうございます。動画の趣旨とは少しズレるのですが、細かなvscodeの操作方法について 教えていただきたいです。 16：29あたりに出てきた、コピペの方法。（単純な⌘p→⌘vでは実現できない気がします。） 24：05あたりに出てきた、複数箇所の編集。 このような操作方法は、「vscode　効率　操作」みたいな感じで検索しても、いまいちヒットしません。。。 その他、ちょこちょこ細かい箇所で気になる操作方法があったので、別途質問させて頂ければ幸いです。

動画の様に2画面(左にブラウザ表示、右にディベロッパーツール)にするやり方を教えてください！

@shimabu_it

4 жыл бұрын

説明が難しいですが右上の３点リーダを押せば場所の設定ができます！実はChrome DevToolsの動画も出してて、めちゃくちゃ学びになるかと思うので良ければご覧ください！😊 kzread.info/dash/bejne/k6uGzaicppiXopc.html

プログラミング勉強し始めて2週間です。挫折しそうになったときにしまぶーさんの動画に出会いました。まだまだ頑張れそうな気になりました！ありがとうございます！ いろいろ勉強させて頂きますm(._.)m

@shimabu_it

4 жыл бұрын

おおー良かったですー！2週間の挫折は早いですよ！プログラミングは１番最初が難しいので、ぜひもう少し続けてみて欲しいなと思います。自走できる状態になるとかなり楽になるので目指すはそこですね！😊

webデザイナーになりたくて、VSCodeの紹介からHTML、CSSと順にみて学んでいます。 質問です。パネルにあるマージン情報はどう設定すれば表示されますか。機能拡張でしょうか。

今まさに模写コーディングでめっちゃ詰まってます。。💦margin相殺とか知らなかったり、imgにwidth指定とかしてたかも…だから「CSSきかない💦」が多かったのかと思い始めました(^_^； しっかり勉強させていただきます

Chrome DevTools　は以前の動画で言ったということですが、どの動画になるのでしょうか？

マージンの相殺が発生する場合、書き方としてbottom-topで書くべき、bottom-downで書くべきなどありますか？

質問です。下記のソース（"box-sizing:border-box"のデフォルト設定）はリセットCSSに入れて使っても（もちろん例外はあると思いますが一般的に）差し支えないでしょうか？ 自分でテストした限りだと使えるようだったんですが。 html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; }

div tag を block box、span tag を inline box とおっしゃっていますが block box, inline box の種類の一つとしてそれぞれ div, span があるという理解であっていますでしょうか??

お尋ねしたいことがあります。 「私はブロックです」のdivタグを動画と同じようにをコピペしたところブロック間に隙間ができました。 ネットで調べた結果divタグをエディター上で1行で書くことで隙間はなくなりましたが、これってほかに改善方法はありますか？

◎ボックスモデル ●ボックスモデルの基本　 ・contentbox→width × height 　*width *height ・padding 　上、右、下、左の順で 　content box〜borderまで余白 ・margin 他の要素に空ける余白 ※marginの相殺 　paddingとmarginで余白の指示が 　重複するとき、大きい方が採用される　 ・border 　paddingとmarginの間に入る ※marginについての、寸法 　→contentbox + border + margin ・box-siziengプロパティ ※ショートハンド 　省略記法のこと 　→上、右、下、左で余白などの寸法を 　　決める ●ブロックとインライン 違い3点 divタグ→ブロックタグ 　　　　・改行する ・width height 有効 spanタグ→インラインタグ 　　　　・改行されない 　　　　・width height 無効 　　　　・margin/padding/border 有効だが、スタイルが崩れる 　　　　　→上書きされてしまうから ●ブロックボックスとインラインボックスの 　要素 出てきたタイミングで覚える ♪imageボックスはインラインボックス で意外だった

imgにwidthが当てられたんですが、これは何故でしょうか。インラインのはずなのに。あと最近毎日動画見て勉強してます。

とても丁寧な解説ありがとうございます😊 コードのコピーが出来るリンクを作成されるご予定はございますか？

@shimabu_it

4 жыл бұрын

！？！？！？ それは非常に有益すぎる・・・！！😳 なんで自分でもそれをやらなかったのか不思議で仕方ありません・・・ キリよくJavaScript講座やCSS実践講座からコードがコピーできるようにします！ 気づきをありがとうございます！控えめに言って神に感じました🙇‍👼

@up-ug2li

4 жыл бұрын

神に、神って言われた(^^;; 私は、初学者なので、コードを真似させて頂いても タイプミスしちゃうから、エラーになりそこで止まってしまいます(Ｔ＿Ｔ) なので、わがままですがリクエストさせて頂きました。 よろしくお願いします。

15:15辺りのコメントの削除はどうやってしたのですか？

動画とてもわかり易いです！ 調べてもわからなかったので失礼します、 16:28から行っているコピペ方法はどのショートカットキーでできますか？

@shimabu_it

2 жыл бұрын

何も選択せずにCmd + Cするといけます！ Windowsの場合はおそらくCtrl + Cですね！

@owakonch

2 жыл бұрын

@@shimabu_it ありがとうございます！！

アウトプットの意味も込めてこちらの動画を参考にさせていただき、noteなどにまとめた内容を公開しても問題ないでしょうか？

@shimabu_it

3 жыл бұрын

はい、問題ありません！！ アウトプット素晴らしいです👍✨

@user-ws3ge2uy9u

3 жыл бұрын

@@shimabu_it ありがとうございます！！

開始タグと終了タグの中身を同時に変更してるやり方を教えてください。

@shimabu_it

4 жыл бұрын

「Command + d」で同じ単語を複数選択できます！ぜひぜひ使ってみてください！

@user-dh8gc7gj9d

4 жыл бұрын

しまぶーのIT大学 めっちゃ助かります！！

プログラミングを勉強するなら Progate,ドットインストール＜しまぶーの動画👍

MDNサイトに、「ブロックレベル要素」のページが見つかりません。どこから開いたですか？

質問です。プログラマーの仕事内容を紹介してるサイトでは、ネットを使って情報収集をしているとゆうことしか聞かないので 本を見ながらコードを書くのはマイナーな方なのでしょうか？

@shimabu_it

4 жыл бұрын

本は勉強のときはありだと思います。マイナーでもないと思いますよ。 実際にサービスを作る際には分からないことが必ず出てくるんですが、そういうのはググらないと解決しないことが多いですね。本ではカバーしきれない範囲の分からないことが必ず出てきます。なので最初は本でも動画でも何でもいいんですが、ある程度基礎を抑えたら、実際にサービスを作りはじめて、分からないことが出てきたらググりまくって解決ということが重要ですね。それが１番成長につながると思います！

自分は課金制が嫌だったので無料のところだけやった後にUdemyという買い切りの動画で学んでいます。周回にこだわるのは良くないのかなぁと思っているんですがしまぶーさんはドットインストールを何周かしたりしましたか？

@yuuttana1223

4 жыл бұрын

ちなみにwww.udemy.com/course/html-css-js/ って言うのをセールのときに買いました。パッと見問題とかありそうですか？

@shimabu_it

4 жыл бұрын

私もわからないポイントは何度も見直しましたよ！周回かどうかにこだわる必要はなく、自分のものにできたかどうかをこだわると良いかと思います。あとは実際に作ってみることですね。作る段階でわからないときに見直したりするほうが、バックグラウンドありで学べるので、より印象に残って自分のスキルとなりやすいです！😊

@yuuttana1223

4 жыл бұрын

しまぶーのIT大学 ありがとうございました。ある程度まで基礎ができたら基礎ばっかりやらず作ってみることにします

@shimabu_it

4 жыл бұрын

@@yuuttana1223 URLつきコメントだったので別のところにあって気づくのが遅れてしまいました。 そちらのUdemyの教材に関して言うと、私は中身は分からないので詳しくは判断できませんが、たにぐちまことさんは信頼できる方だと思っています。KZreadやTwitterでの発信も的確なので、きっと内容も間違いないと私は考えています。そもそもKZreadというオープンな場でコードをしっかり教えている方は私は信頼します。私の憶測にはなってしまいますが、参考になると幸いです。

@yuuttana1223

4 жыл бұрын

しまぶーのIT大学 ありがとうございます。信頼出来るって聞いて安心しました。

webフロントエンドエンジニアでフリーランスになりたいならProgateだと何を学ぶべきですか？

@shimabu_it

4 жыл бұрын

Progateを使ったのが5年以上前で、今のProgateが分からないので適切なアドバイスはできません。パッとProgateのホームページを見た印象で伝えます。 フロントエンド、バックエンド問わず必須なのは下記です。 ・Command Line ・SQL ・Git そして、フロントエンドとして必須で言うと下記でしょう。 ・HTML & CSS ・JavaScript ・React またフロントエンドでもある程度のバックエンドの知識はあった方が良いと思っていて、サーバー側の言語をどれかは学ぶべきだと考えています。フレームワークまで網羅しているという点でRubyが良さそうだと感じだので下記も学んではいかがでしょうか。 ・Ruby ・Ruby on Rails5 という感じです。少しでも参考になると幸いです！

@user-lz3tc7lx6v

4 жыл бұрын

しまぶーのIT大学 ありがとうございます 参考になりました

初めてコメントします。価値ある動画をいつもありがとうございます。 早速ですが、動画の中で、html要素でbox-sizingプロパティを設定して、他の全ての要素でその値を継承するように設定するとmdnに書かれていました。 コードで表現すると、 html{ box-sizing:border-box; } * , *::before,*::after{ box-sizing:inherit } とのことでした。ここで疑問に思ったのですが、わざわざ擬似要素は書かなくてもいいのではと思いました。全称セレクターである＊を書けば、そこに擬似要素や擬似クラスも含まれるのではないですか？ お忙しいと思いますが、返信をいただけると幸いです。

@shimabu_it

Жыл бұрын

そうすると、ある要素（とその疑似要素）だけbox-sizingの値を変更したいとなった場合に、beforeやafterも変更する必要が出てきてしまうからです！ inheritさせることでわざわざ何回も書く必要がなくなります！

box-sizing: border-box; 標準の代替Boxモデルを指定する 打消し要素なしでwidthとheightを適用できる。って理解で大丈夫ですかね。 かなり何回も見てしまった。。。

@shimabu_it

4 жыл бұрын

> 標準の代替Boxモデルを指定する > 打消し要素なしでwidthとheightを適用できる ちょっと逆に自分が分からなくなってしまいました（笑）純粋に、widthやheightの中にborderのサイズが含まれると思っていただいて良いかと思います。あまり深い意味はなく、要素のサイズを知るときに width + border で考えるより、width だけで考えたいよねっていう話です！

@user-sheephuman

4 жыл бұрын

@@shimabu_it ありがとうございます。すっきりしました！

登録者2日に1000人ぐらい増えてる気がする🎉 1000人ぐらいの頃から見てたので古参名乗っていいですか？😎

@shimabu_it

4 жыл бұрын

🧛‍♂️よろしい・・・古参を名乗るのを許可しよう

@shimabu_it

4 жыл бұрын

惜しいです。3日で1000人ぐらいです😆 それでも想像以上で毎日たくさんの人に登録していただいてビックリ...。

第何回までの予定ですか？

@shimabu_it

4 жыл бұрын

CSS基礎は7or8までを予定しています。そこからはCSS実践ということでよく使われるレイアウトを作っていこうと考えています。 またCSS基礎が終えた段階で、JavaScriptについても始めていく予定で、JavaScriptとCSS実践を同時並行で進めていこうと考えています！

@user-uw9cw1ss7d

4 жыл бұрын

しまぶーのIT大学 分かりました！本当に助かってます！

１度で理解できないので何回も見なきゃ

関係なくて申し訳ないですが 個人的にcssにてfixedが使いこなせません、、 中央揃えしようとしても左上に固定されてしまうのです、、

@shimabu_it

4 жыл бұрын

コードを見ないと分かりませんが、fixedすると階層が一段階変わります。おそらくそれが原因なのかなーと思ったり・・・。 あとオススメなのは背景色をつけることです！背景色をつけると、自分がつけているスタイルの範囲が明確になるので、問題の原因を特定しやすいです！ぜひbackground-colorを設定してみて、いろいろチャレンジしてみてください！😉

@shimabu_it

4 жыл бұрын

あら、fixedとflexboxを空目しているかも！？🤣 綴りが似ていますよね笑

@user-ym1qv9qk7e

4 жыл бұрын

しまぶーのIT大学 なるほど、、 試行錯誤してみます、 ありがとうございます！

@shimabu_it

4 жыл бұрын

@@user-ym1qv9qk7e どうしても分からなくなったらまた質問してくださいね！そのときはGitHubなどでコードを見せていただけると解決できるかもしれません！（レスはだいぶ遅くなる可能性がありますが😓） GitHub Pagesを使う動画で解説していますので！ kzread.info/dash/bejne/nZqo06OrmdeuqcY.html

@user-ym1qv9qk7e

4 жыл бұрын

しまぶーのIT大学 丁寧な対応ありがとうございます。 陰ながら応援しております！

現在、医療系大学院生です 頑張ります

妹があんざきに包丁で刺された

初心者さんからしたら早口で全然配慮がなされて無いと思われますよ

@mame6755

4 жыл бұрын

画面右上のボタンで、再生速度を変えられますよ！

うーん、自分ならこんなまわりくどい説明しないと思う。 Paddingってこういうものです。 Margin ってこうです。 なんでもっと Straightforward に説明できんものかね