コメントありがとうございます！質問を私が正しく認識できていればですが、下記の設定で解決するかと思います！ ① Finderでファイルを該当ファイルを右クリック ② 「情報を見る」をクリック ③ 「このアプリケーションで開く」をクリック ④ Visual Studio Coceを選択 ⑤ 「すべてを変更」をクリック 以上です。おそらくこれで変更できるのですが、反映まで結構時間が掛かるか再起動して表示が変わる可能性があります。ちなみにこの変更によってダブルクリック時にVS Codeで開くようになるかと思います。ぜひお試しくださいませ！😊
前回のレスポンシブデザイン講座の続きです → ruclips.net/video/79Dr3RGm0SI/видео.html
これでおそらく「@media」については、ほぼほぼOKかと思います。あとは必要になれば、そのときに覚える感じですね。
レスポンシブ対応のコーディングができるようになるとHTMLとCSSは一人前かもしれませんね😊
印刷プレビューで背景の色が白から変わらないのですが、PCの設定などが原因なのでしょうか？
それともプログラムが間違えている可能性が高いでしょうか？
モバイルファースト・デスクトップファーストの理屈で教えてくださる所が勉強になりました。ありがとうございます。
いつもありがとうございます。
勉強させていただいてます！
実務をしていますが、先輩から指摘をいただいて基礎を学び直しています。今まで何となくでしていたので、わかりやすくて勉強になっています。視聴者さんのコメントへの返信も勉強になっています！
こちらこそ励みになるコメントをありがとうございます〜！
「何となく」から「しっかり理解」へ変えていくのは大事ですよね。世の中に散乱しているブログも意外と古い情報や調べきれていない情報のまま投稿されていることが多いので注意が必要です。
コメントもなるべく返信しておりますが、最近は数が多すぎて手が回らなくなってきているのはあります。うー、どうにかしてちゃんと返信したいですが、、、piyotaroさんがコメントまで見てくださっているのは返信のモチベアップには繋がるので嬉しい情報でした。ありがとうございます！😊
いつも、学びの質の高い動画を提供して頂きありがとうございます。そして、起業家としてお忙しい中、丁寧な返信ありがとうございます。width > ○○px は初耳で、私もvscodeで試しましたが、エラーが出ました。
話は変わりますが、質問があります。
1.フロントエンドの開発現場で、オープンソースのJQueryは使用しますか？
2.現在、フロントエンジニアを目指し、HTML/CSS/JavaScriptの基礎を勉強中なのですが、DockerやPHPを使用したウェブ開発にも慣れておいた方が良いでしょうか？
長くなりましたが、お返事頂けると嬉しいです。
いえいえ、むしろ前回に引き続きコメントをありがとうございます。そしてコメント前の丁寧なお気遣い、width > ○○pxの調査報告ももありがとうございます！🙌
質問にお答えしますね。
> 1.フロントエンドの開発現場で、オープンソースのJQueryは使用しますか？
アプリ開発系の企業が新規で採用することはありません。jQueryを使う場合があるとしたら、既存のプロダクトで既にjQueryが使われていて仕方なく運用保守をしている場合です。基本的には使いません。もし新規でjQueryを採用するとしたら、その会社は技術力的にはそこまで高くないか、フロントエンドを重視していない会社かと思われます。そのぐらいjQueryの将来性は低いです。Web制作企業は未だに使っているところも多いようには感じますが、私はアプリ開発系企業をオススメしているのでjQueryを学ぶのは辞めるべき派です。
> 2.現在、フロントエンジニアを目指し、HTML/CSS/JavaScriptの基礎を勉強中なのですが、DockerやPHPを使用したウェブ開発にも慣れておいた方が良いでしょうか？
はい。何かしらのバックエンドの開発にも慣れておいたほうが良いです。フロントエンドでもバックエンドでも、最低限お互いの事情は分かっておくべきだと考えています。最低限の定義は人によるので割愛ですが、少なくともDockerが何か分かって1度は使ってみたことがあるレベルにはなっていたほうが良いと思います。バックエンド言語もPHPでもRubyでもPythonでもNode.jsでもいいですが、どれかは学んでおくべきだと思っています。私だったらPython or Node.js派ですが、日本語の情報で多いのはPHPやRubyなので、初心者の方にどれをオススメするかは難しいですね。
という感じです。参考になると嬉しいです✌
@@shimabu_it 返信ありがとうございます！
【jQueryに関して】
そうなんですね（驚）むしろ、JQueryを積極的に使用していると思っていました(汗)。やはり、コピペではなく、自社完全オリジナルは自信の現れなんですね。
【バックエンド言語に関して】
エンジニア同士の理解や、円滑なコミュニケーションを図る意味では重要なんですね。PHPは、比較的学び易いと聞いたので、まずはそこから学習を展開し、Python , Node.jsに触れていこうと思います。
貴重な回答、ありがとうございました！
次回も楽しみにしています。
はじめまして！
いつも動画で勉強させてもらっています😊ありがとうございます🙌
レスポンシブについて質問なのですが、 fontサイズや、余白、画像サイズなどの単位は何をしようしていますか？ 自分はよくpxを使って書いてしまうのですが、それだとデバイスごとに書きなおさいといけなくなり記述量が増えてしまい悩んでいます。 うまく伝わらなかったら申し訳ございません。
お時間があれば返信をいただけると嬉しいです🙇♀️
こちらこそありがとうございます！✨
結論から言うと、font-sizeはremをメインで使用しています。remを使うとデフォルトのfont-size（16px）を1として、相対的に指定することができます。2remと指定すると32pxということですね。なのでレスポンシブ対応時に、デフォルトのfont-sizeを変えるだけで全ての場所で一気に変えることができます。例えば16px→14pxにすると、全体のfont-sizeが一気に変わります。
ただし、それも4〜5年前からの癖で使っているもので、今の書き方と比較してベストかは分かっていません。今どきはcalcとvwを組み合わせてレスポンシブ対応を楽にする技があるみたいなので、それも使ってみたいなーと思っています。これもみんなに伝えられるぐらい深く勉強して動画にしたいと思っております。私もまだ最新のところを勉強できていない状態です。
余白や画像サイズはpxを使用しています。こちらも同様にレスポンシブにある程度自動的に可変に設定できるようですが、これに関してもまだ勉強不足という状態なので、ベストが何かは分かっていない状態です。
ただし、1つ言えるのは完全にすべてをベストで書くことは難しいということです。プログラミングは範囲が広すぎてすべてにベストを求めようとするといくら時間があっても足りません。ある程度、自分が納得する範囲がきたら、次は新しい（学びたい）技術を学ぶことも重要かもしれません。私もHTMLとCSSに関してはベストではなくベターレベルでとどめて、JavaScriptやReactを学んでいきました。
ちょっと話がそれてしまいましたが、font-sizeはrem、他はpxですが、現在のベストプラクティスまでは私も追えていない状況です。参考になれば🙌
しまぶーのIT大学
返信ありがとうございます🙇♀️
詳しく教えていただきありがとうございます😊
確かに完璧を求めすぎると終わりがなさそうですもんね🤔
参考にさせていただきます🙌
また次の動画も楽しみにしております☺️
お時間いただきありがとうございました🙏
@@翔太-t8y 参考になれたようで良かったです！
また気軽に質問してくださいねー🙌
絵文字がいっぱい👍
最近、HTMLやCSSなんて勉強しても稼げないから無駄 という動画をよく見ます。やはり最初はマークアップ言語から始まるべきですか？それともプログラミング言語からやるべきですか？
たぶんですけど、質問者さんは最終的にはプログラミング言語を習得してそれで稼ごうと考えてると思うので、
「html,cssなんて勉強しても稼げないから無駄」という言葉は気にしなくていいと思いますよ。それを聞いて諦めた方がいいと思う人は、htmlとcssだけで食っていこうと考えてる人だけなので。
でも最初にHTML,cssは学んでおいたほうがいいと思います、他の言語より簡単なので挫折しにくいです。
質問も、代理の回答も、ありがとうございます。嬉しいです🙏
結論から回答しますと、私もマークアップ言語から学ぶ方をオススメします。こーきさんと同意見でマークアップ言語は挫折しにくく、プログラミング言語へステップアップするためのちょうど良い一段目だと思います。またなんだかんだWeb開発においては必要となる知識なので最低限は必要なように思います。
また「稼ぐ」の度合いが人によるので難しいですが、HTMLとCSSでも単価の安いコーディングの副業レベルでは稼げるかと思います。ただし、フリーランスとして生計を立てるのは私は無理だと判断しています。HTMLとCSSだけでフリーランスでやっている人を見たことがないので。
という感じですね。参考になれば幸いです👍
しまぶーさんのようなフロントエンドエンジニアを目指してる学生です。HTML.CSS.JS(DOMの操作まで軽く)をひと通りやったのですが、書き込みサイトや問い合わせフォームのようなサーバを介したサイトを作りたいと思いました。やはりPHPを1からやるのが手っ取り早いかなぁと思ったのですが、企業の採用ページを見るとフロントエンドエンジニアはそう言ったことよりもreact.vueといったところのスキルを求めてるようです。ポートフォリオとしてPHP(laravelとかもしくはnode.jsでもいいかなぁと思ってます。学習コスト的に)を使ったものはお門違いですかね？
と悩んでいます笑
ありがとうございます！
フロントエンド志望のエンジニアでもお問い合わせフォームや書き込みサイトレベルのサーバー側処理は書けたほうが良いので、ReactかVueと合わせて両方できるようになったほうが良いというのが回答です！
お問い合わせフォームも書き込みサイトもデータベースを扱う処理としては入門的な部類なので最初のステップアップにはもってこいの題材だと思います。PHPかNode.jsかはお好きな方ですね〜！✨
専門学校のpcがWindowsの場合は自分のノートpcもWindowsで揃えた方がいいでしょうか？
なかなか難しい判断ですねー。Macをオススメする理由は下記動画でも解説していますが、専門学校と私用をどうするか問題はなかなか考えたことがありませんでした。
ruclips.net/video/8RU7Dv8SkIE/видео.html
人にもよると思うのですが私ならMacにします。理由はやはり上記動画の通りMacのメリットが大きいのと、後は逆に差を学ぶことができると考えたからです。Windows・Macの良し悪しを学ぶことができますし、なんだかんだ両OSとも使える人は少ないかと思うので、それはそれで貴重な能力になるかと。またどのみち専門学校は2〜3年かと思うので、その後のことを考えてもMacが良いのではないかと思います。あくまで参考程度でお願いします🙏
いつもしまぶーさんの動画で勉強させてもらってます！
ありがとうございます！
質問があります＜(_ _)＞
スマホ対応からコーディングした方がいいということですか？
いつもpcからコーディングしてたので😅
ありがとうございます！✨
質問にお答えしますと、スマホ対応からコーディングした方がいいということです。いわゆるモバイルファーストで、なるべくモバイルの画面では、たくさんのCSSが読み込まれない（@mediaなどで記述量を増やさない）ようにしたほうが良いということです👍
返信ありがとうございます🙇♂️🙇♂️
たしかにpcの方からコーディングするとどうしても記述量が増えてしまいますもんね😂
めちゃくちゃ参考になりました、
ありがとうございます🙇♂️
次回の動画も楽しみに待ってます☺️
またしても最高の動画をありがとうございます！
モバイルファーストという概念は私にとって新しかったです。スマホ時のCSSが上にくることにちょっと違和感がありましたが、理由を聞いてなるほどと思い取り入れていきたいと思いました。
モバイルファーストで作るってなったときは、開発中常にPCの画面も狭めるか開発者ツールのスマホ画面にしておいて、後から@media｛｝の中にタブレット・PCのCSSを書いていくといった感じなのでしょうか？
また、一般的にタブレットの時のmin-widthはこの値、スマホの時のmin-widthはこの値といった数値って決まってるのでしょうか？
いえいえーこちらこそコメントありがとうございますー！
> モバイルファーストで作るってなったときは、開発中常にPCの画面も狭めるか開発者ツールのスマホ画面にしておいて、後から@media｛｝の中にタブレット・PCのCSSを書いていくといった感じなのでしょうか？
はい、まさに仰るとおりですね！先にスマホを終わらせて、次第に画面を広げていくという流れです！
> また、一般的にタブレットの時のmin-widthはこの値、スマホの時のmin-widthはこの値といった数値って決まってるのでしょうか？
決まっていないですね。タブレットやスマホによってサイズがバラバラなので明確にどれがベストというのは無いですね。Bootstrapの値とかは参考になるかもしれないので、特に要件がなければこちらを使っても良いかもしれません！
getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints
しまぶーのIT大学 回答ありがとうございます！
今後もレスポンシブ対応などのCSSの動画期待してます！
やべ、動画更新見逃してた💦 流石しまぶーさん、初学者にとってちょっと深い『なるほど❗️』となる内容で見てて楽しいっす☺️ 忙しい中ありがとうございます😊
いえいえーむしろいつも見てくださって嬉しいです！興味のある内容の動画だけでも構いませんので、自分のご都合にあわせて使ってくださいませ〜😁
初めまして。私は日頃しまぶーさんの動画でプログラミングの学習を行なっている者です！
この質問は直接この動画とは関わるような質問ではございませんが、3日間くらい試行錯誤しながら悩んでいる質問をさせてください、、、、。
visual studio codeを使用しており、HTML、CSS、PHPのファイル作成しております。しかしながら、例えばHTMLのファイルをvs codeで開くことはでき、vs codeと関連付けも実行しているのですが、そのファイル自体がMacのFinder内などで見たとき、ファイルが真っ白でvs codeのあのロゴ付きのHTMLファイルになりません。。。。
vs codeで開くことができるため、特に今後の支障はないかと思われますが、みさなまのファイルについている、あのvs codeのロゴ付きのファイルにしたいという欲があります。。
どのような原因ががもしご存知でしたら、しまぶーさんのご返答をお待ちしております😭
コメントありがとうございます！質問を私が正しく認識できていればですが、下記の設定で解決するかと思います！
① Finderでファイルを該当ファイルを右クリック
② 「情報を見る」をクリック
③ 「このアプリケーションで開く」をクリック
④ Visual Studio Coceを選択
⑤ 「すべてを変更」をクリック
以上です。おそらくこれで変更できるのですが、反映まで結構時間が掛かるか再起動して表示が変わる可能性があります。ちなみにこの変更によってダブルクリック時にVS Codeで開くようになるかと思います。ぜひお試しくださいませ！😊
再勉強中です。質問です。
エディタは何がお薦めでしょうか？
VSCodeが絶対に良いです！
過去に動画も出しているのでぜひご覧くださいませー😆
いまからみるよー！
見る前のコメントをいただけるとは！！笑
内容が素晴らしい。「なぜモバイルファーストなのか」とかありがたい！ありがとうございますm(_ _)m
同じように書いているんですが、最初から画面がピンクになってしまいます。
対処法ありますか？
新しい指定方法 width > 600px みたいなものはどれくらい普及しているのでしょうか？ 次はぜひアニメーションについてお願いします。
動画の説明が伝わりにくかったかも知れず申し訳ないのですが、width > 600px のような記述は、現状はできないということです。仕様としては取り込まれていて、おそらくブラウザの対応待ちではないかと考えています。将来的には増えていく気はしますねー。
アニメーションは私自身が得意分野ではないので、かなり薄い内容になりそうです・・・改めてガッツリ勉強してから動画制作しないといけないので、少し優先順位的には後になってしまいそうです。🙏
@@shimabu_it 早速のご返答ありがとうございます。早とちりしたようです申し訳ありません。 いまドイツでWEBデベロッパーの授業を受けています。授業がドイツ語なので細かいところをしまぶーさんのRUclipsで参考にさせていただいております。 以前おっしゃられていたようにこちらではエンジニアになるのに年齢的制限はなく、まさに能力で判断されます。これからもいろいろと参考にさせていただきます。よろしくお願いいたします。アニメーションは自分もいろいろやっていますが、JavaScriptを使わずにCSSだけでというのでいろいろ制限のある中で試しています。 どのテーマにせよ次の動画を楽しみにしております。
おおー海外で学びの体験をされているんですね。私もぜひそういう体験はしてみたいですねー。英語が分かるようになったら講演とか聞いてみたい。
海外は日本と比べても年齢的制限が特に緩いと言いますよね。その点においては海外を完全に見習うべきだと思っております。CSSアニメーションはすごい人はとんでもない域にまで達しますからね。それ1つ特化でも仕事になるのではないかと思うレベルです（実際にそういう人は普通のプログラミングもできる場合がほとんどだと思いですが）。
はい、また今後の動画もご興味があればご覧くださいませ！またコメントもお待ちしております😊
うーん、なんかもうCSS界隈にプログラミング言語みたいな機構が入ってきちゃってるんですねぇ。
if文とかにしか見えないｗ
SCSSとかだともっとプログラミングっぽくなってますよ！
実際にif文があります！笑
HTML CSS アルゴリズム 情報リテラシー
ら辺を勉強して思ったことは圧倒的に高校の内容より難しいということ。
数Ⅲとか発展数 物理学がもはやお遊びレベルに思えてくる。
難しいというか､今まで習ったことが全く役に立たないからなんの為の高校3年間だったのだろうか… 微分とか積分とかもはや可愛く思えてくるw
数学をLv1とするならば
HTMLはLv5000
CSS はLv10000
アルゴはLv400くらいはある。
HTMLとCSSだけでなくJavaScriptや他の言語がたくさん待ち受けているので心してかかってください😈😈😈
実際、HTML・CSSから先のPHPやJavaScriptなどのプログラミング言語に入ると更に難しくなるところはあります。ただし、分かってくると一番おもしろいところでもあるので、どうにかそこまでは突き抜けてほしいです！！
高校の勉強はたしかに実務として役立つことはないですが勉強するという姿勢は学べるかもですね〜。あと数学も深くいけばどこまでも深くなる闇の世界ではありそうで私は怖いです！笑
例の件!?出ましたね。
～～～～質問です～～～～
エンジニアでけでなく様々な業種でかまいませんが
この人のポートフォリオサイトいいねというものはありますか？
まさしくTwitterの件ですね。
質問は回答が難しいですねーーー。そもそも個人のポートフォリオサイトをたくさん見ていないので、誰かのポートフォリオでいいなと思ったことは無いです。企業の制作実績としていいなと思ったことはあって下記サイトとかは好きですね。
basecamp.dev/
素晴らしいデザインで私もこういう遊び心のあるオシャレなサイトを作れるようになりたいです。トップレベルのデザイナーが作ったサイトなので、納得の出来です。
(min-width: 3150 ※最高)！w
その表現方法は草ですね😊