Розмір відео: 1280 X 720853 X 480640 X 360
Показувати елементи керування програвачем
Автоматичне відтворення
Автоповтор
【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;}
いろいろなサイトや本で学習しましたがダントツで理解しやすかったです。ありがとうございます👍
inline、block、inline-block とてもわかりやすかったです🥰 ありがとうございました！
UA-camでいちばん分かりやすい✨初心者でも理解しやすい😁
嬉しすぎるでしょ・・・このコメントに100件ぐらい高評価したい👍👍👍👍👍👍👍👍👍👍
インライン要素とブロック要素の違いが全然分からなかったのですが、これみてすごく分かりやすかったです😭ありがとうございます！！
この手の動画を比較してみたら断トツでわかりやすかった。
画像をwidthで広げると下の文字と重なってしまう、パディング・マージンも効かない、もっと広げるとコンテンツ幅はみ出して広がるなんでだろうと悩んでた謎が解けました。ありがとうございます😊
独学でやってて、重要な概念だとは感じつつもいまいち理解できていなかったんですが、この動画でめっちゃ詳しく解説してもらってすごい助かりました。手を動かして理解を深めていこうと思います！
政府でやってるWEB職業訓練校よりレベルが高いと思う
とても分かりやすかったです！スクールの課題講座でimgがはみ出ていてなぜか分からなかったのですが、修正できそうです。ありがとうございました。
わかりやす過ぎて動画見ただけで満足してしまう。アウトプットもしなきゃですね
超嬉しいコメントですが、満足はダメですー！！🔥アウトプット第一でいきましょう😊✨
別の動画にもコメントしましたが、レイアウトが苦手で「思い通りに動かない」と感じることが多くあります。今日もありがとうございます！しまぶー先生！
レイアウトするときはすべての要素にbackground-colorをつけながらコーディングすることをオススメします。影響範囲が明確に分かるので、レイアウト力が格段に上がりますよ！
学校の教材よりわかりやすかったです。参照先や参照先の見方等も触れてくれるので 一人でやっていてつまずいた時にも対応できてありがたいです。
これからITに転職しようとする中国籍の初心者です。今はsalesforceを勉強していますが、周りからhtmlとcssも一緒に勉強した方がいいよとアドバイスくれて、UA-camで探してみたらしまぶーさんの内容がすごくいいと感じています。ありがとうございます。引き続き動画の更新よろしくおねがいします。salesforceについてしまぶーさんなりの見解何かございましたら教えていただきたいです。
説明が分かりやすかったです。探してた動画だって感想です。
ありがとうございます〜！！嬉しいです！！😊
いつも勉強になります。私も神戸大学経営学部です。
本当にわかりやすいです。モヤモヤが晴れました。ありがとうございます。
コメントありがとうございますー！モヤモヤ→スッキリなったようで良かったです😊
ほんとにありがたい！続けて欲しい！
ありがとうございます！もちろん続けます！！むしろ伝えたいことありすぎて自分の時間が足りなくて困るぐらいです。有益な動画をもっと量産しまくりたい・・・🥺
とても勉強になります。imgタグにwidth,heightが効かない理由とか理解できました。
いつもわかりやすい説明ありがとうございます。独学勢の味方👏
私も独学勢だったので気持ち分かります！有料化などもまったく考えていないのでご心配なく！🤣笑今後も学びになる動画を出していきます！
毎度わかりやすくてためになっております。ありがとうございます。
嬉しいコメントをありがとうございます！🙏動画制作のやる気が上がります🔥
すごく分かりやすいです💛理解できていなかったことが、理解できました。ありがとうございます✨
沢山のことを知ることが出来てうれしいです。＊
プロゲートだけではここは理解できなかったのですが、この動画でやっと理解できました！！ありがとうございました！！
勉強させてもらいます。
ぜひぜひみんなで学んでいきましょうー！😁
分かりやすくて、とても有益
ありがとうございます！嬉しすぎる評価です😊✨
ボックスモデルとインライン、ブロック要素などの挙動の理解に苦しんでいた（特にmargin）のですが、一気に理解が深まりました！本当に感謝いたしますm(_ _)m
解説が分かりやすいです。プログラミングスクールも。このくらい真面目にテキスト作って欲しい！
毎回かなり分かりやすくて助かります。プログラミング勉強始めたばかりなので、しまぶーさんの動画たくさん見て勉強します！
分かりやすすぎます！これからもよろしくお願い致します！
コメントありがとうございます！嬉しすぎるコメントでモチベーション上がります💪こちらこそ、これからもよろしくお願いします😊
プロゲートだけでは理解が難しかったのですが、この動画で理解できました！ありがとうございました！繰り返し見て勉強します！
物凄い勉強になります、ありがたいです。
本当にわかりやすいです！毎朝みています！
分かりやすかったです！
めっちゃわかりやすいです❗️ありがとうございます😀
待ってました！！
待たれてました！！🤣ありがとう😊
thank you ! I'm having fun studying
◎ボックスモデル●ボックスモデルの基本 ・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ボックスはインラインボックスで意外だった
大変勉強になりました！ありがとございます！！
復習のつもりで見させて頂きました！今回もわかりやすい動画ありがとうございますm(__)m22:40秒あたりなんですが、img要素とかinput要素ってwidthやhightがインライン要素なのに例外的に効きませんでしたっけ？
いつもコメントありがとうー！😊ちょっと試してみましたが・・・本当ですね😳😳😳見た感じinput要素はデフォルトでinline-blockのようです。なのでこちらがwidth, heightが効くのは分かりました。imgはMDNリファレンスには下記のように書かれていました。なので例外的なプロパティな気はしますね。ちなみに実はボックスモデルには外側・内側の概念があって、内部実装的にはそちらの概念が絡んでくるのかなーとは思いました。余談すぎますが。``` は置換要素です。 display の値が既定で inline ですが、既定の寸法は埋め込まれた画像の内部的な値で定義されます。画像には border/border-radius, padding/margin, width, height, などのプロパティを設定することができます。```私も学びになりました。ありがとうございます！
めちゃくちゃ分かりやすくて助けられてます！！いい動画をありがとうございます！
わかりやすい、超
嬉しいコメントです、超
分かりやすい解説ありがとうございます。動画の趣旨とは少しズレるのですが、細かなvscodeの操作方法について教えていただきたいです。16：29あたりに出てきた、コピペの方法。（単純な⌘p→⌘vでは実現できない気がします。）24：05あたりに出てきた、複数箇所の編集。このような操作方法は、「vscode 効率 操作」みたいな感じで検索しても、いまいちヒットしません。。。その他、ちょこちょこ細かい箇所で気になる操作方法があったので、別途質問させて頂ければ幸いです。
いつもわかりやすい動画ありがとうございます。20:14 で前後のタグを一度に変えているのはどうやっていますか？
今まさに模写コーディングでめっちゃ詰まってます。。💦margin相殺とか知らなかったり、imgにwidth指定とかしてたかも…だから「CSSきかない💦」が多かったのかと思い始めました(^_^；しっかり勉強させていただきます
開始タグと終了タグの中身を同時に変更してるやり方を教えてください。
「Command + d」で同じ単語を複数選択できます！ぜひぜひ使ってみてください！
しまぶーのIT大学 めっちゃ助かります！！
動画の様に2画面(左にブラウザ表示、右にディベロッパーツール)にするやり方を教えてください！
説明が難しいですが右上の３点リーダを押せば場所の設定ができます！実はChrome DevToolsの動画も出してて、めちゃくちゃ学びになるかと思うので良ければご覧ください！😊ua-cam.com/video/awRkFcv51r4/v-deo.html
プログラミングを勉強するならProgate,ドットインストール＜しまぶーの動画👍
アウトプットの意味も込めてこちらの動画を参考にさせていただき、noteなどにまとめた内容を公開しても問題ないでしょうか？
はい、問題ありません！！アウトプット素晴らしいです👍✨
@@shimabu_it ありがとうございます！！
初めてコメントします。価値ある動画をいつもありがとうございます。早速ですが、動画の中で、html要素でbox-sizingプロパティを設定して、他の全ての要素でその値を継承するように設定するとmdnに書かれていました。コードで表現すると、html{box-sizing:border-box;}* , *::before,*::after{box-sizing:inherit}とのことでした。ここで疑問に思ったのですが、わざわざ擬似要素は書かなくてもいいのではと思いました。全称セレクターである＊を書けば、そこに擬似要素や擬似クラスも含まれるのではないですか？お忙しいと思いますが、返信をいただけると幸いです。
そうすると、ある要素（とその疑似要素）だけbox-sizingの値を変更したいとなった場合に、beforeやafterも変更する必要が出てきてしまうからです！inheritさせることでわざわざ何回も書く必要がなくなります！
いつもわかりやすい動画をありがとうございます＾＾inlineとblockのこと、displayでの指定の意味、理解しました。サイトのクローンなどをしていたときにこの辺りの意味をきちんと理解していなかったです・・。何となく表示を合わせてしまっていて、ページの拡縮によって崩れる理由がいまいち掴めていませんでした。すべてではないですが、今回のinline、blockの特製を理解していなかったことが大きいかったことがわかりました。
動画とてもわかり易いです！調べてもわからなかったので失礼します、 16:28から行っているコピペ方法はどのショートカットキーでできますか？
何も選択せずにCmd + Cするといけます！Windowsの場合はおそらくCtrl + Cですね！
マージンの相殺が発生する場合、書き方としてbottom-topで書くべき、bottom-downで書くべきなどありますか？
webデザイナーになりたくて、VSCodeの紹介からHTML、CSSと順にみて学んでいます。質問です。パネルにあるマージン情報はどう設定すれば表示されますか。機能拡張でしょうか。
質問です。プログラマーの仕事内容を紹介してるサイトでは、ネットを使って情報収集をしているとゆうことしか聞かないので本を見ながらコードを書くのはマイナーな方なのでしょうか？
本は勉強のときはありだと思います。マイナーでもないと思いますよ。実際にサービスを作る際には分からないことが必ず出てくるんですが、そういうのはググらないと解決しないことが多いですね。本ではカバーしきれない範囲の分からないことが必ず出てきます。なので最初は本でも動画でも何でもいいんですが、ある程度基礎を抑えたら、実際にサービスを作りはじめて、分からないことが出てきたらググりまくって解決ということが重要ですね。それが１番成長につながると思います！
１度で理解できないので何回も見なきゃ
質問です。下記のソース（"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 があるという理解であっていますでしょうか??
imgにwidthが当てられたんですが、これは何故でしょうか。インラインのはずなのに。あと最近毎日動画見て勉強してます。
Chrome DevTools は以前の動画で言ったということですが、どの動画になるのでしょうか？
お尋ねしたいことがあります。「私はブロックです」のdivタグを動画と同じようにをコピペしたところブロック間に隙間ができました。ネットで調べた結果divタグをエディター上で1行で書くことで隙間はなくなりましたが、これってほかに改善方法はありますか？
とても丁寧な解説ありがとうございます😊コードのコピーが出来るリンクを作成されるご予定はございますか？
！？！？！？それは非常に有益すぎる・・・！！😳なんで自分でもそれをやらなかったのか不思議で仕方ありません・・・キリよくJavaScript講座やCSS実践講座からコードがコピーできるようにします！気づきをありがとうございます！控えめに言って神に感じました🙇👼
神に、神って言われた(^^;;私は、初学者なので、コードを真似させて頂いてもタイプミスしちゃうから、エラーになりそこで止まってしまいます(Ｔ＿Ｔ)なので、わがままですがリクエストさせて頂きました。よろしくお願いします。
プログラミング勉強し始めて2週間です。挫折しそうになったときにしまぶーさんの動画に出会いました。まだまだ頑張れそうな気になりました！ありがとうございます！いろいろ勉強させて頂きますm(._.)m
おおー良かったですー！2週間の挫折は早いですよ！プログラミングは１番最初が難しいので、ぜひもう少し続けてみて欲しいなと思います。自走できる状態になるとかなり楽になるので目指すはそこですね！😊
webフロントエンドエンジニアでフリーランスになりたいならProgateだと何を学ぶべきですか？
Progateを使ったのが5年以上前で、今のProgateが分からないので適切なアドバイスはできません。パッとProgateのホームページを見た印象で伝えます。フロントエンド、バックエンド問わず必須なのは下記です。・Command Line・SQL・Gitそして、フロントエンドとして必須で言うと下記でしょう。・HTML & CSS・JavaScript・Reactまたフロントエンドでもある程度のバックエンドの知識はあった方が良いと思っていて、サーバー側の言語をどれかは学ぶべきだと考えています。フレームワークまで網羅しているという点でRubyが良さそうだと感じだので下記も学んではいかがでしょうか。・Ruby・Ruby on Rails5という感じです。少しでも参考になると幸いです！
しまぶーのIT大学 ありがとうございます参考になりました
自分は課金制が嫌だったので無料のところだけやった後にUdemyという買い切りの動画で学んでいます。周回にこだわるのは良くないのかなぁと思っているんですがしまぶーさんはドットインストールを何周かしたりしましたか？
ちなみにwww.udemy.com/course/html-css-js/ って言うのをセールのときに買いました。パッと見問題とかありそうですか？
私もわからないポイントは何度も見直しましたよ！周回かどうかにこだわる必要はなく、自分のものにできたかどうかをこだわると良いかと思います。あとは実際に作ってみることですね。作る段階でわからないときに見直したりするほうが、バックグラウンドありで学べるので、より印象に残って自分のスキルとなりやすいです！😊
しまぶーのIT大学 ありがとうございました。ある程度まで基礎ができたら基礎ばっかりやらず作ってみることにします
@@yuuttana1223 URLつきコメントだったので別のところにあって気づくのが遅れてしまいました。そちらのUdemyの教材に関して言うと、私は中身は分からないので詳しくは判断できませんが、たにぐちまことさんは信頼できる方だと思っています。UA-camやTwitterでの発信も的確なので、きっと内容も間違いないと私は考えています。そもそもUA-camというオープンな場でコードをしっかり教えている方は私は信頼します。私の憶測にはなってしまいますが、参考になると幸いです。
しまぶーのIT大学 ありがとうございます。信頼出来るって聞いて安心しました。
box-sizing: border-box;標準の代替Boxモデルを指定する打消し要素なしでwidthとheightを適用できる。って理解で大丈夫ですかね。かなり何回も見てしまった。。。
> 標準の代替Boxモデルを指定する> 打消し要素なしでwidthとheightを適用できるちょっと逆に自分が分からなくなってしまいました（笑）純粋に、widthやheightの中にborderのサイズが含まれると思っていただいて良いかと思います。あまり深い意味はなく、要素のサイズを知るときに width + border で考えるより、width だけで考えたいよねっていう話です！
@@shimabu_it ありがとうございます。すっきりしました！
15:15辺りのコメントの削除はどうやってしたのですか？
MDNサイトに、「ブロックレベル要素」のページが見つかりません。どこから開いたですか？
登録者2日に1000人ぐらい増えてる気がする🎉1000人ぐらいの頃から見てたので古参名乗っていいですか？😎
🧛♂️よろしい・・・古参を名乗るのを許可しよう
惜しいです。3日で1000人ぐらいです😆それでも想像以上で毎日たくさんの人に登録していただいてビックリ...。
関係なくて申し訳ないですが 個人的にcssにてfixedが使いこなせません、、 中央揃えしようとしても左上に固定されてしまうのです、、
コードを見ないと分かりませんが、fixedすると階層が一段階変わります。おそらくそれが原因なのかなーと思ったり・・・。あとオススメなのは背景色をつけることです！背景色をつけると、自分がつけているスタイルの範囲が明確になるので、問題の原因を特定しやすいです！ぜひbackground-colorを設定してみて、いろいろチャレンジしてみてください！😉
あら、fixedとflexboxを空目しているかも！？🤣綴りが似ていますよね笑
しまぶーのIT大学 なるほど、、試行錯誤してみます、 ありがとうございます！
@@user-ym1qv9qk7e どうしても分からなくなったらまた質問してくださいね！そのときはGitHubなどでコードを見せていただけると解決できるかもしれません！（レスはだいぶ遅くなる可能性がありますが😓）GitHub Pagesを使う動画で解説していますので！ua-cam.com/video/kftqAritHyc/v-deo.html
しまぶーのIT大学 丁寧な対応ありがとうございます。陰ながら応援しております！
第何回までの予定ですか？
CSS基礎は7or8までを予定しています。そこからはCSS実践ということでよく使われるレイアウトを作っていこうと考えています。またCSS基礎が終えた段階で、JavaScriptについても始めていく予定で、JavaScriptとCSS実践を同時並行で進めていこうと考えています！
しまぶーのIT大学 分かりました！本当に助かってます！
現在、医療系大学院生です頑張ります
妹があんざきに包丁で刺された
初心者さんからしたら早口で全然配慮がなされて無いと思われますよ
画面右上のボタンで、再生速度を変えられますよ！
うーん、自分ならこんなまわりくどい説明しないと思う。Paddingってこういうものです。Margin ってこうです。なんでもっとStraightforward に説明できんものかね
【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;
}
いろいろなサイトや本で学習しましたがダントツで理解しやすかったです。ありがとうございます👍
inline、block、inline-block とてもわかりやすかったです🥰 ありがとうございました！
UA-camでいちばん分かりやすい✨
初心者でも理解しやすい😁
嬉しすぎるでしょ・・・
このコメントに100件ぐらい高評価したい👍👍👍👍👍👍👍👍👍👍
インライン要素とブロック要素の違いが全然分からなかったのですが、これみてすごく分かりやすかったです😭ありがとうございます！！
この手の動画を比較してみたら断トツでわかりやすかった。
画像をwidthで広げると下の文字と重なってしまう、パディング・マージンも効かない、もっと広げるとコンテンツ幅はみ出して広がるなんでだろうと悩んでた謎が解けました。
ありがとうございます😊
独学でやってて、重要な概念だとは感じつつもいまいち理解できていなかったんですが、
この動画でめっちゃ詳しく解説してもらってすごい助かりました。
手を動かして理解を深めていこうと思います！
政府でやってるWEB職業訓練校よりレベルが高いと思う
とても分かりやすかったです！スクールの課題講座でimgがはみ出ていてなぜか分からなかったのですが、修正できそうです。ありがとうございました。
わかりやす過ぎて動画見ただけで満足してしまう。アウトプットもしなきゃですね
超嬉しいコメントですが、満足はダメですー！！🔥
アウトプット第一でいきましょう😊✨
別の動画にもコメントしましたが、レイアウトが苦手で「思い通りに動かない」と感じることが多くあります。
今日もありがとうございます！
しまぶー先生！
レイアウトするときはすべての要素にbackground-colorをつけながらコーディングすることをオススメします。影響範囲が明確に分かるので、レイアウト力が格段に上がりますよ！
学校の教材よりわかりやすかったです。参照先や参照先の見方等も触れてくれるので 一人でやっていてつまずいた時にも対応できてありがたいです。
これからITに転職しようとする中国籍の初心者です。今はsalesforceを勉強していますが、周りからhtmlとcssも一緒に勉強した方がいいよとアドバイスくれて、UA-camで探してみたらしまぶーさんの内容がすごくいいと感じています。ありがとうございます。引き続き動画の更新よろしくおねがいします。salesforceについてしまぶーさんなりの見解何かございましたら教えていただきたいです。
説明が分かりやすかったです。探してた動画だって感想です。
ありがとうございます〜！！嬉しいです！！😊
いつも勉強になります。
私も神戸大学経営学部です。
本当にわかりやすいです。モヤモヤが晴れました。
ありがとうございます。
コメントありがとうございますー！
モヤモヤ→スッキリなったようで良かったです😊
ほんとにありがたい！続けて欲しい！
ありがとうございます！もちろん続けます！！
むしろ伝えたいことありすぎて自分の時間が足りなくて困るぐらいです。有益な動画をもっと量産しまくりたい・・・🥺
とても勉強になります。imgタグにwidth,heightが効かない理由とか理解できました。
いつもわかりやすい説明ありがとうございます。独学勢の味方👏
私も独学勢だったので気持ち分かります！
有料化などもまったく考えていないのでご心配なく！🤣笑
今後も学びになる動画を出していきます！
毎度わかりやすくてためになっております。ありがとうございます。
嬉しいコメントをありがとうございます！🙏
動画制作のやる気が上がります🔥
すごく分かりやすいです💛
理解できていなかったことが、理解できました。
ありがとうございます✨
沢山のことを知ることが出来てうれしいです。＊
プロゲートだけではここは理解できなかったのですが、この動画でやっと理解できました！！
ありがとうございました！！
勉強させてもらいます。
ぜひぜひみんなで学んでいきましょうー！😁
分かりやすくて、とても有益
ありがとうございます！
嬉しすぎる評価です😊✨
ボックスモデルとインライン、ブロック要素などの挙動の理解に苦しんでいた（特にmargin）のですが、一気に理解が深まりました！
本当に感謝いたしますm(_ _)m
解説が分かりやすいです。
プログラミングスクールも。このくらい真面目にテキスト作って欲しい！
毎回かなり分かりやすくて助かります。プログラミング勉強始めたばかりなので、しまぶーさんの動画たくさん見て勉強します！
分かりやすすぎます！
これからもよろしくお願い致します！
コメントありがとうございます！
嬉しすぎるコメントでモチベーション上がります💪
こちらこそ、これからもよろしくお願いします😊
プロゲートだけでは理解が難しかったのですが、この動画で理解できました！
ありがとうございました！繰り返し見て勉強します！
物凄い勉強になります、ありがたいです。
本当にわかりやすいです！毎朝みています！
分かりやすかったです！
めっちゃわかりやすいです❗️
ありがとうございます😀
待ってました！！
待たれてました！！🤣
ありがとう😊
thank you ! I'm having fun studying
◎ボックスモデル
●ボックスモデルの基本
・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ボックスはインラインボックス
で意外だった
大変勉強になりました！
ありがとございます！！
復習のつもりで見させて頂きました！
今回もわかりやすい動画ありがとうございますm(__)m
22:40秒あたりなんですが、img要素とかinput要素ってwidthやhightがインライン要素なのに例外的に効きませんでしたっけ？
いつもコメントありがとうー！😊
ちょっと試してみましたが・・・本当ですね😳😳😳
見た感じinput要素はデフォルトでinline-blockのようです。なのでこちらがwidth, heightが効くのは分かりました。
imgはMDNリファレンスには下記のように書かれていました。なので例外的なプロパティな気はしますね。ちなみに実はボックスモデルには外側・内側の概念があって、内部実装的にはそちらの概念が絡んでくるのかなーとは思いました。余談すぎますが。
```
は置換要素です。 display の値が既定で inline ですが、既定の寸法は埋め込まれた画像の内部的な値で定義されます。画像には border/border-radius, padding/margin, width, height, などのプロパティを設定することができます。
```
私も学びになりました。ありがとうございます！
めちゃくちゃ分かりやすくて助けられてます！！
いい動画をありがとうございます！
わかりやすい、超
嬉しいコメントです、超
分かりやすい解説ありがとうございます。動画の趣旨とは少しズレるのですが、細かなvscodeの操作方法について
教えていただきたいです。
16：29あたりに出てきた、コピペの方法。（単純な⌘p→⌘vでは実現できない気がします。）
24：05あたりに出てきた、複数箇所の編集。
このような操作方法は、「vscode 効率 操作」みたいな感じで検索しても、いまいちヒットしません。。。
その他、ちょこちょこ細かい箇所で気になる操作方法があったので、別途質問させて頂ければ幸いです。
いつもわかりやすい動画ありがとうございます。
20:14 で前後のタグを一度に変えているのはどうやっていますか？
今まさに模写コーディングでめっちゃ詰まってます。。💦margin相殺とか知らなかったり、imgにwidth指定とかしてたかも…だから「CSSきかない💦」が多かったのかと思い始めました(^_^；
しっかり勉強させていただきます
開始タグと終了タグの中身を同時に変更してるやり方を教えてください。
「Command + d」で同じ単語を複数選択できます！ぜひぜひ使ってみてください！
しまぶーのIT大学 めっちゃ助かります！！
動画の様に2画面(左にブラウザ表示、右にディベロッパーツール)にするやり方を教えてください！
説明が難しいですが右上の３点リーダを押せば場所の設定ができます！実はChrome DevToolsの動画も出してて、めちゃくちゃ学びになるかと思うので良ければご覧ください！😊
ua-cam.com/video/awRkFcv51r4/v-deo.html
プログラミングを勉強するなら
Progate,ドットインストール＜しまぶーの動画👍
アウトプットの意味も込めてこちらの動画を参考にさせていただき、noteなどにまとめた内容を公開しても問題ないでしょうか？
はい、問題ありません！！
アウトプット素晴らしいです👍✨
@@shimabu_it
ありがとうございます！！
初めてコメントします。価値ある動画をいつもありがとうございます。
早速ですが、動画の中で、html要素でbox-sizingプロパティを設定して、他の全ての要素でその値を継承するように設定するとmdnに書かれていました。
コードで表現すると、
html{
box-sizing:border-box;
}
* , *::before,*::after{
box-sizing:inherit
}
とのことでした。ここで疑問に思ったのですが、わざわざ擬似要素は書かなくてもいいのではと思いました。全称セレクターである＊を書けば、そこに擬似要素や擬似クラスも含まれるのではないですか？
お忙しいと思いますが、返信をいただけると幸いです。
そうすると、ある要素（とその疑似要素）だけbox-sizingの値を変更したいとなった場合に、beforeやafterも変更する必要が出てきてしまうからです！
inheritさせることでわざわざ何回も書く必要がなくなります！
いつもわかりやすい動画をありがとうございます＾＾
inlineとblockのこと、displayでの指定の意味、理解しました。
サイトのクローンなどをしていたときにこの辺りの意味をきちんと理解していなかったです・・。
何となく表示を合わせてしまっていて、ページの拡縮によって崩れる理由がいまいち掴めていませんでした。
すべてではないですが、今回のinline、blockの特製を理解していなかったことが大きいかったことがわかりました。
動画とてもわかり易いです！
調べてもわからなかったので失礼します、 16:28から行っているコピペ方法はどのショートカットキーでできますか？
何も選択せずにCmd + Cするといけます！
Windowsの場合はおそらくCtrl + Cですね！
@@shimabu_it ありがとうございます！！
マージンの相殺が発生する場合、書き方としてbottom-topで書くべき、bottom-downで書くべきなどありますか？
webデザイナーになりたくて、VSCodeの紹介からHTML、CSSと順にみて学んでいます。
質問です。パネルにあるマージン情報はどう設定すれば表示されますか。機能拡張でしょうか。
質問です。プログラマーの仕事内容を紹介してるサイトでは、ネットを使って情報収集をしているとゆうことしか聞かないので
本を見ながらコードを書くのはマイナーな方なのでしょうか？
本は勉強のときはありだと思います。マイナーでもないと思いますよ。
実際にサービスを作る際には分からないことが必ず出てくるんですが、そういうのはググらないと解決しないことが多いですね。本ではカバーしきれない範囲の分からないことが必ず出てきます。なので最初は本でも動画でも何でもいいんですが、ある程度基礎を抑えたら、実際にサービスを作りはじめて、分からないことが出てきたらググりまくって解決ということが重要ですね。それが１番成長につながると思います！
１度で理解できないので何回も見なきゃ
質問です。下記のソース（"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 があるという理解であっていますでしょうか??
imgにwidthが当てられたんですが、これは何故でしょうか。インラインのはずなのに。あと最近毎日動画見て勉強してます。
Chrome DevTools は以前の動画で言ったということですが、どの動画になるのでしょうか？
お尋ねしたいことがあります。
「私はブロックです」のdivタグを動画と同じようにをコピペしたところブロック間に隙間ができました。
ネットで調べた結果divタグをエディター上で1行で書くことで隙間はなくなりましたが、これってほかに改善方法はありますか？
とても丁寧な解説ありがとうございます😊
コードのコピーが出来るリンクを作成されるご予定はございますか？
！？！？！？
それは非常に有益すぎる・・・！！😳
なんで自分でもそれをやらなかったのか不思議で仕方ありません・・・
キリよくJavaScript講座やCSS実践講座からコードがコピーできるようにします！
気づきをありがとうございます！控えめに言って神に感じました🙇👼
神に、神って言われた(^^;;
私は、初学者なので、コードを真似させて頂いても
タイプミスしちゃうから、エラーになりそこで止まってしまいます(Ｔ＿Ｔ)
なので、わがままですがリクエストさせて頂きました。
よろしくお願いします。
プログラミング勉強し始めて2週間です。挫折しそうになったときにしまぶーさんの動画に出会いました。まだまだ頑張れそうな気になりました！ありがとうございます！
いろいろ勉強させて頂きますm(._.)m
おおー良かったですー！2週間の挫折は早いですよ！プログラミングは１番最初が難しいので、ぜひもう少し続けてみて欲しいなと思います。自走できる状態になるとかなり楽になるので目指すはそこですね！😊
webフロントエンドエンジニアでフリーランスになりたいならProgateだと何を学ぶべきですか？
Progateを使ったのが5年以上前で、今のProgateが分からないので適切なアドバイスはできません。パッとProgateのホームページを見た印象で伝えます。
フロントエンド、バックエンド問わず必須なのは下記です。
・Command Line
・SQL
・Git
そして、フロントエンドとして必須で言うと下記でしょう。
・HTML & CSS
・JavaScript
・React
またフロントエンドでもある程度のバックエンドの知識はあった方が良いと思っていて、サーバー側の言語をどれかは学ぶべきだと考えています。フレームワークまで網羅しているという点でRubyが良さそうだと感じだので下記も学んではいかがでしょうか。
・Ruby
・Ruby on Rails5
という感じです。少しでも参考になると幸いです！
しまぶーのIT大学
ありがとうございます
参考になりました
自分は課金制が嫌だったので無料のところだけやった後にUdemyという買い切りの動画で学んでいます。周回にこだわるのは良くないのかなぁと思っているんですがしまぶーさんはドットインストールを何周かしたりしましたか？
ちなみにwww.udemy.com/course/html-css-js/ って言うのをセールのときに買いました。パッと見問題とかありそうですか？
私もわからないポイントは何度も見直しましたよ！周回かどうかにこだわる必要はなく、自分のものにできたかどうかをこだわると良いかと思います。あとは実際に作ってみることですね。作る段階でわからないときに見直したりするほうが、バックグラウンドありで学べるので、より印象に残って自分のスキルとなりやすいです！😊
しまぶーのIT大学 ありがとうございました。ある程度まで基礎ができたら基礎ばっかりやらず作ってみることにします
@@yuuttana1223 URLつきコメントだったので別のところにあって気づくのが遅れてしまいました。
そちらのUdemyの教材に関して言うと、私は中身は分からないので詳しくは判断できませんが、たにぐちまことさんは信頼できる方だと思っています。UA-camやTwitterでの発信も的確なので、きっと内容も間違いないと私は考えています。そもそもUA-camというオープンな場でコードをしっかり教えている方は私は信頼します。私の憶測にはなってしまいますが、参考になると幸いです。
しまぶーのIT大学 ありがとうございます。信頼出来るって聞いて安心しました。
box-sizing: border-box;
標準の代替Boxモデルを指定する
打消し要素なしでwidthとheightを適用できる。って理解で大丈夫ですかね。
かなり何回も見てしまった。。。
> 標準の代替Boxモデルを指定する
> 打消し要素なしでwidthとheightを適用できる
ちょっと逆に自分が分からなくなってしまいました（笑）純粋に、widthやheightの中にborderのサイズが含まれると思っていただいて良いかと思います。あまり深い意味はなく、要素のサイズを知るときに width + border で考えるより、width だけで考えたいよねっていう話です！
@@shimabu_it ありがとうございます。すっきりしました！
15:15辺りのコメントの削除はどうやってしたのですか？
MDNサイトに、「ブロックレベル要素」のページが見つかりません。どこから開いたですか？
登録者2日に1000人ぐらい増えてる気がする🎉
1000人ぐらいの頃から見てたので古参名乗っていいですか？😎
🧛♂️よろしい・・・古参を名乗るのを許可しよう
惜しいです。3日で1000人ぐらいです😆
それでも想像以上で毎日たくさんの人に登録していただいてビックリ...。
関係なくて申し訳ないですが 個人的にcssにてfixedが使いこなせません、、 中央揃えしようとしても左上に固定されてしまうのです、、
コードを見ないと分かりませんが、fixedすると階層が一段階変わります。おそらくそれが原因なのかなーと思ったり・・・。
あとオススメなのは背景色をつけることです！背景色をつけると、自分がつけているスタイルの範囲が明確になるので、問題の原因を特定しやすいです！ぜひbackground-colorを設定してみて、いろいろチャレンジしてみてください！😉
あら、fixedとflexboxを空目しているかも！？🤣
綴りが似ていますよね笑
しまぶーのIT大学 なるほど、、
試行錯誤してみます、 ありがとうございます！
@@user-ym1qv9qk7e どうしても分からなくなったらまた質問してくださいね！そのときはGitHubなどでコードを見せていただけると解決できるかもしれません！（レスはだいぶ遅くなる可能性がありますが😓）
GitHub Pagesを使う動画で解説していますので！
ua-cam.com/video/kftqAritHyc/v-deo.html
しまぶーのIT大学 丁寧な対応ありがとうございます。
陰ながら応援しております！
第何回までの予定ですか？
CSS基礎は7or8までを予定しています。そこからはCSS実践ということでよく使われるレイアウトを作っていこうと考えています。
またCSS基礎が終えた段階で、JavaScriptについても始めていく予定で、JavaScriptとCSS実践を同時並行で進めていこうと考えています！
しまぶーのIT大学 分かりました！本当に助かってます！
現在、医療系大学院生です
頑張ります
妹があんざきに包丁で刺された
初心者さんからしたら早口で全然配慮がなされて無いと思われますよ
画面右上のボタンで、再生速度を変えられますよ！
うーん、自分ならこんなまわりくどい説明しないと思う。
Paddingってこういうものです。
Margin ってこうです。
なんでもっと
Straightforward に説明できんものかね