いつもすごく分かりやすい動画ありがとうございます！ いつも思いますが、ヒロさんの解説動画は特にSTEP by STEPで説明してくれるので、何を変えた(設定した)らどこにどう影響するのか、というのが非常に分かりやすいです。それでいて動画がコンパクトにまとまっているためダラダラせず集中して理解できます。ホント、センスだなぁと感じました。これからもよろしくお願いします。
いつもお世話になっています。 settings.jsonの “savePath”:”/public/css”,にすると問題のところに {}settings.json .viscode ⚠︎Must start with any of[Ln 7, Col 25] ‘/‘or ‘/‘（for workspace root） ‘〜\’or’〜\’for relative to the file being processed.Must not end with a path separator（’/‘or’/‘） これが気になって前に進めません。
ちょうど二年前だ、これから動画を見ながら作ります！
ありがとうございます😆❗️
本当に勉強になります！いつもありがとうございます。
こちらこそそう言っていただけて励みになります😭
ありがとうございます🙇♂️
.headerの中に.containerを入れると反映されないんですが
コメントありがとうございます☺️❗️
1. sassを使っているのでcssにコンパイルする必要がある。
2. この点だけでいうとネストして書く方法はモダンブラウザ に対応しているので、ブラウザアップデートすれば表示されるかもしれません。
.header {
.container {
color: blue;
}
}
上記で解決されない場合、単純にどこかコードが間違ってる可能性が高そうです🤔
素晴らしい動画をありがとうございます(TT) マウスでピクセル数を図っていましたが、何かフリーソフトを入れておられるのでしょうか？
コメントいただきありがとうございます😊♪ Macであればcmd+shift+4でスクショ撮れるモードになります、それでピクセルが表示されるのでそれ使ってます😂escキーでキャンセルしてる感じです‼️
@@hirocode お忙しい中ご返信ありがとうございます(TT) Windowsだと出来なそうですが(-_-;) 大変参考になりました！！m(_ _)m
めちゃくちゃ有り難い動画…！ありがとうございます！
こちらこそ嬉しいコメントいただきありがとうございます🙇♂️‼️
ヘッダーの左右位置の指定はspace-betweenを使って指定しても可能でしょうか？？
コメントありがとうございます！その指定でも問題ないです😆‼️
さっそく模写コーディングUPしていただきありがとうございます😭！本当にわかりやすく、ヒロさんみたいになりたい！と勉強の刺激にもなっています！
そう思っていただけて光栄です😆❗️こちらこそ嬉しいコメントいただきありがとうございます😊♪
いつもすごく分かりやすい動画ありがとうございます！
いつも思いますが、ヒロさんの解説動画は特にSTEP by STEPで説明してくれるので、何を変えた(設定した)らどこにどう影響するのか、というのが非常に分かりやすいです。それでいて動画がコンパクトにまとまっているためダラダラせず集中して理解できます。ホント、センスだなぁと感じました。これからもよろしくお願いします。
ありがとうございます！！めちゃ嬉しすぎます😭❗️
もっと良い動画出せるように頑張ります❗️❗️
いつもお世話になっています。
settings.jsonの
“savePath”:”/public/css”,にすると問題のところに
{}settings.json .viscode
⚠︎Must start with any of[Ln 7, Col 25]
‘/‘or ‘/‘（for workspace root）
‘〜\’or’〜\’for relative to the file being processed.Must not end with a path separator（’/‘or’/‘）
これが気になって前に進めません。
コメントいただきありがとうございます😊♪
僕も同じ記述なんですが、エラー出てないです💦
"savePath": "/public/css",
これペーストして解決しませんでしょうか🤔
非常にわかりやすい動画ありがとうございます！
引き続き#02も実践したいと思います。
初心者です。調べてもよくわからなかったので、ぜひ教えていただきたいのですが、
①cssの.buttonのクラスはなぜbodyのところに書くのでしょうか？headerではない？
②header部分でロゴと問い合わせボタンの間隔をあけるために.header_actionに対してmarginを指定していましたが、paddingではなくmarginの方がよい理由はなにかありますか？
嬉しいコメントいただきありがとうございます😊♪
①について
.buttonはサイト内でいくつも出てくる想定なので、共通要素としてbodyの近くに配置しています❕ちなみに#03くらいでボタンに関するclassは別ファイルで管理する形をとっています。
②について
まず前提として、autoの値はmarginでしか使用することができません。
ここでの指定はflexを理解していないとなかなか難しいと思いますが、.header_actionの親要素にdisplay: flex;を指定しているため、フレックスアイテムとなる.header_actionのmargin-leftにautoを指定すると右揃えになります。（少し難しいかもなので、ここら辺の理解は後回しにして良いかと思います。）
もしここをpaddingで指定する場合、padding-left: 400px;みたいな形で指定することになり、それだと左の要素のテキスト量の変更や画面幅が変更される場合にレイアウトが崩れてしまいます。なので良くないと言う判断になります。
marginとpaddingの違いをザックリしたイメージで言うと、
marginは他の要素に関係する余白の指定、paddingは自分に対する余白の指定って感じです😊
今回の場合でも、. header_action（自分）とロゴ（他の要素）との間を余白を指定したいので、marginを使うって感じになるかと思います🙇♂️
@@hirocode ありがとうございます！！理解できました！
#03は出てる？#02の続きの動画お待ちしてます。
#03アップしました😆 よろしければご視聴ください❕
ruclips.net/video/tX0fYElttNQ/видео.html
すごくわかりやすく、楽しい動画でした！これからも勉強させていただきます！
VScodeでのカーソルが黄色のアニメーションはプラグインで取得できますか？
ご教授いただけますと幸いです。
楽しいって言っていただけてめちゃめちゃ嬉しいです🙇❗️
カーソルの色は、VSCodeの設定ファイルであるsettings.json内に下記を追加しています！
"workbench.colorCustomizations": {
"editorCursor.foreground": "#ffff00",
},
さらに、カーソルの動きは下記の指定をしています！
"editor.cursorBlinking": "expand",
メニューバー>Code>基本設定>設定> 右上のアイコンの「設定（JSON）を開く」よりsettings.jsonにアクセスできます😆❗️
@@hirocode 上記の説明通りに進めて、設定できました！！！お忙しい中とてもわかりやすく丁寧に回答ありがとうございます！🙇♂
これからも応援してます！！！
いつも分かりやすい動画をありがとうございます！
初心者で見当違いな質問かもしれませんがご教授お願いします。
１、21:10 で中央揃えにする際 display: flex; flex-direction; column; align-items: center; で中央揃えにしていますが、.containerに直接text-align: center;でも大丈夫ですか？
２、ブラウザ上で距離を測っていますが、何かの拡張機能でしょうか？
お忙しいと思いますが教えていただければ幸いです。
よろしくお願いします。
こちらこそ嬉しいコメントいただきありがとうございます🙇
1. その指定で全く問題ないです！
2. macだとcmd + shift+ 4 で選択範囲のスクショが撮れます（escでキャンセル）。その機能使うと選択範囲の距離が表示されるのでそれ使ってます😂！
@@hirocode
早急な返信対応ありがとうございます♪
これからもヒロさんの動画で勉強頑張ります💪
HIROさん、お忙しいところすみません。15:18あたりで「aタグにあたっているスタイルを打ち消す」をおっしゃっていますが、最初のReset cssでそれは実現出来ないのでしょうか？
コメントありがとうございます😊♪reset.cssに入れて全然大丈夫です！
今回ネットで拾ってきたreset.cssにaタグ打ち消し指定が入ってなかったですが、僕が普段使うreset.cssには既に記述しています😆
なので、毎回指定する打ち消し系のものはreset.cssに記述して、それをコピーして使い回すのが良いかと思います❗️
@@hirocode お忙しいところありがとうございます！！！（TT) 納得がとまらないです！！！
いつもお世話になってます。
Watch sassのあとにpublic cssというフォルダができません。
何か間違っているのでしょうか。
コメントいただきありがとうございます😊♪
すみません、動画内で説明できていないんですが、僕の設定でpublic/css内にコンパイルされているだけで、デフォルトだとindex.htmlとかの並びにstyle.cssが出力されるかと思います！
出力先を変えるには、VSCodeの設置ファイルであるsettings.jsonに下記みたいに追記する必要があります！
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/public/css/"
}
],
上記設定が不要な場合は、header内linkタグでの読み込みを単にstyle.cssにしてあげれば大丈夫です😆❗️
@@hirocode うわ！ちゃんと返事してくださってる。
ありがとうございます。
@@hirocode 自分もそのpublic/cssが表示されず、無視してそのまま続けたんですがresetcssがどうも反映されないんですが
動画見ながら一緒に模写してみました！
ほぼ初心者で調べながらやったこともあり、2時間半ほどかかってしまいましたが、同じようにできて嬉しいです☺
細かい疑問なのですが、18:30のように1番下でなくて途中にletter-spacingを差し込んでいたりするのですが、順番は関係あるのでしょうか？
18:30だけではなく何回かあった気がして気になりました🤔
この順番が見やすいなどがあるのでしょうか？
お時間ある際に教えていただけると幸いです。
また#2も続けてやってみます！！💪
一緒にやっていただけて嬉しいです😭❗️
順番は関係ないです！
プロパティが多いかつ順番がめちゃくちゃだと何が指定されているのか判断がつきにくくなります。
なので、僕の場合はフォント周りのプロパティをまとめたり、余白やサイズの指定をまとめるなど、その辺を意識して書いてる感じです😆❗️
@@hirocode
お忙しい中、ご返信いただきありがとうございます！！
順番関係ないとのことで安心しました。
いつもどの動画も本当に分かりやすくて助かっています！
これからもヒロさんの動画で一生懸命勉強していきます！
動画楽しみにしてます～！！
Live sass compilerを使ってstyle.scssでWatch Sassを押してもpublic/cssフォルダーは生成されずstyle.cssとstyle.css.mapのみ作られました。どうすればpublic/cssフォルダーを生成出来ますか？
完全に説明不足ですみません🙇♂️💦
settings.json（VSCodeの設定）の中の、
"liveSassCompile.settings.formats"という項目内"savePath"の値で出力先を指定します。
この場合、"/public/css/"と指定しています！
@@hirocode ありがとうございます！助かります。