#01「iSara」模写コーディング / HTML CSS
Рет қаралды 12,977
Күн бұрын
@namatya7354 2 ай бұрын
ちょうど二年前だ、これから動画を見ながら作ります！
@hirocode 2 ай бұрын
ありがとうございます😆❗️
@カモのはし-b1b 2 жыл бұрын
本当に勉強になります！いつもありがとうございます。
@hirocode 2 жыл бұрын
こちらこそそう言っていただけて励みになります😭 ありがとうございます🙇♂️
@harutapi 2 жыл бұрын
めちゃくちゃ有り難い動画…！ありがとうございます！
@hirocode 2 жыл бұрын
こちらこそ嬉しいコメントいただきありがとうございます🙇♂️‼️
@明日葉叶 3 ай бұрын
.headerの中に.containerを入れると反映されないんですが
@hirocode 3 ай бұрын
コメントありがとうございます☺️❗️ 1. sassを使っているのでcssにコンパイルする必要がある。 2. この点だけでいうとネストして書く方法はモダンブラウザ に対応しているので、ブラウザアップデートすれば表示されるかもしれません。 .header { .container { color: blue; } } 上記で解決されない場合、単純にどこかコードが間違ってる可能性が高そうです🤔
@yoichisakai9963 Жыл бұрын
素晴らしい動画をありがとうございます(TT) マウスでピクセル数を図っていましたが、何かフリーソフトを入れておられるのでしょうか？
@hirocode Жыл бұрын
コメントいただきありがとうございます😊♪ Macであればcmd+shift+4でスクショ撮れるモードになります、それでピクセルが表示されるのでそれ使ってます😂escキーでキャンセルしてる感じです‼️
@yoichisakai9963 Жыл бұрын
@@hirocode お忙しい中ご返信ありがとうございます(TT) Windowsだと出来なそうですが(-_-;) 大変参考になりました！！m(_ _)m
@yoichisakai9963 Жыл бұрын
HIROさん、お忙しいところすみません。15:18あたりで「aタグにあたっているスタイルを打ち消す」をおっしゃっていますが、最初のReset cssでそれは実現出来ないのでしょうか？
@hirocode Жыл бұрын
コメントありがとうございます😊♪reset.cssに入れて全然大丈夫です！ 今回ネットで拾ってきたreset.cssにaタグ打ち消し指定が入ってなかったですが、僕が普段使うreset.cssには既に記述しています😆 なので、毎回指定する打ち消し系のものはreset.cssに記述して、それをコピーして使い回すのが良いかと思います❗️
@yoichisakai9963 Жыл бұрын
@@hirocode お忙しいところありがとうございます！！！（TT) 納得がとまらないです！！！
@oyui2129 Жыл бұрын
ヘッダーの左右位置の指定はspace-betweenを使って指定しても可能でしょうか？？
@hirocode Жыл бұрын
コメントありがとうございます！その指定でも問題ないです😆‼️
@yoshi555 Жыл бұрын
いつも分かりやすい動画をありがとうございます！ 初心者で見当違いな質問かもしれませんがご教授お願いします。 １、21:10 で中央揃えにする際 display: flex; flex-direction; column; align-items: center; で中央揃えにしていますが、.containerに直接text-align: center;でも大丈夫ですか？ ２、ブラウザ上で距離を測っていますが、何かの拡張機能でしょうか？ お忙しいと思いますが教えていただければ幸いです。 よろしくお願いします。
@hirocode Жыл бұрын
こちらこそ嬉しいコメントいただきありがとうございます🙇 1. その指定で全く問題ないです！ 2. macだとcmd + shift+ 4 で選択範囲のスクショが撮れます（escでキャンセル）。その機能使うと選択範囲の距離が表示されるのでそれ使ってます😂！
@yoshi555 Жыл бұрын
@@hirocode 早急な返信対応ありがとうございます♪ これからもヒロさんの動画で勉強頑張ります💪
@マリナ-d1f 2 жыл бұрын
さっそく模写コーディングUPしていただきありがとうございます😭！本当にわかりやすく、ヒロさんみたいになりたい！と勉強の刺激にもなっています！
@hirocode 2 жыл бұрын
そう思っていただけて光栄です😆❗️こちらこそ嬉しいコメントいただきありがとうございます😊♪
@nnaa2516 2 жыл бұрын
いつもすごく分かりやすい動画ありがとうございます！ いつも思いますが、ヒロさんの解説動画は特にSTEP by STEPで説明してくれるので、何を変えた(設定した)らどこにどう影響するのか、というのが非常に分かりやすいです。それでいて動画がコンパクトにまとまっているためダラダラせず集中して理解できます。ホント、センスだなぁと感じました。これからもよろしくお願いします。
@hirocode 2 жыл бұрын
ありがとうございます！！めちゃ嬉しすぎます😭❗️ もっと良い動画出せるように頑張ります❗️❗️
@KT-rv5jo Жыл бұрын
いつもお世話になっています。 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’/‘） これが気になって前に進めません。
@hirocode Жыл бұрын
コメントいただきありがとうございます😊♪ 僕も同じ記述なんですが、エラー出てないです💦 "savePath": "/public/css", これペーストして解決しませんでしょうか🤔
@王子お 2 жыл бұрын
すごくわかりやすく、楽しい動画でした！これからも勉強させていただきます！ VScodeでのカーソルが黄色のアニメーションはプラグインで取得できますか？ ご教授いただけますと幸いです。
@hirocode 2 жыл бұрын
楽しいって言っていただけてめちゃめちゃ嬉しいです🙇❗️ カーソルの色は、VSCodeの設定ファイルであるsettings.json内に下記を追加しています！ "workbench.colorCustomizations": { "editorCursor.foreground": "#ffff00", }, さらに、カーソルの動きは下記の指定をしています！ "editor.cursorBlinking": "expand", メニューバー>Code>基本設定>設定> 右上のアイコンの「設定（JSON）を開く」よりsettings.jsonにアクセスできます😆❗️
@王子お 2 жыл бұрын
@@hirocode 上記の説明通りに進めて、設定できました！！！お忙しい中とてもわかりやすく丁寧に回答ありがとうございます！🙇♂ これからも応援してます！！！
@ogadesuyo4849 2 жыл бұрын
非常にわかりやすい動画ありがとうございます！ 引き続き#02も実践したいと思います。 初心者です。調べてもよくわからなかったので、ぜひ教えていただきたいのですが、 ①cssの.buttonのクラスはなぜbodyのところに書くのでしょうか？headerではない？ ②header部分でロゴと問い合わせボタンの間隔をあけるために.header_actionに対してmarginを指定していましたが、paddingではなくmarginの方がよい理由はなにかありますか？
@hirocode 2 жыл бұрын
嬉しいコメントいただきありがとうございます😊♪ ①について .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を使うって感じになるかと思います🙇♂️
@ogadesuyo4849 2 жыл бұрын
@@hirocode ありがとうございます！！理解できました！ #03は出てる？#02の続きの動画お待ちしてます。
@hirocode 2 жыл бұрын
#03アップしました😆 よろしければご視聴ください❕ kzbin.info/www/bejne/qomTl4x7odmnhLM
@yuyu0638 2 жыл бұрын
動画見ながら一緒に模写してみました！ ほぼ初心者で調べながらやったこともあり、2時間半ほどかかってしまいましたが、同じようにできて嬉しいです☺ 細かい疑問なのですが、18:30のように1番下でなくて途中にletter-spacingを差し込んでいたりするのですが、順番は関係あるのでしょうか？ 18:30だけではなく何回かあった気がして気になりました🤔 この順番が見やすいなどがあるのでしょうか？ お時間ある際に教えていただけると幸いです。 また#2も続けてやってみます！！💪
@hirocode 2 жыл бұрын
一緒にやっていただけて嬉しいです😭❗️ 順番は関係ないです！ プロパティが多いかつ順番がめちゃくちゃだと何が指定されているのか判断がつきにくくなります。 なので、僕の場合はフォント周りのプロパティをまとめたり、余白やサイズの指定をまとめるなど、その辺を意識して書いてる感じです😆❗️
@yuyu0638 2 жыл бұрын
@@hirocode お忙しい中、ご返信いただきありがとうございます！！ 順番関係ないとのことで安心しました。 いつもどの動画も本当に分かりやすくて助かっています！ これからもヒロさんの動画で一生懸命勉強していきます！ 動画楽しみにしてます～！！
@きむまさと 2 жыл бұрын
いつもお世話になってます。 Watch sassのあとにpublic cssというフォルダができません。 何か間違っているのでしょうか。
@hirocode 2 жыл бұрын
コメントいただきありがとうございます😊♪ すみません、動画内で説明できていないんですが、僕の設定でpublic/css内にコンパイルされているだけで、デフォルトだとindex.htmlとかの並びにstyle.cssが出力されるかと思います！ 出力先を変えるには、VSCodeの設置ファイルであるsettings.jsonに下記みたいに追記する必要があります！ "liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": "/public/css/" } ], 上記設定が不要な場合は、header内linkタグでの読み込みを単にstyle.cssにしてあげれば大丈夫です😆❗️
@きむまさと 2 жыл бұрын
@@hirocode うわ！ちゃんと返事してくださってる。 ありがとうございます。
@明日葉叶 3 ай бұрын
@@hirocode 自分もそのpublic/cssが表示されず、無視してそのまま続けたんですがresetcssがどうも反映されないんですが
@りりちお Жыл бұрын
Live sass compilerを使ってstyle.scssでWatch Sassを押してもpublic/cssフォルダーは生成されずstyle.cssとstyle.css.mapのみ作られました。どうすればpublic/cssフォルダーを生成出来ますか？
@hirocode Жыл бұрын
完全に説明不足ですみません🙇♂️💦 settings.json（VSCodeの設定）の中の、 "liveSassCompile.settings.formats"という項目内"savePath"の値で出力先を指定します。 この場合、"/public/css/"と指定しています！
@りりちお Жыл бұрын
@@hirocode ありがとうございます！助かります。