Размер видео: 1280 X 720853 X 480640 X 360
Показать панель управления
Автовоспроизведение
Автоповтор
模写コーディングこれからも見ていきたいです！とても勉強になります！
嬉しいコメントありがとうございます😊🎵今後も上げてみたいと思います😆‼️
HIROさんの動画続けて何本も観てしまいました！3時間近く。XDの使い方から飛んできたのですが、コーディングやWEB デザインについてもシンプルでとてもわかりやすいです。
コメントいただきありがとうございます🙇♂️沢山みていただき嬉しいですー😭これからもっと参考にしていただけるような動画上げれるように頑張ります❗️
とても参考になり、楽しく視聴いたしました！ありがとうございまいた。
とっても嬉しいコメントいただき嬉しいです😭❗️こちらこそご視聴いただきありがとうございます🙇♂️❗️
みてて楽しかったです!モチベあがりました!参考にします!
楽しいと言っていただけてとても嬉しいです😊❗️ありがとうございます❗️❗️
為になる動画ありがとうございます！
こちらこそご視聴いただきありがとうございます🙇♂️❗️❗️
参考になりました！ありがとうございます！
嬉しいです😊❗️ありがとうございます❗️
毎回めちゃくちゃ参考にしてます！自分もプログラミング頑張ります！
ありがとうございます😭❗️僕も全然まだまだなので一緒に頑張ります❗️❗️
何回も動画見てRUclips page模写してます。とっても勉強になります！また他のサイトも模写してください！！！
ありがとうございます😭❗️次の模写動画出す予定あるので、それまでしばしお待ちください🙇♂️❗️❗️
なんとか作成できました、、！とてもわかりやすかったです。ありがとうございます:)
良かったです😆❗️ありがとうございます🙇❗️
こうしたいところですが、このような理由でこうします、とコードを組む説明が秀逸！同様のアプローチでの模写コーディング・デモンストレーション動画、楽しみにしています。
とても嬉しいコメントいただけて光栄です😭❗️また同じ形の動画出します！ありがとうございます🙇♂️❗️
クラウドソーシングでHTMLコーディングに取り組もうと考えていた初心者です。こちらの動画を真似して、スキル向上させて、案件獲得していきます！
参考にしていただけて嬉しいです♪応援してます😊❗️
とても参考になりました！実際に他の方が模写してる雰囲気を見れて良かったです！webgl？などが使われているサイト、パララックスが使われているサイトの模写もしていただけるととても嬉しいです！
少しでも参考にしていただけたようで嬉しいです☺️♪動画のご提案もいただきありがとうございます🙇♂️❗️
実際のコーディング風景が見れて勉強になりました！タイトルが2行に収まらない場合に省略する方法や、検索ボックスの右にあるサーチボタンをどのようにコーディングするのかも気になります！
コメントありがとうございます🙇♂️普段やらない喋りながら続けての作業だったので、中途半端なところで断念してしまいました😓こちらできれば続きも上げたいと思います❗️そのほかの模写コーディングも上げれればと思います❗️
凄いのひと言✨ホントに凄い‼️頭の中で組み上がっているのでしょうね😊自分も今、勉強中なのですが、ここまで出来るようになれる気がしない……😂参考にするのにオススメの本などがあれば教えて欲しいです！
嬉しいコメントいただきありがとうございます😭最初のうちは覚えることたくさんあって大変ですが、知識量に比例して速度も上がってくるので続けていれば大丈夫だと思います💪❗️概要欄の1番下の方にいくつかオススメ書籍📚載せているので参考にしてみてください😆‼️
めっちゃめっちゃすごく参考になり勉強になりました！コーディングを書いてるところなかなか見る機会ないので、作り方とか勉強になって感謝です。ありがとうございました。欲を言えば・・・もしできたらレスポンシブ対応までのコーディング動画が見たいです。
嬉しいコメントいただきありがとうございます😊♫ご要望ありがとうございます❗️レスポンシブの動画１つも出せてないので作ります❗️❗️
わぁー嬉しいです！ぜひレスポンシブ動画よろしくお願いします。ちなみに、この動画を見て4時間くらいかけてヒロコードさんのマネをしてコーディングしてみました。できました！！勉強になりました(☆▽☆)
webデザインに興味があるものです。ヒロコードさんの動画が分かりやすく色々な動画を見てしまいました笑前職はアンティークショップ店員さんだと動画でお聞きしたのですが、そこから現在の会社に入るまでの学習のロードマップなど教えて頂けると嬉しいです。動画作りとお仕事の両方大変かと思いますが応援しています！
動画色々見ていただけたようで嬉しいです😭ありがとうございます🙇♂️❗️僕の場合ちょっと特殊なのですが、他に参考になりそうな話も考えてゆるく話す動画あげれたらと思います❗️ご意見ありがとうございます😊応援コメントもありがとうございます😭
プロゲートを終えたばかりで次に何をやるか迷っていた時にこの動画に出会いました。今の自分にはレベルが高すぎてついていけない😂自分で模写コーディングできるように頑張ります♪
コメントいただきありがとうございます😊♪おっしゃる通り、最初のうちはシンプルなサイトからチャレンジするのが良いかもしれません！頑張ってください😆❕❕
@@hirocode ありがとうございます！頑張ります！
他にも模写コーディングの動画を希望します！
そういったご意見いただけて嬉しいです❗️他にもあげたいと思います😊❗️
すごい！ 参考になります！ ヒロコードさんのスキル力で時給換算するとどのくらいなのでしょうか？
コメントありがとうございます🙇♂️❗️Webデザインてクライアントの好みなどによっても作り直しなどがあって結構ばらつきがあるのですが、簡易的なwebサイト制作であれば5,000~10,000円/1h くらいかと思います💡僕がフリーランスだったら多分このくらいかなーって感じなのであくまでざっくりとした想定です😆❗️
何を模写するのかと思ったらRUclipsとかえぐいw
やっぱりすごいなぁ〜！こんなすらすら書いてみたいものです・・・笑そして、 34:09 こんな技があったのか〜！絶対に思いつかない・・・
ありがとうございます😊♪今だとgapというめちゃめちゃ便利なプロパティが使えるようになったので、そちらの利用がオススメです😆❗️
@@hirocode gap! ありがとうございます！ 調べてみます🙌
為になる動画をありがとうございます、お勉強させてもらってます。サイドバーメニューのアイコンに1つ1つアイコンを当てていくのは一体どうやってやるのでしょうか？
こちらこそご視聴いただきありがとうございます😊♪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レイアウト難しい。笑
嬉しいコメントありがとうございます🙇♂️ なんだかんだレイアウトは結構難しいですよね💦
とても参考になります！先週、初めて知り合いから案件を頼まれたので奮起しています。でも知識も実践が足りなさ過ぎて本やネットに書いてあるコードをそのまま写す…とかもザラです…。もっと頑張らねば…
コメントいただきありがとうございます😊♪最初の頃はみんな、見つけたコードそのままコピーして使って、って感じで覚えてくと思います❗️案件頑張ってください😆‼️
どの動画も分かりやすくて感謝しています。次回も楽しみにしています！模写するサイト「airbnb」はいかがでしょうか？？
こちらこそご視聴いただきありがとうございます🙇♂️❗️Airbnbのサイト模写するサイトとして良さそうですね😆次の模写動画多分このサイトにすると思います❗️❗️ご提案いただきありがとうございます😊♪
@@hirocode わ〜ありがとうございます！楽しみにしています✨
質問です。フロントエンドエンジニアを目指してる大学生です。html,css,JavaScriptを一通り勉強して、ポートフォリオ制作を始めています。作っているのは主にwebサイトなのですが、フロントエンドエンジニア志望でもPhotoshopや Illustratorでデザインができることをアピールすることは有効ですか？
コメントありがとうございます🙇♂️会社の構造にもよるかと思いますが、完全に分業されている企業の場合はそこまで大きなアピールポイントにはならないはないかもしれません💦ただ、レベルにもよるかとは思いますが、デザイン含めてWebサービス構築に関しての知識や自主的な経験も踏まえて多いことに越したことは無いと思います‼️共有して損はないんじゃないでしょうか😆
とても分かりやすいです！コードエディターは何を使われていますか？
嬉しいです！ありがとうございます😊♪この動画ではCoda2を使用していて、最近はVSCodeをメインで使っています❕
全然わからんけど、楽しかった^_^
コーディング知らない方からしたら意味わからない動画ですよね😂それでも楽しんでいただけてよかったです😆❗️ご視聴いただきありがとうございます🙇♂️
いつもわかりやすい動画ありがとうございます✨テキストエディターで合ってるでしょうか？すごく見やすいので何を使用されているのか教えていただけないでしょうか。コメントもすべて勉強材料になってとてもありがたいです！
嬉しいコメントいただきありがとうございます😊♪この動画ではCoda2という有料のエディタを使用しています❗️最近は主にVSCodeという無料のエディタ使っていて、今だとそっちをオススメしています😆❗️
@@hirocode ご返答ありがとうございます！Coda2というエディタなんですね、すごく見やすいです✨今VSCode使っていて、ヒロさんのオススメでしたら、このままVSCodeで動画を見ながら同じように模写コーディングしてみます😆早くヒロさんみたいにスラスラ打てるようになりたいので、他の動画も参考に勉強します💨
今VSCode使ってるんですね❗️❗️VSCodeはプラグインで便利に使えるようになるので、オススメのプラグイン紹介動画もあるので、そこら辺触ったことなければ参考にしてみてください😆！応援してます❗️
@@hirocode ありがとうございます！VSCodeのプラグインも、ヒロさんの動画を見ながら入れて使ってます✨模写コーディングの動画もですが、他の動画もわかりやすく理解できて感動です😆勉強していて楽しいのも、ヒロさんのおかげです。これからも応援しています💨
フレックスボックスの動画を拝見してから登録して勉強させていただいております。質問です。「sidebar」のアイコン用の位置調整について。「top: 50%;」で位置を下げてからまた上に移動されていますが、何かのバグ対策でしょうか？そもそも「top: 50%;」なしでも位置的に問題ないように見えます。お暇なときにご教示いただけますと幸いです。いつも細かくわかりやすい解説動画に助けられています。これからも更新を期待しております。
コメントありがとうございます😊🎵アイコンサイズやテキストサイズを今後調整する可能性を考えてこのような形で組んでいます❗️例えば、アイコンのサイズを縦横8pxとかにした場合、あらかじめtop50%の指定にしておくことで、常にテキストとセンター揃えになるので、アイコンの位置調整をする必要が無くなります😆‼️
@@hirocode さん、ご回答ありがとうございます。☺現役の方でないとできない仕掛けですね！スッキリしました！今後の追加動画にも期待して応援しています！
大変勉強になります！独学でなかなか進めなかったですが、説明わかりやすくとても助かりました。ありがとうございます：D一つの質問をさせていただきたいですが、約16:50からサイトバーのアイコンとテキストの並べ方を説明していただいて、なんとなくわかりましたが、逆にtop: 50%; transform: translateY(-50%); を両方とも削除しても真ん中に揃えていますが、必ずtop:50%を先につける理由を説明していただれば嬉しいです。基本的な質問ですみません...よろしくお願いします。
コメントありがとうございます🙇♂️上記書かれているコードでも問題なさそうですね😲❗️少し調べてみたのですが、おそらくtop→auto、bottom→autoがデフォルトで値の様なので、上下中央に揃っているのかと思います❗️absoluteしたときにtop,leftなどの値を指定しないとIEで崩れる問題あった記憶があるので、その点大丈夫そうならそれで全然問題なさそうです😊❗️こちらこそ勉強になりました🙇♂️top 50% transform -50% の応用的な使い方で言うと、右側のテキスト量が長くて折り返す可能性がある場合、1行目にアイコン中央に揃えておきたい場合なんかはtop 0.6em , transform -50%と指定すればうまくいくかと思います！あとはアイコンのバランスが悪い場合に、translate (calc(-50% + 2px))とかの指定もできるので、そう言う場面あれば使ってみてください😆❗️❗️
現在、Webデザイン勉強中のママです。とても参考にさせていただいてます。動画止めながら一緒に模写してます。初心者で申し訳ないのですが、Goliveとhtmlとcssの画面を同時に出しているのは、何か出し方がありますか？それとも、RUclips用ですか？実際にこんな感じで見れたら便利だなと思って。
コメントいただきありがとうございます😊♪基本的にはコードエディタには画面分割機能ついているはずなので、HTMLとCSSの画面を同時に表示することが可能です😆❗️この動画では、ブラウザ画面とコードエディタ画面を同じウィンドウ上に表示しています。ブラウザの右端を縮めて裏側にあるコードエディタにいつでもアクセスできるようにして使用しています！！
こんにちは。勉強させていただいてます。最初のほう 5:00あたりで display: flex にしても dev toolのuser style sheet を見ると サイドバーとメインが display: blockとなってしまい 横に並んでくれません。何がいけないのでしょう？
コメントいただきありがとうございます😊♪横並びについて、サイドバーとメインのdisplay属性はここでは関係なくて、親要素の.layout_pageにdisplay: flex;が正しく当たっているかが重要かと思われます。下記参考にご自身のコードと照らし合わせてみてください😆❗️解決しなければ再度コメントください🙇♂️ サイドバー メイン .layout_page { display: flex; } .sidebar { flex: 0 0 240px; } .main { flex: auto; }
サイドバーを作っている時に、ホーム、急上昇、登録チャンネル作ってコピペした時に、いきなり全てが整っているのは、なにかショートカットをしたのですか？
コメントいただきありがとうございます😊❗️14:15 このあたりの表示でしょうか❓ここについてはコピー&ペーストの作業なので、動画自体をカットして載せていて、実際はコピー&ペーストとテキストを変更する地道な作業を行なっています😅ご質問の意図違っていたら再度コメントいただければ嬉しいです🙇♂️❗️
はじめまして！ヒロコードさんみたいな画面を別けてコードを書きたいと思っているのですが、どのように設定してますでしょうか？
VSCodeであれば表示→エディターレイアウトから分割できます😆❗️
AppleのiPhone12のページの模写コーディングが見たいです。
コメントありがとうございます😊❗️iPhone12のページかっこいいですよね😆♪スクロールとモックが連動して動く箇所についてcanvasタグで組まれているようです。canvasタグはjavascriptと併用する必要があり、難易度が他の動画と比べて上がってしまうため、javascriptの基礎動画を出したタイミングか、もしくは簡単に実現できそうなライブラリなどあれば、その時期に合わせて検討してみたいと思います❗️ご意見いただきありがとうございます🙇♂️❗️
@@hirocode 返信ありがとうございます！楽しみにして待ってます！
動画拝見させて頂きました。模写コーディングでよく拝見するのですが、マージンや高さ、画像のサイズを知る際にマウスをホバーすると値が出るのは、どの様にすればそうなるんでしょうか?デベロッパーツールだと結構見にくくてわからずらく、初心者の私には味方が難しく時間がかかってしまってます。教えて頂けますでしょうか？
コメントいただきありがとうございます😊♪デベロッパーツールのインスペクトモードのことでしょうか？？デベロッパーツール左上の矢印を選択した状態で要素にカーソルを合わせると、マージンやサイズなどが表示されるようになります😆❗️もしおっしゃってることと相違ありましたら再度コメントください🙇♂️❗️❗️
恐れ入ります。返信頂き有り難うございます。先日の質問内容を確認いたしましたが、パソコンがWindowsということでしょうか?表示をすると、こちらの画像と違っています。こちらではマウスをホバーすると丸い透明色の円が出て数字がみてとれますが、自身のパソコンではホバーするとmarginもpaddingもheight…などが一覧で表示されます。この違いはどうしてでしょうか?
@@user-ef3dc4pb6m すみません、お手数をおかけしますが、この動画の何分何秒の表示か教えていただければ回答できるかもしれません🙇♂️💦よろしくお願いします！
お世話になります。この動画に限らずですが、この動画でいえば15：47のところです。私のパソコンではデベロッパーツールを開いてカーソルとあてるとこれとは違う表示がなされます。これには何かしらのやり方があるのでしょうか？
ご確認いただきありがとうございます🙇♂️❗️ここではmac標準機能の範囲指定のスクリーンショット機能を使ってます！範囲指定のスクリーンショットでは選択した範囲のピクセル数が表示されるので、簡易的にサイズを測る際に使用しています😂macお使いでしたら、cmd + shift + 4 でカーソル変化するのでドラッグすれば同じ挙動になります。ドラッグ放すとスクショ撮ってしまうので、escキーでキャンセルしてます😆❗️
スーパー初心者です。そもそもな質問で申し訳ありません、、、この入力していってるのはソフトか何かですか？デベロッパーツール？
コメントいただきありがとうございます☺️♪これはコードエディターという、コードを編集するツールです❗️コードエディターにもいくつか種類があるんですが、動画で使用しているのはCoda2というエディターで、最近だとVSCodeが人気なのでそっちを使用することが多いです！！
ダラダラ勉強するよりも、模写コーディングして要領を掴んだ方がいいと思うのですがどうなんですかね。
そうかもしれないです❗️知識つけてからというよりかは、わからないところを調べながら実践した方が効率的だと思います❗️
楽天市場のコーディングをどうしても知りたいです。楽天GOLDで使用できる言語などご存知でしょうか？
楽天市場GOLDって知りませんでした😵❗️調べてみたんですが、HTML,CSS,Javascriptが使えるようです❗️❗️
初めまして！サムネイル画像比率保持の部分で、疑似要素を追加して比率保持しようとすると赤いサムネイル画像が表示されなくなってしまいます。contentも入れてます。コード見ないと何とも言えないかもしれませんが、どの辺を確認してみたらいいでしょうか😢💦
もしかしたら、display: block;が抜けているなどがあるかもしれません。↓に同じコード書いてみたので、こちらと比較してみてください😆❗️www.craft.do/s/sOFmX68xWHUgz0
@@hirocode ありがとうございます！試しにコピペしてみたら比率保持出来ました！色々確認して見たらCSSで「.list_video .thumb:before {」の部分の「.thumb」と「:before」の間にスペースが入ってました😓一人では気が付けなかったので助かりました。返信、比較のコードありがとうございます！引き続きがんばります☺
解決したようでよかったです☺️♪そういうところなかなか気づけないですよね💦引き続き頑張ってください😆❗️
8:18の所で、.headerクラスの背景に何故青色が付くのかが分かりません。また、.headerクラスの上下左右と.sidebarクラス、.mainクラスの上右左に白く余白が出てしまうのは何故なのでしょうか？ヒロコードさんのコードと同じように入力はしてるのですが、うまくいきません。。。教えて頂けると嬉しいです。
コメントありがとうございます☺️♪8:18の部分で背景が青いのは、5:55での変更を保存してないためです（すみません意図はなくミスです😅）！動画内で説明できてなくて申し訳ないんですが、余白が出るのはおそらくリセットcssを読み込んでいないためです！* { margin: 0; box-sizing: border-box;}簡単なリセットとして、CSSの始まりにこれ記載するだけで余白はなくなると思うので試してみてください😆❗️
初めまして。手順どおり模写していたのですが、34:57あたりの.list_video liタグにpadding:10pxをつけると崩れてしまいます、、。アドバイス頂けたら助かります😫
説明漏れていてすみません！* {box-sizing: border-box;}という指定をリセットcssに記述しています❕お試しください🙇♂️
返信ありがとうございます！！出来ました！😊
質問です。リスト「.li」を書いた時に文の頭に黒丸ができると思うのですが、なぜヒロコードさんはできないのですか？
ご質問いただきありがとうございます🙇♂️説明なくてすみません💦これは、リセットcssという、ブラウザのデフォルトのスタイルを打ち消すCSSを読み込んだ上で、独自のスタイルシート(style.css)を読み込んでいるためです！上記のように、デフォルト打ち消し＋独自のスタイルを当てるという形でコーディングしていくのが一般的かと思います。リストについては、ブラウザのデフォルトで、ulタグに対してlist-style-type: disc;という指定がされているので黒丸が表示されます。リセットCSSには、ulタグに対してlist-style-type: none;という記述があるため、黒丸が表示されないように打ち消されています❗️
@@hirocode 丁寧に説明ありがとうございます！！
エディタは何を使ってるのでしょうか。VSCode？上下ウィンドウ使いやすそう
最近はメインでVSCode使ってますが、この動画のエディタはCoda2というエディタです😊♪VSCodeだと、開いているファイルのタブ部分を右クリック→下に分割で上下ウィンドウ分けることできます😆❕
@@hirocode 返信ありがとうございます！そうなんですね‼︎VS codeでも再現できるのであれば今度、上下ウェインドウでやってみます✨
画面のサイズを図る時何を使ってますか？ショートカットキー、、、？Macですよね
command + shift + 4 で部分スクショのカーソルになるので、それで選択箇所のサイズ確認した後escキーでキャンセルしてます😆笑
@@hirocode キャンセルしてるんですね！初歩的なことも丁寧に返信していただきありがとうございます…！
li の中にarticle や div をいれても大丈夫なのでしょうか？
コメントありがとうございます😊♪liの中にはどんなタグ入れても大丈夫です！ただ、ulの直下にli以外を入れるのはNGってなってます💡
@@hirocode 直下ならOKなんですね！ありがとうございます。
ナビゲーションリストを一度marign-left:auto で左寄せにして、 input タグを中央寄せにして margin-left:auto を消しても左にナビゲーションリストがもどらないのは何故でしょうか？
コメントいただきありがとうございます😊♪28:00この辺りのことだと思いますが、marginにautoを指定するイメージとして、空間に余裕があればできる限りその空間を開けるってイメージです😅（言葉で伝わりづらいと思いますが...）↓■が親の横幅だとすると、何も指定しない場合、要素は左から順に配置されます。■[logo][input][nav] ■ここで、[nav]にmargin-left: auto;を指定すると、■[logo][input]←←←←[nav]■こんな感じで、親の横幅に余裕があった分、[input]と[nav]の間に空間ができます。■[logo]←←[input]→→[nav]■なので、inputの左右にmargin autoを指定していると上記のようなレイアウトになるって感じです❗️
@@hirocode めちゃくちゃわかりやすい説明ありがとうございます！
ご丁寧な回答ありがとうございます。しかしうまくいきません。サイドバーとメインが縦に並んでるだけです。試しに色も付けようとしましたが以前と違い 色まで反映されなくなりました。最初のどこかで間違っているみたいです。＜Style＞の最初のタグに赤いエラー下線がついてしまいます。泣きそうです。
こちらにhtmlファイルの中身をまるっとコピペしていただけたらわかるかもしれません❗️
大変参考になりました！ただ、少し早く感じたのと、もう少しhtmlとcssの表示時間を長くしていただけると助かります。止めながら、一緒に記載しながらの視聴でしたが、ぱっぱと行ってしまって置いていかれてる感がすこしありました。今後も勉強させていただきます。
嬉しいコメントありがとうございます😊♪スピードに関してそういったご意見いただけて大変参考になります🙇♂️❗️その点今後改善できたらと思います😆❗️ありがとうございます❗️
width:240px; でなくて flex:0 0 240px;といれたのはなぜでしょうか？ 試しに width:240px 入れたら狭くなってしまいました。flex:0 0 40px; のアイキャッチは width:40px;でも変わりませんでした。
display: flex;直下の要素は、flexアイテムになります。また、flex-shrinkのデフォルト値は1で、縮小を許容する指定になっています。なので、親要素のサイズ次第で、flexアイテムは縮小します。それを回避するため、flex-shrink: 0;（縮小させない）を指定する必要があるので、flexプロパティで指定しているって形です❗️アイキャッチに関しては、他要素がそれに影響しないサイズなので、サイズ保っているだけかと思われます❗️
@@hirocode わかりやすい説明ありがとうございます！flex: 0(伸ばさない）０縮小させない 240px ということだったんですね。 flex の中にある幅はなるべくflex の値を用いた方が良さそうですね。 youtubeの模写は２回やってなんとなく掴めた気がします。(気がしただけかもですが。）動画もそうですが、コメント欄の回答もとても勉強になります＾＾
5：16で、座標を表示されていましたが、これはどのようにして座標を表示させているのでしょうか？
コメントいただきありがとうございます😊♪Macのスクショ機能で、ピクセルサイズを測ることができるのでそれを使用しています😅「Command + Shift + 4」を押すとカーソルが表示されるので、ドラッグするとサイズが確認できます。そのままカーソルを離してしまうと、毎回スクリーンショットを撮ってしまうので、ESCキーでキャンセルしています😆❗️
@@hirocode ご返信ありがとうございます。なるほど！windowsユーザーは、スクショはできますが、座標は出てこないみたいですね（笑）デベロッパーツールで工夫して調べます。
35:58の.li_video > li にpaddingを入れたら横に４つ入らなくなって３つ目で折り返してしまいます。頑張りましたが、解決しません。どうすればいいのでしょうか。
コメントいただきありがとうございます😊♪もしかしたら、box-sizingが影響しているかもしれません。次の1行をcss内に書いたら変わりませんでしょうか❓*{box-sizing: border-box;}お試しください🙇♂️❗️
@@hirocode 返信ありがとうございます！変わりました！ヒロさんの動画で引き続き勉強させていただきます🙇
良かったです😆❗️ちなみに上記の記述は、 僕の環境だと「cssreset-min.css」 の中に記載してるので相違が出てしまったようです💦ちゃんと説明していなくてすみません🙇♂️今後ともよろしくお願いします😊♪
@@hirocode よく見ればコメント欄に同じ質問をされてた方がいました。余計な時間をとらせてしまい申し訳ございません🙇応援してます❗
全然大丈夫です😆‼️ありがとうございます❗️
ショートカットキーなどによるわからない場所を0.25倍速にしたりするんですけどBGMがホラーじみていて少し怖いです笑
やってみたらほんとにホラー感出ててウケました笑😂
ネガティブマージンはよっぽどのことがない限りかけないほうがいい。ネガティブマージンをかけないCSS設計を検討したほうがあとあとハマらなくて済む。
おっしゃる通りです❕今だとflexboxやgrid layoutではgapプロパティが使えるようになったので、そっちの指定が推奨です🙇♂️❗️
自分用11:45
大変勉強になりました、ありがとうございます！
こちらこそご視聴ありがとうございます🙇♂️❗️❗️
main と アイキャッチのtextにmin-width:10px; があったのに、特に説明が無かったので気になりました。
すみません、これ完全に説明なかったんですが、flexアイテムは、min-width: auto;が初期値になるので、コンテンツが外にはみ出してしまうケースが出てきます。それを回避するためにmin-widthをセットしています。min-width: 0;でも問題ないです❗️
@@hirocode そうだったんですね。謎でした。
widthをワイドとは読まないので読み方調べた方がいいと思います笑 内容はすごい参考になるのですがそこが気になりすぎて話が入ってきません笑
コメントいただきありがとうございます😊♪僕としては横幅に100％を指定、みたいな感じで言ってるつもりなんですが、プロパティと値の説明するときにワイドって表現すると確かにわかりづらいですね💦すみません🙇♂️流石にwidthをワイドと読むとは思ってないので大丈夫です！笑ちなみに、他の動画で言ってると思いますが僕はウィドゥス派ではなくウィッズ派です😆❗️
なるほどです！そもそもこの単語発音が難しすぎるんですよね笑
勉強になりました…。ところで15:00あたりでpxを測っていますがその拡張機能教えていただけませんでしょうか？
コメントありがとうございます🙇macだとcmd+shift+4で範囲指定の画面キャプチャができるので、そこで出てくる数値使って測っています😂
@@hirocodeありがとうございますm(_ _)m
模写コーディングこれからも見ていきたいです！とても勉強になります！
嬉しいコメントありがとうございます😊🎵今後も上げてみたいと思います😆‼️
HIROさんの動画続けて何本も観てしまいました！3時間近く。
XDの使い方から飛んできたのですが、コーディングやWEB デザインについてもシンプルでとてもわかりやすいです。
コメントいただきありがとうございます🙇♂️
沢山みていただき嬉しいですー😭
これからもっと参考にしていただけるような動画上げれるように頑張ります❗️
とても参考になり、楽しく視聴いたしました！ありがとうございまいた。
とっても嬉しいコメントいただき嬉しいです😭❗️
こちらこそご視聴いただきありがとうございます🙇♂️❗️
みてて楽しかったです!
モチベあがりました!
参考にします!
楽しいと言っていただけてとても嬉しいです😊❗️
ありがとうございます❗️❗️
為になる動画ありがとうございます！
こちらこそご視聴いただきありがとうございます🙇♂️❗️❗️
参考になりました！ありがとうございます！
嬉しいです😊❗️ありがとうございます❗️
毎回めちゃくちゃ参考にしてます！
自分もプログラミング頑張ります！
ありがとうございます😭❗️
僕も全然まだまだなので一緒に頑張ります❗️❗️
何回も動画見てRUclips page模写してます。とっても勉強になります！また他のサイトも模写してください！！！
ありがとうございます😭❗️
次の模写動画出す予定あるので、それまでしばしお待ちください🙇♂️❗️❗️
なんとか作成できました、、！
とてもわかりやすかったです。ありがとうございます:)
良かったです😆❗️ありがとうございます🙇❗️
こうしたいところですが、このような理由でこうします、とコードを組む説明が秀逸！
同様のアプローチでの模写コーディング・デモンストレーション動画、楽しみにしています。
とても嬉しいコメントいただけて光栄です😭❗️
また同じ形の動画出します！ありがとうございます🙇♂️❗️
クラウドソーシングでHTMLコーディングに取り組もうと考えていた初心者です。こちらの動画を真似して、スキル向上させて、案件獲得していきます！
参考にしていただけて嬉しいです♪応援してます😊❗️
とても参考になりました！
実際に他の方が模写してる雰囲気を見れて良かったです！
webgl？などが使われているサイト、パララックスが使われているサイトの模写もしていただけるととても嬉しいです！
少しでも参考にしていただけたようで嬉しいです☺️♪動画のご提案もいただきありがとうございます🙇♂️❗️
実際のコーディング風景が見れて勉強になりました！
タイトルが2行に収まらない場合に省略する方法や、検索ボックスの右にあるサーチボタンをどのようにコーディングするのかも気になります！
コメントありがとうございます🙇♂️
普段やらない喋りながら続けての作業だったので、中途半端なところで断念してしまいました😓
こちらできれば続きも上げたいと思います❗️そのほかの模写コーディングも上げれればと思います❗️
凄いのひと言✨
ホントに凄い‼️
頭の中で組み上がっているのでしょうね😊
自分も今、勉強中なのですが、ここまで出来るようになれる気がしない……😂
参考にするのにオススメの本などがあれば教えて欲しいです！
嬉しいコメントいただきありがとうございます😭
最初のうちは覚えることたくさんあって大変ですが、知識量に比例して速度も上がってくるので続けていれば大丈夫だと思います💪❗️
概要欄の1番下の方にいくつかオススメ書籍📚載せているので参考にしてみてください😆‼️
めっちゃめっちゃすごく参考になり勉強になりました！
コーディングを書いてるところなかなか見る機会ないので、作り方とか勉強になって感謝です。
ありがとうございました。欲を言えば・・・もしできたらレスポンシブ対応までのコーディング動画が見たいです。
嬉しいコメントいただきありがとうございます😊♫
ご要望ありがとうございます❗️レスポンシブの動画１つも出せてないので作ります❗️❗️
わぁー嬉しいです！ぜひレスポンシブ動画よろしくお願いします。
ちなみに、この動画を見て4時間くらいかけてヒロコードさんのマネをしてコーディングしてみました。できました！！勉強になりました(☆▽☆)
webデザインに興味があるものです。ヒロコードさんの動画が分かりやすく色々な動画を見てしまいました笑
前職はアンティークショップ店員さんだと動画でお聞きしたのですが、そこから現在の会社に入るまでの学習のロードマップなど教えて頂けると嬉しいです。
動画作りとお仕事の両方大変かと思いますが応援しています！
動画色々見ていただけたようで嬉しいです😭ありがとうございます🙇♂️❗️
僕の場合ちょっと特殊なのですが、他に参考になりそうな話も考えてゆるく話す動画あげれたらと思います❗️ご意見ありがとうございます😊応援コメントもありがとうございます😭
プロゲートを終えたばかりで次に何をやるか迷っていた時にこの動画に出会いました。
今の自分にはレベルが高すぎてついていけない😂
自分で模写コーディングできるように頑張ります♪
コメントいただきありがとうございます😊♪
おっしゃる通り、最初のうちはシンプルなサイトからチャレンジするのが良いかもしれません！頑張ってください😆❕❕
@@hirocode ありがとうございます！
頑張ります！
他にも模写コーディングの動画を希望します！
そういったご意見いただけて嬉しいです❗️他にもあげたいと思います😊❗️
すごい！ 参考になります！ ヒロコードさんのスキル力で時給換算するとどのくらいなのでしょうか？
コメントありがとうございます🙇♂️❗️
Webデザインてクライアントの好みなどによっても作り直しなどがあって結構ばらつきがあるのですが、簡易的なwebサイト制作であれば5,000~10,000円/1h くらいかと思います💡僕がフリーランスだったら多分このくらいかなーって感じなのであくまでざっくりとした想定です😆❗️
何を模写するのかと思ったらRUclipsとかえぐいw
やっぱりすごいなぁ〜！こんなすらすら書いてみたいものです・・・笑
そして、 34:09 こんな技があったのか〜！絶対に思いつかない・・・
ありがとうございます😊♪
今だとgapというめちゃめちゃ便利なプロパティが使えるようになったので、そちらの利用がオススメです😆❗️
@@hirocode
gap! ありがとうございます！ 調べてみます🙌
為になる動画をありがとうございます、お勉強させてもらってます。
サイドバーメニューのアイコンに1つ1つアイコンを当てていくのは一体どうやってやるのでしょうか？
こちらこそご視聴いただきありがとうございます😊♪
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レイアウト難しい。笑
嬉しいコメントありがとうございます🙇♂️ なんだかんだレイアウトは結構難しいですよね💦
とても参考になります！
先週、初めて知り合いから案件を頼まれたので奮起しています。でも知識も実践が足りなさ過ぎて本やネットに書いてあるコードをそのまま写す…とかもザラです…。
もっと頑張らねば…
コメントいただきありがとうございます😊♪
最初の頃はみんな、見つけたコードそのままコピーして使って、って感じで覚えてくと思います❗️
案件頑張ってください😆‼️
どの動画も分かりやすくて感謝しています。
次回も楽しみにしています！
模写するサイト「airbnb」はいかがでしょうか？？
こちらこそご視聴いただきありがとうございます🙇♂️❗️
Airbnbのサイト模写するサイトとして良さそうですね😆
次の模写動画多分このサイトにすると思います❗️❗️
ご提案いただきありがとうございます😊♪
@@hirocode わ〜ありがとうございます！楽しみにしています✨
質問です。フロントエンドエンジニアを目指してる大学生です。html,css,JavaScriptを一通り勉強して、ポートフォリオ制作を始めています。作っているのは主にwebサイトなのですが、フロントエンドエンジニア志望でもPhotoshopや Illustratorでデザインができることをアピールすることは有効ですか？
コメントありがとうございます🙇♂️
会社の構造にもよるかと思いますが、完全に分業されている企業の場合はそこまで大きなアピールポイントにはならないはないかもしれません💦
ただ、レベルにもよるかとは思いますが、デザイン含めてWebサービス構築に関しての知識や自主的な経験も踏まえて多いことに越したことは無いと思います‼️共有して損はないんじゃないでしょうか😆
とても分かりやすいです！コードエディターは何を使われていますか？
嬉しいです！ありがとうございます😊♪
この動画ではCoda2を使用していて、最近はVSCodeをメインで使っています❕
全然わからんけど、楽しかった^_^
コーディング知らない方からしたら意味わからない動画ですよね😂
それでも楽しんでいただけてよかったです😆❗️ご視聴いただきありがとうございます🙇♂️
いつもわかりやすい動画ありがとうございます✨
テキストエディターで合ってるでしょうか？
すごく見やすいので何を使用されているのか教えていただけないでしょうか。
コメントもすべて勉強材料になってとてもありがたいです！
嬉しいコメントいただきありがとうございます😊♪
この動画ではCoda2という有料のエディタを使用しています❗️最近は主にVSCodeという無料のエディタ使っていて、今だとそっちをオススメしています😆❗️
@@hirocode
ご返答ありがとうございます！Coda2というエディタなんですね、すごく見やすいです✨今VSCode使っていて、ヒロさんのオススメでしたら、このままVSCodeで動画を見ながら同じように模写コーディングしてみます😆早くヒロさんみたいにスラスラ打てるようになりたいので、他の動画も参考に勉強します💨
今VSCode使ってるんですね❗️❗️VSCodeはプラグインで便利に使えるようになるので、オススメのプラグイン紹介動画もあるので、そこら辺触ったことなければ参考にしてみてください😆！
応援してます❗️
@@hirocode
ありがとうございます！VSCodeのプラグインも、ヒロさんの動画を見ながら入れて使ってます✨模写コーディングの動画もですが、他の動画もわかりやすく理解できて感動です😆勉強していて楽しいのも、ヒロさんのおかげです。これからも応援しています💨
フレックスボックスの動画を拝見してから登録して勉強させていただいております。
質問です。「sidebar」のアイコン用の位置調整について。「top: 50%;」で位置を下げてからまた上に移動されていますが、何かのバグ対策でしょうか？そもそも「top: 50%;」なしでも位置的に問題ないように見えます。お暇なときにご教示いただけますと幸いです。
いつも細かくわかりやすい解説動画に助けられています。これからも更新を期待しております。
コメントありがとうございます😊🎵
アイコンサイズやテキストサイズを今後調整する可能性を考えてこのような形で組んでいます❗️
例えば、アイコンのサイズを縦横8pxとかにした場合、あらかじめtop50%の指定にしておくことで、常にテキストとセンター揃えになるので、アイコンの位置調整をする必要が無くなります😆‼️
@@hirocode さん、ご回答ありがとうございます。☺現役の方でないとできない仕掛けですね！スッキリしました！今後の追加動画にも期待して応援しています！
大変勉強になります！
独学でなかなか進めなかったですが、説明わかりやすくとても助かりました。
ありがとうございます：D
一つの質問をさせていただきたいですが、
約16:50からサイトバーのアイコンとテキストの並べ方を説明していただいて、
なんとなくわかりましたが、
逆に
top: 50%;
transform: translateY(-50%);
を両方とも削除しても真ん中に揃えていますが、必ずtop:50%を先につける理由を説明していただれば嬉しいです。
基本的な質問ですみません...よろしくお願いします。
コメントありがとうございます🙇♂️
上記書かれているコードでも問題なさそうですね😲❗️
少し調べてみたのですが、おそらくtop→auto、bottom→autoがデフォルトで値の様なので、上下中央に揃っているのかと思います❗️
absoluteしたときにtop,leftなどの値を指定しないとIEで崩れる問題あった記憶があるので、その点大丈夫そうならそれで全然問題なさそうです😊❗️こちらこそ勉強になりました🙇♂️
top 50% transform -50% の応用的な使い方で言うと、右側のテキスト量が長くて折り返す可能性がある場合、1行目にアイコン中央に揃えておきたい場合なんかはtop 0.6em , transform -50%と指定すればうまくいくかと思います！
あとはアイコンのバランスが悪い場合に、translate (calc(-50% + 2px))とかの指定もできるので、そう言う場面あれば使ってみてください😆❗️❗️
現在、Webデザイン勉強中のママです。
とても参考にさせていただいてます。
動画止めながら一緒に模写してます。
初心者で申し訳ないのですが、Goliveとhtmlとcssの画面を同時に出しているのは、何か出し方がありますか？
それとも、RUclips用ですか？
実際にこんな感じで見れたら便利だなと思って。
コメントいただきありがとうございます😊♪
基本的にはコードエディタには画面分割機能ついているはずなので、HTMLとCSSの画面を同時に表示することが可能です😆❗️
この動画では、ブラウザ画面とコードエディタ画面を同じウィンドウ上に表示しています。ブラウザの右端を縮めて裏側にあるコードエディタにいつでもアクセスできるようにして使用しています！！
こんにちは。勉強させていただいてます。最初のほう 5:00あたりで display: flex にしても dev toolのuser style sheet を見ると サイドバーとメインが display: blockとなってしまい 横に並んでくれません。何がいけないのでしょう？
コメントいただきありがとうございます😊♪
横並びについて、サイドバーとメインのdisplay属性はここでは関係なくて、親要素の.layout_pageにdisplay: flex;が正しく当たっているかが重要かと思われます。
下記参考にご自身のコードと照らし合わせてみてください😆❗️解決しなければ再度コメントください🙇♂️
サイドバー
メイン
.layout_page {
display: flex;
}
.sidebar {
flex: 0 0 240px;
}
.main {
flex: auto;
}
サイドバーを作っている時に、ホーム、急上昇、登録チャンネル作ってコピペした時に、いきなり全てが整っているのは、なにかショートカットをしたのですか？
コメントいただきありがとうございます😊❗️
14:15 このあたりの表示でしょうか❓
ここについてはコピー&ペーストの作業なので、動画自体をカットして載せていて、実際はコピー&ペーストとテキストを変更する地道な作業を行なっています😅
ご質問の意図違っていたら再度コメントいただければ嬉しいです🙇♂️❗️
はじめまして！
ヒロコードさんみたいな画面を別けてコードを書きたいと思っているのですが、どのように設定してますでしょうか？
VSCodeであれば表示→エディターレイアウトから分割できます😆❗️
AppleのiPhone12のページの模写コーディングが見たいです。
コメントありがとうございます😊❗️
iPhone12のページかっこいいですよね😆♪
スクロールとモックが連動して動く箇所についてcanvasタグで組まれているようです。
canvasタグはjavascriptと併用する必要があり、難易度が他の動画と比べて上がってしまうため、javascriptの基礎動画を出したタイミングか、もしくは簡単に実現できそうなライブラリなどあれば、その時期に合わせて検討してみたいと思います❗️ご意見いただきありがとうございます🙇♂️❗️
@@hirocode 返信ありがとうございます！楽しみにして待ってます！
動画拝見させて頂きました。
模写コーディングでよく拝見するのですが、マージンや高さ、画像のサイズを知る際にマウスをホバーすると値が出るのは、どの様にすればそうなるんでしょうか?
デベロッパーツールだと結構見にくくてわからずらく、初心者の私には味方が難しく時間がかかってしまってます。
教えて頂けますでしょうか？
コメントいただきありがとうございます😊♪
デベロッパーツールのインスペクトモードのことでしょうか？？
デベロッパーツール左上の矢印を選択した状態で要素にカーソルを合わせると、マージンやサイズなどが表示されるようになります😆❗️
もしおっしゃってることと相違ありましたら再度コメントください🙇♂️❗️❗️
恐れ入ります。
返信頂き有り難うございます。
先日の質問内容を確認いたしましたが、パソコンがWindowsということでしょうか?表示をすると、こちらの画像と違っています。
こちらではマウスをホバーすると丸い透明色の円が出て数字がみてとれますが、自身のパソコンではホバーするとmarginもpaddingもheight…などが一覧で表示されます。
この違いはどうしてでしょうか?
@@user-ef3dc4pb6m すみません、お手数をおかけしますが、この動画の何分何秒の表示か教えていただければ回答できるかもしれません🙇♂️💦よろしくお願いします！
お世話になります。
この動画に限らずですが、この動画でいえば15：47のところです。
私のパソコンではデベロッパーツールを開いてカーソルとあてると
これとは違う表示がなされます。
これには何かしらのやり方があるのでしょうか？
ご確認いただきありがとうございます🙇♂️❗️
ここではmac標準機能の範囲指定のスクリーンショット機能を使ってます！範囲指定のスクリーンショットでは選択した範囲のピクセル数が表示されるので、簡易的にサイズを測る際に使用しています😂
macお使いでしたら、cmd + shift + 4 でカーソル変化するのでドラッグすれば同じ挙動になります。ドラッグ放すとスクショ撮ってしまうので、escキーでキャンセルしてます😆❗️
スーパー初心者です。
そもそもな質問で申し訳ありません、、、
この入力していってるのはソフトか何かですか？
デベロッパーツール？
コメントいただきありがとうございます☺️♪
これはコードエディターという、コードを編集するツールです❗️
コードエディターにもいくつか種類があるんですが、動画で使用しているのはCoda2というエディターで、最近だとVSCodeが人気なのでそっちを使用することが多いです！！
ダラダラ勉強するよりも、模写コーディングして要領を掴んだ方がいいと思うのですがどうなんですかね。
そうかもしれないです❗️知識つけてからというよりかは、わからないところを調べながら実践した方が効率的だと思います❗️
楽天市場のコーディングをどうしても知りたいです。楽天GOLDで使用できる言語などご存知でしょうか？
楽天市場GOLDって知りませんでした😵❗️
調べてみたんですが、HTML,CSS,Javascriptが使えるようです❗️❗️
初めまして！サムネイル画像比率保持の部分で、疑似要素を追加して比率保持しようとすると赤いサムネイル画像が表示されなくなってしまいます。contentも入れてます。コード見ないと何とも言えないかもしれませんが、どの辺を確認してみたらいいでしょうか😢💦
もしかしたら、display: block;が抜けているなどがあるかもしれません。
↓に同じコード書いてみたので、こちらと比較してみてください😆❗️
www.craft.do/s/sOFmX68xWHUgz0
@@hirocode ありがとうございます！試しにコピペしてみたら比率保持出来ました！
色々確認して見たらCSSで「.list_video .thumb:before {」の部分の「.thumb」と「:before」の間にスペースが入ってました😓
一人では気が付けなかったので助かりました。返信、比較のコードありがとうございます！引き続きがんばります☺
解決したようでよかったです☺️♪そういうところなかなか気づけないですよね💦
引き続き頑張ってください😆❗️
8:18の所で、.headerクラスの背景に何故青色が付くのかが分かりません。
また、.headerクラスの上下左右と.sidebarクラス、.mainクラスの上右左に白く余白が出てしまうのは何故なのでしょうか？
ヒロコードさんのコードと同じように入力はしてるのですが、うまくいきません。。。
教えて頂けると嬉しいです。
コメントありがとうございます☺️♪
8:18の部分で背景が青いのは、5:55での変更を保存してないためです（すみません意図はなくミスです😅）！
動画内で説明できてなくて申し訳ないんですが、余白が出るのはおそらくリセットcssを読み込んでいないためです！
* {
margin: 0;
box-sizing: border-box;
}
簡単なリセットとして、CSSの始まりにこれ記載するだけで余白はなくなると思うので試してみてください😆❗️
初めまして。手順どおり模写していたのですが、34:57あたりの
.list_video liタグに
padding:10pxをつけると崩れてしまいます、、。
アドバイス頂けたら助かります😫
説明漏れていてすみません！
* {box-sizing: border-box;}という指定をリセットcssに記述しています❕お試しください🙇♂️
返信ありがとうございます！！出来ました！😊
質問です。
リスト「.li」を書いた時に文の頭に黒丸ができると思うのですが、なぜヒロコードさんはできないのですか？
ご質問いただきありがとうございます🙇♂️
説明なくてすみません💦
これは、リセットcssという、ブラウザのデフォルトのスタイルを打ち消すCSSを読み込んだ上で、独自のスタイルシート(style.css)を読み込んでいるためです！
上記のように、デフォルト打ち消し＋独自のスタイルを当てるという形でコーディングしていくのが一般的かと思います。
リストについては、ブラウザのデフォルトで、ulタグに対してlist-style-type: disc;という指定がされているので黒丸が表示されます。リセットCSSには、ulタグに対してlist-style-type: none;という記述があるため、黒丸が表示されないように打ち消されています❗️
@@hirocode 丁寧に説明ありがとうございます！！
エディタは何を使ってるのでしょうか。VSCode？
上下ウィンドウ使いやすそう
最近はメインでVSCode使ってますが、この動画のエディタはCoda2というエディタです😊♪
VSCodeだと、開いているファイルのタブ部分を右クリック→下に分割で上下ウィンドウ分けることできます😆❕
@@hirocode
返信ありがとうございます！
そうなんですね‼︎
VS codeでも再現できるのであれば今度、上下ウェインドウでやってみます✨
画面のサイズを図る時何を使ってますか？ショートカットキー、、、？Macですよね
command + shift + 4 で部分スクショのカーソルになるので、それで選択箇所のサイズ確認した後escキーでキャンセルしてます😆笑
@@hirocode キャンセルしてるんですね！初歩的なことも丁寧に返信していただきありがとうございます…！
li の中にarticle や div をいれても大丈夫なのでしょうか？
コメントありがとうございます😊♪
liの中にはどんなタグ入れても大丈夫です！
ただ、ulの直下にli以外を入れるのはNGってなってます💡
@@hirocode 直下ならOKなんですね！
ありがとうございます。
ナビゲーションリストを一度marign-left:auto で左寄せにして、 input タグを中央寄せにして margin-left:auto を消しても左にナビゲーションリストがもどらないのは何故でしょうか？
コメントいただきありがとうございます😊♪
28:00
この辺りのことだと思いますが、marginにautoを指定するイメージとして、空間に余裕があればできる限りその空間を開けるってイメージです😅（言葉で伝わりづらいと思いますが...）
↓■が親の横幅だとすると、何も指定しない場合、要素は左から順に配置されます。
■[logo][input][nav] ■
ここで、[nav]にmargin-left: auto;を指定すると、
■[logo][input]←←←←[nav]■
こんな感じで、親の横幅に余裕があった分、[input]と[nav]の間に空間ができます。
■[logo]←←[input]→→[nav]■
なので、inputの左右にmargin autoを指定していると上記のようなレイアウトになるって感じです❗️
@@hirocode めちゃくちゃわかりやすい説明ありがとうございます！
ご丁寧な回答ありがとうございます。しかしうまくいきません。サイドバー
とメインが縦に並んでるだけです。試しに色も付けようとしましたが以前と違い 色まで反映されなくなりました。最初のどこかで間違っているみたいです。＜Style＞の最初のタグに赤いエラー下線がついてしまいます。泣きそうです。
こちらにhtmlファイルの中身をまるっとコピペしていただけたらわかるかもしれません❗️
大変参考になりました！
ただ、少し早く感じたのと、もう少しhtmlとcssの表示時間を長くしていただけると助かります。
止めながら、一緒に記載しながらの視聴でしたが、ぱっぱと行ってしまって置いていかれてる感がすこしありました。
今後も勉強させていただきます。
嬉しいコメントありがとうございます😊♪
スピードに関してそういったご意見いただけて大変参考になります🙇♂️❗️その点今後改善できたらと思います😆❗️ありがとうございます❗️
width:240px; でなくて flex:0 0 240px;といれたのはなぜでしょうか？ 試しに width:240px 入れたら狭くなってしまいました。
flex:0 0 40px; のアイキャッチは width:40px;でも変わりませんでした。
display: flex;直下の要素は、flexアイテムになります。
また、flex-shrinkのデフォルト値は1で、縮小を許容する指定になっています。
なので、親要素のサイズ次第で、flexアイテムは縮小します。
それを回避するため、flex-shrink: 0;（縮小させない）を指定する必要があるので、flexプロパティで指定しているって形です❗️
アイキャッチに関しては、他要素がそれに影響しないサイズなので、サイズ保っているだけかと思われます❗️
@@hirocode わかりやすい説明ありがとうございます！
flex: 0(伸ばさない）０縮小させない 240px ということだったんですね。 flex の中にある幅はなるべくflex の値を用いた方が良さそうですね。 youtubeの模写は２回やってなんとなく掴めた気がします。(気がしただけかもですが。）
動画もそうですが、コメント欄の回答もとても勉強になります＾＾
5：16で、座標を表示されていましたが、これはどのようにして座標を表示させているのでしょうか？
コメントいただきありがとうございます😊♪
Macのスクショ機能で、ピクセルサイズを測ることができるのでそれを使用しています😅
「Command + Shift + 4」を押すとカーソルが表示されるので、ドラッグするとサイズが確認できます。そのままカーソルを離してしまうと、毎回スクリーンショットを撮ってしまうので、ESCキーでキャンセルしています😆❗️
@@hirocode ご返信ありがとうございます。なるほど！windowsユーザーは、スクショはできますが、座標は出てこないみたいですね（笑）
デベロッパーツールで工夫して調べます。
35:58の.li_video > li にpaddingを入れたら横に４つ入らなくなって３つ目で折り返してしまいます。頑張りましたが、解決しません。どうすればいいのでしょうか。
コメントいただきありがとうございます😊♪
もしかしたら、box-sizingが影響しているかもしれません。
次の1行をcss内に書いたら変わりませんでしょうか❓
*{box-sizing: border-box;}
お試しください🙇♂️❗️
@@hirocode
返信ありがとうございます！変わりました！
ヒロさんの動画で引き続き勉強させていただきます🙇
良かったです😆❗️
ちなみに上記の記述は、 僕の環境だと「cssreset-min.css」 の中に記載してるので相違が出てしまったようです💦
ちゃんと説明していなくてすみません🙇♂️
今後ともよろしくお願いします😊♪
@@hirocode
よく見ればコメント欄に同じ質問をされてた方がいました。余計な時間をとらせてしまい申し訳ございません🙇
応援してます❗
全然大丈夫です😆‼️ありがとうございます❗️
ショートカットキーなどによるわからない場所を0.25倍速にしたりするんですけどBGMがホラーじみていて少し怖いです笑
やってみたらほんとにホラー感出ててウケました笑😂
ネガティブマージンはよっぽどのことがない限りかけないほうがいい。
ネガティブマージンをかけないCSS設計を検討したほうがあとあとハマらなくて済む。
おっしゃる通りです❕
今だとflexboxやgrid layoutではgapプロパティが使えるようになったので、そっちの指定が推奨です🙇♂️❗️
自分用11:45
大変勉強になりました、ありがとうございます！
こちらこそご視聴ありがとうございます🙇♂️❗️❗️
main と アイキャッチのtextにmin-width:10px; があったのに、特に説明が無かったので気になりました。
すみません、これ完全に説明なかったんですが、
flexアイテムは、min-width: auto;が初期値になるので、コンテンツが外にはみ出してしまうケースが出てきます。それを回避するためにmin-widthをセットしています。min-width: 0;でも問題ないです❗️
@@hirocode そうだったんですね。謎でした。
widthをワイドとは読まないので読み方調べた方がいいと思います笑 内容はすごい参考になるのですがそこが気になりすぎて話が入ってきません笑
コメントいただきありがとうございます😊♪
僕としては横幅に100％を指定、みたいな感じで言ってるつもりなんですが、プロパティと値の説明するときにワイドって表現すると確かにわかりづらいですね💦すみません🙇♂️
流石にwidthをワイドと読むとは思ってないので大丈夫です！笑
ちなみに、他の動画で言ってると思いますが僕はウィドゥス派ではなくウィッズ派です😆❗️
なるほどです！
そもそもこの単語発音が難しすぎるんですよね笑
勉強になりました…。ところで15:00あたりでpxを測っていますがその拡張機能教えていただけませんでしょうか？
コメントありがとうございます🙇
macだとcmd+shift+4で範囲指定の画面キャプチャができるので、そこで出てくる数値使って測っています😂
@@hirocodeありがとうございますm(_ _)m