模写コーディングこれからも見ていきたいです！とても勉強になります！

@hirocode

3 жыл бұрын

嬉しいコメントありがとうございます😊🎵今後も上げてみたいと思います😆‼️

HIROさんの動画続けて何本も観てしまいました！3時間近く。 XDの使い方から飛んできたのですが、コーディングやWEB デザインについてもシンプルでとてもわかりやすいです。

@hirocode

3 жыл бұрын

コメントいただきありがとうございます🙇‍♂️ 沢山みていただき嬉しいですー😭 これからもっと参考にしていただけるような動画上げれるように頑張ります❗️

みてて楽しかったです! モチベあがりました! 参考にします!

@hirocode

3 жыл бұрын

楽しいと言っていただけてとても嬉しいです😊❗️ ありがとうございます❗️❗️

為になる動画ありがとうございます！

@hirocode

3 жыл бұрын

こちらこそご視聴いただきありがとうございます🙇‍♂️❗️❗️

参考になりました！ありがとうございます！

@hirocode

3 жыл бұрын

嬉しいです😊❗️ありがとうございます❗️

とても参考になり、楽しく視聴いたしました！ありがとうございまいた。

@hirocode

3 жыл бұрын

とっても嬉しいコメントいただき嬉しいです😭❗️ こちらこそご視聴いただきありがとうございます🙇‍♂️❗️

毎回めちゃくちゃ参考にしてます！ 自分もプログラミング頑張ります！

@hirocode

3 жыл бұрын

ありがとうございます😭❗️ 僕も全然まだまだなので一緒に頑張ります❗️❗️

何を模写するのかと思ったらKZreadとかえぐいw

こうしたいところですが、このような理由でこうします、とコードを組む説明が秀逸！ 同様のアプローチでの模写コーディング・デモンストレーション動画、楽しみにしています。

@hirocode

2 жыл бұрын

とても嬉しいコメントいただけて光栄です😭❗️ また同じ形の動画出します！ありがとうございます🙇‍♂️❗️

何回も動画見てKZread page模写してます。とっても勉強になります！また他のサイトも模写してください！！！

@hirocode

3 жыл бұрын

ありがとうございます😭❗️ 次の模写動画出す予定あるので、それまでしばしお待ちください🙇‍♂️❗️❗️

クラウドソーシングでHTMLコーディングに取り組もうと考えていた初心者です。こちらの動画を真似して、スキル向上させて、案件獲得していきます！

@hirocode

3 жыл бұрын

参考にしていただけて嬉しいです♪応援してます😊❗️

凄いのひと言✨ ホントに凄い‼️ 頭の中で組み上がっているのでしょうね😊 自分も今、勉強中なのですが、ここまで出来るようになれる気がしない……😂 参考にするのにオススメの本などがあれば教えて欲しいです！

@hirocode

2 жыл бұрын

嬉しいコメントいただきありがとうございます😭 最初のうちは覚えることたくさんあって大変ですが、知識量に比例して速度も上がってくるので続けていれば大丈夫だと思います💪❗️ 概要欄の1番下の方にいくつかオススメ書籍📚載せているので参考にしてみてください😆‼️

実際のコーディング風景が見れて勉強になりました！ タイトルが2行に収まらない場合に省略する方法や、検索ボックスの右にあるサーチボタンをどのようにコーディングするのかも気になります！

@hirocode

3 жыл бұрын

コメントありがとうございます🙇‍♂️ 普段やらない喋りながら続けての作業だったので、中途半端なところで断念してしまいました😓 こちらできれば続きも上げたいと思います❗️そのほかの模写コーディングも上げれればと思います❗️

なんとか作成できました、、！ とてもわかりやすかったです。ありがとうございます:)

@hirocode

2 ай бұрын

良かったです😆❗️ありがとうございます🙇❗️

とても参考になりました！ 実際に他の方が模写してる雰囲気を見れて良かったです！ webgl？などが使われているサイト、パララックスが使われているサイトの模写もしていただけるととても嬉しいです！

@hirocode

2 жыл бұрын

少しでも参考にしていただけたようで嬉しいです☺️♪動画のご提案もいただきありがとうございます🙇‍♂️❗️

webデザインに興味があるものです。ヒロコードさんの動画が分かりやすく色々な動画を見てしまいました笑 前職はアンティークショップ店員さんだと動画でお聞きしたのですが、そこから現在の会社に入るまでの学習のロードマップなど教えて頂けると嬉しいです。 動画作りとお仕事の両方大変かと思いますが応援しています！

@hirocode

3 жыл бұрын

動画色々見ていただけたようで嬉しいです😭ありがとうございます🙇‍♂️❗️ 僕の場合ちょっと特殊なのですが、他に参考になりそうな話も考えてゆるく話す動画あげれたらと思います❗️ご意見ありがとうございます😊応援コメントもありがとうございます😭

他にも模写コーディングの動画を希望します！

@hirocode

3 жыл бұрын

そういったご意見いただけて嬉しいです❗️他にもあげたいと思います😊❗️

めっちゃめっちゃすごく参考になり勉強になりました！ コーディングを書いてるところなかなか見る機会ないので、作り方とか勉強になって感謝です。 ありがとうございました。欲を言えば・・・もしできたらレスポンシブ対応までのコーディング動画が見たいです。

@hirocode

2 жыл бұрын

嬉しいコメントいただきありがとうございます😊♫ ご要望ありがとうございます❗️レスポンシブの動画１つも出せてないので作ります❗️❗️

@user-bc5mt7ue7d

2 жыл бұрын

わぁー嬉しいです！ぜひレスポンシブ動画よろしくお願いします。 ちなみに、この動画を見て4時間くらいかけてヒロコードさんのマネをしてコーディングしてみました。できました！！勉強になりました(☆▽☆)

プロゲートを終えたばかりで次に何をやるか迷っていた時にこの動画に出会いました。 今の自分にはレベルが高すぎてついていけない😂 自分で模写コーディングできるように頑張ります♪

@hirocode

Жыл бұрын

コメントいただきありがとうございます😊♪ おっしゃる通り、最初のうちはシンプルなサイトからチャレンジするのが良いかもしれません！頑張ってください😆❕❕

@hyuma3357

Жыл бұрын

@@hirocode ありがとうございます！ 頑張ります！

すごい！　参考になります！　ヒロコードさんのスキル力で時給換算するとどのくらいなのでしょうか？

@hirocode

3 жыл бұрын

コメントありがとうございます🙇‍♂️❗️ Webデザインてクライアントの好みなどによっても作り直しなどがあって結構ばらつきがあるのですが、簡易的なwebサイト制作であれば5,000~10,000円/1h くらいかと思います💡僕がフリーランスだったら多分このくらいかなーって感じなのであくまでざっくりとした想定です😆❗️

やっぱりすごいなぁ〜！こんなすらすら書いてみたいものです・・・笑 そして、 34:09 こんな技があったのか〜！絶対に思いつかない・・・

@hirocode

Жыл бұрын

ありがとうございます😊♪ 今だとgapというめちゃめちゃ便利なプロパティが使えるようになったので、そちらの利用がオススメです😆❗️

@KentaroxKondo

Жыл бұрын

@@hirocode gap! ありがとうございます！ 調べてみます🙌

とても参考になります！ 先週、初めて知り合いから案件を頼まれたので奮起しています。でも知識も実践が足りなさ過ぎて本やネットに書いてあるコードをそのまま写す…とかもザラです…。 もっと頑張らねば…

@hirocode

2 жыл бұрын

コメントいただきありがとうございます😊♪ 最初の頃はみんな、見つけたコードそのままコピーして使って、って感じで覚えてくと思います❗️ 案件頑張ってください😆‼️

為になる動画をありがとうございます、お勉強させてもらってます。 サイドバーメニューのアイコンに1つ1つアイコンを当てていくのは一体どうやってやるのでしょうか？

@hirocode

2 жыл бұрын

こちらこそご視聴いただきありがとうございます😊♪ background-imageのみ個別で変える必要があるので、個別のクラスを付与して表示を変えていく形になります。 下記コード参考にしてみてください😆❗️ ■ HTML 音楽 スポーツ ゲーム ■ CSS .list_nav_sidebar .music::before { background-image: url(img/music.png); } .list_nav_sidebar .sports::before { background-image: url(img/sports.png); } .list_nav_sidebar .game::before { background-image: url(img/game.png); }

プログラマーにはとても勉強になる動画です❗️CSSレイアウト難しい。笑

@hirocode

3 жыл бұрын

嬉しいコメントありがとうございます🙇‍♂️ なんだかんだレイアウトは結構難しいですよね💦

全然わからんけど、楽しかった^_^

@hirocode

3 жыл бұрын

コーディング知らない方からしたら意味わからない動画ですよね😂 それでも楽しんでいただけてよかったです😆❗️ご視聴いただきありがとうございます🙇‍♂️

どの動画も分かりやすくて感謝しています。 次回も楽しみにしています！ 模写するサイト「airbnb」はいかがでしょうか？？

@hirocode

3 жыл бұрын

こちらこそご視聴いただきありがとうございます🙇‍♂️❗️ Airbnbのサイト模写するサイトとして良さそうですね😆 次の模写動画多分このサイトにすると思います❗️❗️ ご提案いただきありがとうございます😊♪

@toma66w

3 жыл бұрын

@@hirocode わ〜ありがとうございます！楽しみにしています✨

大変勉強になります！ 独学でなかなか進めなかったですが、説明わかりやすくとても助かりました。 ありがとうございます：D 一つの質問をさせていただきたいですが、 約16:50からサイトバーのアイコンとテキストの並べ方を説明していただいて、 なんとなくわかりましたが、 逆に top: 50%; transform: translateY(-50%); を両方とも削除しても真ん中に揃えていますが、必ずtop:50%を先につける理由を説明していただれば嬉しいです。 基本的な質問ですみません...よろしくお願いします。

@hirocode

3 жыл бұрын

コメントありがとうございます🙇‍♂️ 上記書かれているコードでも問題なさそうですね😲❗️ 少し調べてみたのですが、おそらくtop→auto、bottom→autoがデフォルトで値の様なので、上下中央に揃っているのかと思います❗️ absoluteしたときにtop,leftなどの値を指定しないとIEで崩れる問題あった記憶があるので、その点大丈夫そうならそれで全然問題なさそうです😊❗️こちらこそ勉強になりました🙇‍♂️ top 50% transform -50% の応用的な使い方で言うと、右側のテキスト量が長くて折り返す可能性がある場合、1行目にアイコン中央に揃えておきたい場合なんかはtop 0.6em , transform -50%と指定すればうまくいくかと思います！ あとはアイコンのバランスが悪い場合に、translate (calc(-50% + 2px))とかの指定もできるので、そう言う場面あれば使ってみてください😆❗️❗️

質問です。フロントエンドエンジニアを目指してる大学生です。html,css,JavaScriptを一通り勉強して、ポートフォリオ制作を始めています。作っているのは主にwebサイトなのですが、フロントエンドエンジニア志望でもPhotoshopや Illustratorでデザインができることをアピールすることは有効ですか？

@hirocode

3 жыл бұрын

コメントありがとうございます🙇‍♂️ 会社の構造にもよるかと思いますが、完全に分業されている企業の場合はそこまで大きなアピールポイントにはならないはないかもしれません💦 ただ、レベルにもよるかとは思いますが、デザイン含めてWebサービス構築に関しての知識や自主的な経験も踏まえて多いことに越したことは無いと思います‼️共有して損はないんじゃないでしょうか😆

とても分かりやすいです！コードエディターは何を使われていますか？

@hirocode

Жыл бұрын

嬉しいです！ありがとうございます😊♪ この動画ではCoda2を使用していて、最近はVSCodeをメインで使っています❕

いつもわかりやすい動画ありがとうございます✨ テキストエディターで合ってるでしょうか？ すごく見やすいので何を使用されているのか教えていただけないでしょうか。 コメントもすべて勉強材料になってとてもありがたいです！

@hirocode

2 жыл бұрын

嬉しいコメントいただきありがとうございます😊♪ この動画ではCoda2という有料のエディタを使用しています❗️最近は主にVSCodeという無料のエディタ使っていて、今だとそっちをオススメしています😆❗️

@rin_bluesky

2 жыл бұрын

@@hirocode ご返答ありがとうございます！Coda2というエディタなんですね、すごく見やすいです✨今VSCode使っていて、ヒロさんのオススメでしたら、このままVSCodeで動画を見ながら同じように模写コーディングしてみます😆早くヒロさんみたいにスラスラ打てるようになりたいので、他の動画も参考に勉強します💨

@hirocode

2 жыл бұрын

今VSCode使ってるんですね❗️❗️VSCodeはプラグインで便利に使えるようになるので、オススメのプラグイン紹介動画もあるので、そこら辺触ったことなければ参考にしてみてください😆！ 応援してます❗️

@rin_bluesky

2 жыл бұрын

@@hirocode ありがとうございます！VSCodeのプラグインも、ヒロさんの動画を見ながら入れて使ってます✨模写コーディングの動画もですが、他の動画もわかりやすく理解できて感動です😆勉強していて楽しいのも、ヒロさんのおかげです。これからも応援しています💨

フレックスボックスの動画を拝見してから登録して勉強させていただいております。 質問です。「sidebar」のアイコン用の位置調整について。「top: 50%;」で位置を下げてからまた上に移動されていますが、何かのバグ対策でしょうか？そもそも「top: 50%;」なしでも位置的に問題ないように見えます。お暇なときにご教示いただけますと幸いです。 いつも細かくわかりやすい解説動画に助けられています。これからも更新を期待しております。

@hirocode

3 жыл бұрын

コメントありがとうございます😊🎵 アイコンサイズやテキストサイズを今後調整する可能性を考えてこのような形で組んでいます❗️ 例えば、アイコンのサイズを縦横8pxとかにした場合、あらかじめtop50%の指定にしておくことで、常にテキストとセンター揃えになるので、アイコンの位置調整をする必要が無くなります😆‼️

@CHEESECAKE_J

3 жыл бұрын

@@hirocode さん、ご回答ありがとうございます。☺現役の方でないとできない仕掛けですね！スッキリしました！今後の追加動画にも期待して応援しています！

AppleのiPhone12のページの模写コーディングが見たいです。

@hirocode

3 жыл бұрын

コメントありがとうございます😊❗️ iPhone12のページかっこいいですよね😆♪ スクロールとモックが連動して動く箇所についてcanvasタグで組まれているようです。 canvasタグはjavascriptと併用する必要があり、難易度が他の動画と比べて上がってしまうため、javascriptの基礎動画を出したタイミングか、もしくは簡単に実現できそうなライブラリなどあれば、その時期に合わせて検討してみたいと思います❗️ご意見いただきありがとうございます🙇‍♂️❗️

@ggalow6576

3 жыл бұрын

@@hirocode 返信ありがとうございます！楽しみにして待ってます！

現在、Webデザイン勉強中のママです。 とても参考にさせていただいてます。 動画止めながら一緒に模写してます。 初心者で申し訳ないのですが、Goliveとhtmlとcssの画面を同時に出しているのは、何か出し方がありますか？ それとも、KZread用ですか？ 実際にこんな感じで見れたら便利だなと思って。

@hirocode

2 жыл бұрын

コメントいただきありがとうございます😊♪ 基本的にはコードエディタには画面分割機能ついているはずなので、HTMLとCSSの画面を同時に表示することが可能です😆❗️ この動画では、ブラウザ画面とコードエディタ画面を同じウィンドウ上に表示しています。ブラウザの右端を縮めて裏側にあるコードエディタにいつでもアクセスできるようにして使用しています！！

ダラダラ勉強するよりも、模写コーディングして要領を掴んだ方がいいと思うのですがどうなんですかね。

@hirocode

3 жыл бұрын

そうかもしれないです❗️知識つけてからというよりかは、わからないところを調べながら実践した方が効率的だと思います❗️

サイドバーを作っている時に、ホーム、急上昇、登録チャンネル作ってコピペした時に、いきなり全てが整っているのは、なにかショートカットをしたのですか？

@hirocode

3 жыл бұрын

コメントいただきありがとうございます😊❗️ 14:15 このあたりの表示でしょうか❓ ここについてはコピー&ペーストの作業なので、動画自体をカットして載せていて、実際はコピー&ペーストとテキストを変更する地道な作業を行なっています😅 ご質問の意図違っていたら再度コメントいただければ嬉しいです🙇‍♂️❗️

こんにちは。勉強させていただいてます。最初のほう 5:00あたりで display: flex にしても dev toolのuser style sheet を見ると サイドバーとメインが display: blockとなってしまい 横に並んでくれません。何がいけないのでしょう？

@hirocode

Жыл бұрын

コメントいただきありがとうございます😊♪ 横並びについて、サイドバーとメインのdisplay属性はここでは関係なくて、親要素の.layout_pageにdisplay: flex;が正しく当たっているかが重要かと思われます。 下記参考にご自身のコードと照らし合わせてみてください😆❗️解決しなければ再度コメントください🙇‍♂️ サイドバー メイン .layout_page { display: flex; } .sidebar { flex: 0 0 240px; } .main { flex: auto; }

はじめまして！ ヒロコードさんみたいな画面を別けてコードを書きたいと思っているのですが、どのように設定してますでしょうか？

@hirocode

2 ай бұрын

VSCodeであれば表示→エディターレイアウトから分割できます😆❗️

スーパー初心者です。 そもそもな質問で申し訳ありません、、、 この入力していってるのはソフトか何かですか？ デベロッパーツール？

@hirocode

2 жыл бұрын

コメントいただきありがとうございます☺️♪ これはコードエディターという、コードを編集するツールです❗️ コードエディターにもいくつか種類があるんですが、動画で使用しているのはCoda2というエディターで、最近だとVSCodeが人気なのでそっちを使用することが多いです！！

楽天市場のコーディングをどうしても知りたいです。楽天GOLDで使用できる言語などご存知でしょうか？

@hirocode

3 жыл бұрын

楽天市場GOLDって知りませんでした😵❗️ 調べてみたんですが、HTML,CSS,Javascriptが使えるようです❗️❗️

ご丁寧な回答ありがとうございます。しかしうまくいきません。サイドバー とメインが縦に並んでるだけです。試しに色も付けようとしましたが以前と違い　色まで反映されなくなりました。最初のどこかで間違っているみたいです。＜Style＞の最初のタグに赤いエラー下線がついてしまいます。泣きそうです。

@hirocode

Жыл бұрын

こちらにhtmlファイルの中身をまるっとコピペしていただけたらわかるかもしれません❗️

画面のサイズを図る時何を使ってますか？ショートカットキー、、、？Macですよね

@hirocode

3 жыл бұрын

command + shift + 4 で部分スクショのカーソルになるので、それで選択箇所のサイズ確認した後escキーでキャンセルしてます😆笑

@user-vn9tw9oc4j

3 жыл бұрын

​@@hirocode 　キャンセルしてるんですね！初歩的なことも丁寧に返信していただきありがとうございます…！

動画拝見させて頂きました。 模写コーディングでよく拝見するのですが、マージンや高さ、画像のサイズを知る際にマウスをホバーすると値が出るのは、どの様にすればそうなるんでしょうか? デベロッパーツールだと結構見にくくてわからずらく、初心者の私には味方が難しく時間がかかってしまってます。 教えて頂けますでしょうか？

@hirocode

2 жыл бұрын

コメントいただきありがとうございます😊♪ デベロッパーツールのインスペクトモードのことでしょうか？？ デベロッパーツール左上の矢印を選択した状態で要素にカーソルを合わせると、マージンやサイズなどが表示されるようになります😆❗️ もしおっしゃってることと相違ありましたら再度コメントください🙇‍♂️❗️❗️

@user-ef3dc4pb6m

2 жыл бұрын

恐れ入ります。 返信頂き有り難うございます。 先日の質問内容を確認いたしましたが、パソコンがWindowsということでしょうか?表示をすると、こちらの画像と違っています。 こちらではマウスをホバーすると丸い透明色の円が出て数字がみてとれますが、自身のパソコンではホバーするとmarginもpaddingもheight…などが一覧で表示されます。 この違いはどうしてでしょうか?

@hirocode

2 жыл бұрын

@@user-ef3dc4pb6m すみません、お手数をおかけしますが、この動画の何分何秒の表示か教えていただければ回答できるかもしれません🙇‍♂️💦よろしくお願いします！

@user-ef3dc4pb6m

2 жыл бұрын

お世話になります。 この動画に限らずですが、この動画でいえば15：47のところです。 私のパソコンではデベロッパーツールを開いてカーソルとあてると これとは違う表示がなされます。 これには何かしらのやり方があるのでしょうか？

@hirocode

2 жыл бұрын

ご確認いただきありがとうございます🙇‍♂️❗️ ここではmac標準機能の範囲指定のスクリーンショット機能を使ってます！範囲指定のスクリーンショットでは選択した範囲のピクセル数が表示されるので、簡易的にサイズを測る際に使用しています😂 macお使いでしたら、cmd + shift + 4 でカーソル変化するのでドラッグすれば同じ挙動になります。ドラッグ放すとスクショ撮ってしまうので、escキーでキャンセルしてます😆❗️

質問です。 リスト「.li」を書いた時に文の頭に黒丸ができると思うのですが、なぜヒロコードさんはできないのですか？

@hirocode

3 жыл бұрын

ご質問いただきありがとうございます🙇‍♂️ 説明なくてすみません💦 これは、リセットcssという、ブラウザのデフォルトのスタイルを打ち消すCSSを読み込んだ上で、独自のスタイルシート(style.css)を読み込んでいるためです！ 上記のように、デフォルト打ち消し＋独自のスタイルを当てるという形でコーディングしていくのが一般的かと思います。 リストについては、ブラウザのデフォルトで、ulタグに対してlist-style-type: disc;という指定がされているので黒丸が表示されます。リセットCSSには、ulタグに対してlist-style-type: none;という記述があるため、黒丸が表示されないように打ち消されています❗️

@user-ek9qf4np3t

3 жыл бұрын

@@hirocode 丁寧に説明ありがとうございます！！

8:18の所で、.headerクラスの背景に何故青色が付くのかが分かりません。 また、.headerクラスの上下左右と.sidebarクラス、.mainクラスの上右左に白く余白が出てしまうのは何故なのでしょうか？ ヒロコードさんのコードと同じように入力はしてるのですが、うまくいきません。。。 教えて頂けると嬉しいです。

@hirocode

7 ай бұрын

コメントありがとうございます☺️♪ 8:18の部分で背景が青いのは、5:55での変更を保存してないためです（すみません意図はなくミスです😅）！ 動画内で説明できてなくて申し訳ないんですが、余白が出るのはおそらくリセットcssを読み込んでいないためです！ * { margin: 0; box-sizing: border-box; } 簡単なリセットとして、CSSの始まりにこれ記載するだけで余白はなくなると思うので試してみてください😆❗️

width:240px;　でなくて　flex:0 0 240px;といれたのはなぜでしょうか？　試しに　width:240px 入れたら狭くなってしまいました。 flex:0 0 40px;　のアイキャッチは　width:40px;でも変わりませんでした。

@hirocode

2 жыл бұрын

display: flex;直下の要素は、flexアイテムになります。 また、flex-shrinkのデフォルト値は1で、縮小を許容する指定になっています。 なので、親要素のサイズ次第で、flexアイテムは縮小します。 それを回避するため、flex-shrink: 0;（縮小させない）を指定する必要があるので、flexプロパティで指定しているって形です❗️ アイキャッチに関しては、他要素がそれに影響しないサイズなので、サイズ保っているだけかと思われます❗️

@jptk6645

2 жыл бұрын

@@hirocode わかりやすい説明ありがとうございます！ flex: 0(伸ばさない）０縮小させない　240px　ということだったんですね。　flex の中にある幅はなるべくflex の値を用いた方が良さそうですね。　youtubeの模写は２回やってなんとなく掴めた気がします。(気がしただけかもですが。） 動画もそうですが、コメント欄の回答もとても勉強になります＾＾

初めまして！サムネイル画像比率保持の部分で、疑似要素を追加して比率保持しようとすると赤いサムネイル画像が表示されなくなってしまいます。contentも入れてます。コード見ないと何とも言えないかもしれませんが、どの辺を確認してみたらいいでしょうか😢💦

@hirocode

2 жыл бұрын

もしかしたら、display: block;が抜けているなどがあるかもしれません。 ↓に同じコード書いてみたので、こちらと比較してみてください😆❗️ www.craft.do/s/sOFmX68xWHUgz0

@user-cb3hl8he5s

2 жыл бұрын

​@@hirocode ありがとうございます！試しにコピペしてみたら比率保持出来ました！ 色々確認して見たらCSSで「.list_video .thumb:before {」の部分の「.thumb」と「:before」の間にスペースが入ってました😓 一人では気が付けなかったので助かりました。返信、比較のコードありがとうございます！引き続きがんばります☺

@hirocode

2 жыл бұрын

解決したようでよかったです☺️♪そういうところなかなか気づけないですよね💦 引き続き頑張ってください😆❗️

エディタは何を使ってるのでしょうか。VSCode？ 上下ウィンドウ使いやすそう

@hirocode

Жыл бұрын

最近はメインでVSCode使ってますが、この動画のエディタはCoda2というエディタです😊♪ VSCodeだと、開いているファイルのタブ部分を右クリック→下に分割で上下ウィンドウ分けることできます😆❕

@kurobosi1

Жыл бұрын

@@hirocode 返信ありがとうございます！ そうなんですね‼︎ VS codeでも再現できるのであれば今度、上下ウェインドウでやってみます✨

li の中にarticle や　div をいれても大丈夫なのでしょうか？

@hirocode

2 жыл бұрын

コメントありがとうございます😊♪ liの中にはどんなタグ入れても大丈夫です！ ただ、ulの直下にli以外を入れるのはNGってなってます💡

@jptk6645

2 жыл бұрын

@@hirocode 直下ならOKなんですね！ ありがとうございます。

初めまして。手順どおり模写していたのですが、34:57あたりの .list_video　liタグに padding:10pxをつけると崩れてしまいます、、。 アドバイス頂けたら助かります😫

@hirocode

Жыл бұрын

説明漏れていてすみません！ * {box-sizing: border-box;}という指定をリセットcssに記述しています❕お試しください🙇‍♂️

@user-nw9lb4tb9f

Жыл бұрын

返信ありがとうございます！！出来ました！😊

大変参考になりました！ ただ、少し早く感じたのと、もう少しhtmlとcssの表示時間を長くしていただけると助かります。 止めながら、一緒に記載しながらの視聴でしたが、ぱっぱと行ってしまって置いていかれてる感がすこしありました。 今後も勉強させていただきます。

@hirocode

2 жыл бұрын

嬉しいコメントありがとうございます😊♪ スピードに関してそういったご意見いただけて大変参考になります🙇‍♂️❗️その点今後改善できたらと思います😆❗️ありがとうございます❗️

ナビゲーションリストを一度marign-left:auto で左寄せにして、　input タグを中央寄せにして　margin-left:auto を消しても左にナビゲーションリストがもどらないのは何故でしょうか？

@hirocode

2 жыл бұрын

コメントいただきありがとうございます😊♪ 28:00 この辺りのことだと思いますが、marginにautoを指定するイメージとして、空間に余裕があればできる限りその空間を開けるってイメージです😅（言葉で伝わりづらいと思いますが...） ↓■が親の横幅だとすると、何も指定しない場合、要素は左から順に配置されます。 ■[logo][input][nav]　　　　■ ここで、[nav]にmargin-left: auto;を指定すると、 ■[logo][input]←←←←[nav]■ こんな感じで、親の横幅に余裕があった分、[input]と[nav]の間に空間ができます。 ■[logo]←←[input]→→[nav]■ なので、inputの左右にmargin autoを指定していると上記のようなレイアウトになるって感じです❗️

@jptk6645

2 жыл бұрын

@@hirocode めちゃくちゃわかりやすい説明ありがとうございます！

5：16で、座標を表示されていましたが、これはどのようにして座標を表示させているのでしょうか？

@hirocode

2 жыл бұрын

コメントいただきありがとうございます😊♪ Macのスクショ機能で、ピクセルサイズを測ることができるのでそれを使用しています😅 「Command + Shift + 4」を押すとカーソルが表示されるので、ドラッグするとサイズが確認できます。そのままカーソルを離してしまうと、毎回スクリーンショットを撮ってしまうので、ESCキーでキャンセルしています😆❗️

@user-qs5lr3rg7s

2 жыл бұрын

​@@hirocode ご返信ありがとうございます。なるほど！windowsユーザーは、スクショはできますが、座標は出てこないみたいですね（笑） デベロッパーツールで工夫して調べます。

ショートカットキーなどによるわからない場所を0.25倍速にしたりするんですけどBGMがホラーじみていて少し怖いです笑

@hirocode

2 жыл бұрын

やってみたらほんとにホラー感出ててウケました笑😂

35:58の.li_video > li にpaddingを入れたら横に４つ入らなくなって３つ目で折り返してしまいます。頑張りましたが、解決しません。どうすればいいのでしょうか。

@hirocode

2 жыл бұрын

コメントいただきありがとうございます😊♪ もしかしたら、box-sizingが影響しているかもしれません。 次の1行をcss内に書いたら変わりませんでしょうか❓ *{box-sizing: border-box;} お試しください🙇‍♂️❗️

@user-ld2hs8qb8x

2 жыл бұрын

@@hirocode 返信ありがとうございます！変わりました！ ヒロさんの動画で引き続き勉強させていただきます🙇‍

@hirocode

2 жыл бұрын

良かったです😆❗️ ちなみに上記の記述は、 僕の環境だと「cssreset-min.css」 の中に記載してるので相違が出てしまったようです💦 ちゃんと説明していなくてすみません🙇‍♂️ 今後ともよろしくお願いします😊♪

@user-ld2hs8qb8x

2 жыл бұрын

@@hirocode よく見ればコメント欄に同じ質問をされてた方がいました。余計な時間をとらせてしまい申し訳ございません🙇‍ 応援してます❗

@hirocode

2 жыл бұрын

全然大丈夫です😆‼️ありがとうございます❗️

ネガティブマージンはよっぽどのことがない限りかけないほうがいい。 ネガティブマージンをかけないCSS設計を検討したほうがあとあとハマらなくて済む。

@hirocode

Жыл бұрын

おっしゃる通りです❕ 今だとflexboxやgrid layoutではgapプロパティが使えるようになったので、そっちの指定が推奨です🙇‍♂️❗️

main と　アイキャッチのtextにmin-width:10px;　があったのに、特に説明が無かったので気になりました。

@hirocode

2 жыл бұрын

すみません、これ完全に説明なかったんですが、 flexアイテムは、min-width: auto;が初期値になるので、コンテンツが外にはみ出してしまうケースが出てきます。それを回避するためにmin-widthをセットしています。min-width: 0;でも問題ないです❗️

@jptk6645

2 жыл бұрын

@@hirocode そうだったんですね。謎でした。

自分用11:45

@user-zc6ts2ct4e

3 жыл бұрын

大変勉強になりました、ありがとうございます！

@hirocode

3 жыл бұрын

こちらこそご視聴ありがとうございます🙇‍♂️❗️❗️

widthをワイドとは読まないので読み方調べた方がいいと思います笑 内容はすごい参考になるのですがそこが気になりすぎて話が入ってきません笑

@hirocode

2 жыл бұрын

コメントいただきありがとうございます😊♪ 僕としては横幅に100％を指定、みたいな感じで言ってるつもりなんですが、プロパティと値の説明するときにワイドって表現すると確かにわかりづらいですね💦すみません🙇‍♂️ 流石にwidthをワイドと読むとは思ってないので大丈夫です！笑 ちなみに、他の動画で言ってると思いますが僕はウィドゥス派ではなくウィッズ派です😆❗️

@theworldofsnails9126

2 жыл бұрын

なるほどです！ そもそもこの単語発音が難しすぎるんですよね笑

勉強になりました…。ところで15:00あたりでpxを測っていますがその拡張機能教えていただけませんでしょうか？

@hirocode

4 ай бұрын

コメントありがとうございます🙇 macだとcmd+shift+4で範囲指定の画面キャプチャができるので、そこで出てくる数値使って測っています😂

@user-dm3eo7oi5m

4 ай бұрын

​@@hirocodeありがとうございますm(_ _)m