Тёмный

#01「iSara」模写コーディング / HTML CSS 

HIROCODE.
Подписаться 68 тыс.
Просмотров 13 тыс.
50% 1

Опубликовано:

 

14 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

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