Розмір відео: 1280 X 720853 X 480640 X 360
Показувати елементи керування програвачем
Автоматичне відтворення
Автоповтор
なつこ先生、いつもありがとうございます実際コーディングを実践していく上で、どうやって体得していくかという点で進め方が難しいな、と思ってるところ、こうやってレクチャーいただけてありがたいです！これからも色々参考にさせていただきます！
この動画に出会えたことに感謝感激すぎです！ありがとう！！！
こちらこそ、ご視聴いただき感謝感激です✨学習応援しております！
模写コーディングをしたほうがいいとどこでも見かけますが、わからないことが多すぎて一歩目から困っていました。この動画に出会えてやっと進めそうです、有難うございます。
参考になりました。私は完全初心者からウェブ作製の勉強をしています。模写コーディングに行くまでどうやってアウトプットしたらいいか、悩んでいます。プロゲートを何周もするのは、よくないと、アドバイスされ、知ってる知識でエディターで何か書く方が、いいと感じるようになったのですが、イマイチ学習のコツが掴めずにいます。初心者が陥りがちな、暗記、インプット中心にならないようにする動画を上げて頂けたら、最高です。
ご視聴ありがとうございます！こちらこそ、とても参考になるリクエストありがとうございます✨今後のテーマとして検討させて頂きます！いきなり模写、というのも難しそうな場合は、お手本のサイトのコードを確認しながら、そっくり書き写してコピーサイトを作っていく練習も十分効果的かと思います！いろいろなサイトを見ていると、定番のやり方などがなんとなくわかってくるので、自分でも出来そうと感じてきたら是非模写コーディングに取り組んでみてください🙏
本当に神様だった。わからなかったことが全部解決しました。ありがとうございます。今後の動画も楽しみにしてます。
ご視聴ありがとうございます✨お力になれてとても嬉しいです！もし今後も不明点など出てきたらお気軽にお尋ねください！
さっきprogateのhtml/cssを終えました。この動画のテーマ、温度感、どれもとても良かったです。明日から模写コーディングしようと思ってますが、やり方やツールなど具体的でとても参考になりました！ありがとうございます！
ご視聴ありがとうございます😊嬉しいお言葉で励みになります✨模写コーディングの方法に、正解はありませんので、参考にしながらも独自に工夫しながら進めてみてください🍀
すごく参考になりました。ありがとうございます。早速役立たせて頂きます✨
お役に立てて嬉しいです😊学習応援しております！！
ちょうど今、やり始めたので、メッチャ！！！！！勉強になります❗️❗️❗️
コメントありがとうございます😀これからもよろしくお願いします🍀
HTML/CSSの学習で定番の学習方法、模写コーディングのやり方、練習するときのポイントをまとめました！次回は、この動画の内容を踏まえての「模写コーディング 実践編」をお送りします♪＜目次＞・オープニング 0:00・模写コーディングとは 0:45・初心者向けの注意点 1:46・模写コーディングの手順 2:37 〜 ①サイト選び 3:05 ②スクリーンショットを撮る 5:35 ▶︎検証ツールを使う 7:55 ▶︎拡張機能を使う 9:26 【おまけ】模写コーディングにオススメな拡張機能 11:02 ③テキストを抽出する 12:01 ④画像を抽出する 12:46 ⑤HTML編集 14:28 ⑥CSS編集 15:20 ⑦運命の答え合わせ 16:20・今回のまとめ 18:43↓今回参考にしたサイト↓企業サイトアーカイブwww.ikesai.com/cat/corp/※この中から、「はくばく」公式サイトを例に挙げて紹介しています！
初学者にも、とても分かりやすい！ありがとうございます。
ありがとうございます😀励みになります✨これからもよろしくお願いします🍀
模写コーディングはどのように始めたらいいのか困っていたのでスゴく参考になりました。頑張ります😁
本日アップした最新動画で実況コーディングもしてみていますので、こちらも参考にしながら是非一緒にやってみてくださいね✨応援しております！！
模写コーディングするWebサイト選びで悩み過ぎて、時間を取られ過ぎてました。これからはとりあえず、いくつかのWebサイトを選んで部分コーディングに取り組んでみます。
コメントありがとうございます✨サイト選びで迷っている方は結構多いと思います…！はじめる前の段階で余計に時間を使うよりも、たくさん数をこなすのがスキルアップの近道だと思います！
かなり丁寧でわかりやすいです😭ありがとうございます！今日からやってみます✊
お役に立てて良かったです！ご自分のペースで数をこなしていってみてください🙏
すごく分かりやすいです。ありがとうございます😊模写頑張ります。
こちらこそ、ご視聴ありがとうございます！応援しております☺️
模写が全く出来なくて挫折しかけてました...！全体を完璧に作らねばと思い込んでいました。一部ずつ、少しずつ頑張ります！ありがとうございます！
部分、部分でも出来ることからコツコツと練習してみてくださいね💡
可愛くて集中するのむずかしい
コメントありがとうございます😂
今日から模写コーディング始めたのでとてもありがたい動画でした！頑張ります😊
コメントありがとうございます！お役に立てれば嬉しい限りです🙇♀️
いつも動画で勉強させていただいております。こちらにコメントして良いかわからないのですが、もしよろしければご回答いただけますと幸いです。WPで直接エディターの編集となるとさまざまな不便さがあるので、ローカル環境でVS CODEエディターを用いて編集しています。（模写コーディングぐらいなら、簡単なディレクトリ構成なのでエディターですぐ作業できるのですが）作業結果を都度ローカルで確認したいのですが、作成したものをわざわざFTPにアップとなると手間になります・・・なのでローカル環境でWPと同じディレクトリー構成を作りたいのですが、複雑でどうしたら良いかネットでも調べても出てきません。
最近模写を何気にやってましたが、今回の動画でイメージが進みました。今後も参考にさせてもらいます！！
ありがとうございます！！今後もお役に立てるようにいろいろ発信してまいりますね🙇♀️🙇♀️
概要欄の目次など分かりやすいです。
ありがたい
こちらこそご視聴ありがとうございます✨
わかりやすいですね！
コメントありがとうございます☺️
明確て非常にわかりやすい説明でした！！実際に模写コーディングをやっている動画がなくて結構難しく考えていました😩
お役に立てたようで嬉しい限りです！是非、自分に合ったレベル、スピードで取り組んでいってみてください☺️
神様って言い過ぎだって・・・ホンマや！！
すごい！ありがとうございます
ご視聴ありがとうございます😊これからもよろしくお願いします🍀
ありがとうございます
こちらこそご視聴ありがとうございます😊
情報ありがとうございます😸まさに今欲していた学習方法がここにあった！かなり為になったので心地よく言われた通りにチャンネル登録しました🙋♂️笑
そう言っていただけて嬉しいです✨チャンネル登録までありがとうございます！！今後の動画もご覧いただけると嬉しいです🙇♀️
ページ全体のスクリーンショットを撮る方法がめちゃくちゃ参考になりました！
意外と知られていない方法だったりしますよね！是非活用してみてください✨
模写コーディングを始めて1ヶ月になりますが、今更かゆいところに手が届くような解説動画に出会えました、ありがとうございます。質問というよりリクエストになるのでしょうか、模写コーディングを始めてから "Lancersさん" や "クラウドワークスさん" で簡単な案件を取って来るまでの "流れ" や "期間" 。初めて取る "オススメの案件内容" などの紹介をして頂けたらと思いコメントさせていただきました。検討の程よろしくおねがいします。
自己流の模写コーディングを見直す機会になったら嬉しいです、コメントありがとうございます✨私自身がフリーランスではないので的確なアドバイスが出来なくて申し訳ありませんが、極端な話ポートフォリオが載っていて制作物のクオリティがわかる、価格感が合っているなどすれば初心者の方でもすぐにお仕事は頂けると思います。ただ、あくまでお仕事を頂くことが目標ではないですから、中途半端なスキルのまま案件獲得に至るべきではないというのは、フリーランスさん側、お客さん側どちらの立場でも言えることだと思います！このあたり、今後の動画テーマとして検討させて頂きます🙏貴重なご意見ありがとうございます！
美人なだけかと思ったら、すげえ人だった
もったいないお言葉です😂ご視聴ありがとうございます！
こういう動画を待っていた！
ご期待に添えたようで嬉しい限りです！今後ともご視聴お願いいたします🙇♀️
要素のサイズを測れるツールや拡張機能も教えていただきたいです。
お返事遅くなりました！コメントありがとうございます✨以前はWebページ上で要素のサイズを測れる便利な拡張機能があったのですが、今は諸事情で使えなくなっているようです…。代替機能を探して、より便利な方法があればまた動画でご紹介したいと思いますので、更新をお待ちいただけると嬉しいです🙏
毎度お世話になっております…16:00辺りで使われてるpxを測定する拡張機能？が知りたいです。よろしくお願いしますm(_ _)m
ご質問ありがとうございます！下記動画の1:22〜から解説しておりますので、よろしければこちらをご覧いただけると幸いです🙇♀️ua-cam.com/video/ObHr8pbHDoc/v-deo.htmlsi=gxvzbOGXHv0pWkJN
@@webgodweb お忙しいところ、ご丁寧にありがとうございますm(_ _)m
超初心者にとっては最強のチャンネルです！！今回の模写コーディングについても参考にさせていただいております。他の動画にて今までいくつか取り上げて欲しい内容についてコメントさせていただきました。（返信はいただいています。是非前向きに検討いただければ幸いです。）模写コーディングをしていて意外と困るのが「class名」の決め方でした。よく何でも良いという説明されている事がありますが、どの教材や実際のHPなどのコードを見てもある程度の規則があると思います。一般的に使われるものだけで良いので、まとめて動画で取り上げていただきたいです。
いつもご視聴ありがとうございます✨クラス名については、確かに自由で良いとはいえ、あまりにも珍しい命名をしていると他人が見てわかりにくい特異なコードになってしまうので、初めのうちは特に悩まれるところですよね…！今後の動画テーマとして検討させていただきます、ありがとうございます🙇♀️
はじめまして！丁度ドットインストールでの学習が終わって次はどうしようか考えてたところ、こちらの動画にたどり着きました！めっちゃ参考になりました！！模写コーディングやってみます＾＾チャンネル登録させて頂きました＾＾
ご視聴ありがとうございます！是非、少しずつボリューム、難易度を上げながら模写コーディングに取り組んでいってみてください！✨チャンネル登録ありがとうございます！今後もどうぞよろしくお願いいたします🙏
いつも勉強させていただいております。ありがとうございます。いろいろなサイトで模写コーディングを繰り返しておりますが、なかなか身につかず困っております。どのようにすれば一番身につきやすいでしょうか？
初めて動画みました。8:35秒辺りの検証でどこをクリックしたら縦にするページに移れるのか教えて欲しいです。
ご視聴ありがとうございます！検証ツールの右上あたり、3つの点が並んでいるアイコンをクリックすると、「Dock side」と書いてあってウィンドウの向きを変えられるアイコンが出てくるはずです。こちらのページも参考にご覧ください。creive.me/archives/17517/
@@webgodweb ご返答ありがとうございます！早速やってみたところ、無事出来ました！わざわざ、詳細が沢山載ってるURLまで載せていただいてありがとうございました。これからも色んな動画で勉強したいと思います！動画投稿頑張ってください(｡･ω･｡)
解決したようで何よりです✨今後ともよろしくお願いいたします！
いつも参考にさせていただいております。windowsのPCで選択範囲のサイズを確認する方法はございますか。拡張などでも構いませんので方法があれば教えてくださると幸いです。これからも応援しています✨
ご視聴ありがとうございます😊スクリーンショットをダブルクリックで開くのでは無く、右クリックでペイントソフトで開いてみてください🍀
@@webgodweb ﾍﾟｲﾝﾄで出来ました(*'ω'*)お忙しい所、お返事くださいましてありがとうございます！！勉強励みます✨
WEB制作勉強中の初心者です。動画のように対象サイトとの見た目を比較したいです。やり方を教えてください。。サーバーにアップロードするんでしょうか？
とても分かりやすく参考になりました！アイコンなどに使用されているsvg画像はどのようにダウンロードしますか？
コメントありがとうございます！SVGを取り出せるChromeの拡張機能がありましたので、こちら試していただければ幸いです！webrandum.net/svg-grabber/chrome.google.com/webstore/detail/svg-grabber-get-all-the-s/ndakggdliegnegeclmfgodmgemdokdmg動画の例のようなSVGは、そのままだと画像として保存はできないので、Chromeの拡張機能を使わない場合はタグごとコピーしてソースコードを取り出して保存する必要がありますね。。機会があれば今後の動画で紹介いたします！
@@webgodweb 丁寧なご回答ありがとうございます！拡張機能を使うといいんですね^^ 試してみます！動画の方も楽しみにしています！
初心者です。質問があります！この動画を見ながら実際に模写コーディングしようとしました。画像を抽出するところでつまづいてしまったのですが、この「はくばく」さんのサイトのmainの画像はどうやって抽出するのですか？cssのbackgroundにsvgが指定されているように見えますが、動画にあるようにopen new tab をしても、真っ白なサイトが開くだけでできません。初心者すぎてくだらない質問かもしれませんが、よかったらご教示ください。
模写コーディングという言葉を初めて知りました。とても勉強になりました！ありがとうございます。WordPressで作られたサイトでも模写コーディングは出来ますか？それと、Class名はとりあえず自分なり付けるのでしょうか？
15:45 windowsだとできないんでしょうか...調べても出てこなくて、ご存知の方いたら教えていただきたいです🙇
お返事遅くなりすみません🙇♀️Windowsだと、標準のペイント機能でスクリーンショットを開いていただければ代用できるかと思います！範囲選択の機能を活用してみてください！
２つ質問があります。⑤のHTML編集のところからわからなくなってしまいました。「用意していたテキストを配置して」とありますが、これはホームページから文字だけコピーして、VSコードのからコピペで張り付けて、適切なタグをつけていくという解釈で大丈夫でしょうか？ また適切なタグが分からない場合は、ホームページから確証を押し、確認して同じものを入れていくという解釈でよろしいのでしょうか？
ご視聴ありがとうございます！はい、まずはHTMLの雛形（やなど）を用意しておいて、の中に、模写するサイトのテキストだけコピーしたものを貼り付けます。ちなみに、VS Codeをお使いであれば、空のHTMLファイルを作成して、そこで「!」と押してエンターキーを押していただくだけでも、HTMLの雛形が入力できるので便利です！webdesign-trends.net/entry/13588#HTML5その後の作業も、仰るイメージで合っています。HTMLの学習が不十分な場合は、どこでどんなタグを使っていいかがわからないと思うので、一旦お手本のサイトを検証ツールで確認しながら、そっくり真似ていくのでも最初は良いと思います。応援しております！
大変勉強になりました。わかりやすかったです。いきなりdivタグ設定していましたが、まずはテキストを整えてから、その後にdivを設定する様にしていきます！
ご視聴ありがとうございます！基本的に、divタグはデザインを整えるために活用するものですので、今後もそのような手順でコーディングしていただければ、より良いコードになるかと思います✨
CSSの余白や文字などの選択範囲のサイズをwindowsでもスクリーンショット画像から調べることできますか？
ご質問ありがとうございます！私の環境で確認した限りですが、Windowsに標準で入っている「ペイント」でスクショ画像を開けば、選択範囲機能を使って同じように調べることができると思います。お試しいただけると幸いです！
@@webgodweb 返信ありがとうございます！独学で学んでいるのでわかりやすい動画で助かります！チャンネル登録して勉強させていただきます
自分のオリジナルのウェブサイトを作るという授業があって全然授業についていけてないんですがこれを続けていくうちにできるものですか？できれば教えていただきたいです！
こんにちは。一回模写で挫折しましたが、もう一度挑戦しようと決意webの神様の所へきました。またしてもはじめから詰まってしまい調べても理解に苦しんでします。headerについてです。progateでははくばくのようなheaderの場合、floar:leftを習いましたが、他のサイトでは最近はdisplay:flexを使うとのことでした。一体どちらを選択すれば便利なのでしょうか。また、display:flexを使った場合のheaderのcssの記述の仕方もいまいちよくわかりません。もしよろしければ具体的にご教授いただけると幸いです。ちなみにwebの神様のdisplay:flexの動画もほかの模写の動画も観ました。色々調べてみましたがheaderについての疑問は解決しませんでした。コーディングは本当に得意ではないので、かみ砕いて説明していただけると大変助かります。よろしくお願いいたします。
コメントありがとうございます😀コーディングについては、完全な正解というものがない為、意図通りな見た目に実装できているかどうかが重要になります💡 最近では、レスポンシブ表示でPCとSP表示を同一のHTMLで実装することが多く、スマホだけ、要素の順番を並び替えたい等の要件がある場合は、display:flex;を使った方が簡単に実装できます！どちらを使わないといけないということはありませんが、flex、float どちらでもコーディングできるようになっておけば尚良いと思います🍀
@@webgodweb もやもやしていたことがすっきりしました。お忙しい中ありがとうございました。これからも動画参考にさせていただきます‼
初めまして。とても丁寧な解説動画、ありがとうございます！一点ご質問させて頂きたいことがあるのですが、もしお時間ございましたら、教えていただけると幸いです。Macのプレビュー表示などで画像を開いていると、選択範囲のサイズをリアルタイムに確認できる旨、動画内でご説明がありますが、手持ちのWindowsで、GoFullPageのスクリーンショットや、explorerの「プレビューウィンドウを表示」⇒その箇所で右クリック等試しても、動画のように上手く、大体の「余白の大きさ」や「要素間の距離」が表示出来ず、困っています。初歩的なご質問すみません💦
コメントありがとうございます！プレビュー機能はMac独自のものなので、Windowsの場合はスクリーンショット画像を「ペイント」で開いていただいて、範囲を選択する機能を使用すると、選択範囲の大きさなどが画面下に表示されるかと思います。お試しいただければ幸いです！
@@webgodweb 早速のご回答、ありがとうございます！スクリーンショット⇒ペイント機能⇒範囲を選択するで、無事に画面下で 選択範囲の大きさが確認できました。とても分かりやすかったです(^^)
おおおーナイス質問です！僕も分からなかったのでありがとうございます！
とてもわかりやすくて勉強になる動画をアップしてくれてありがとうございます！
こちらこそ、ご視聴ありがとうございます！😊
イメージ画像は保存するより画像アドレスのコピーではダメなのですか？
本家のサイトのソースを読み込むということですね！模写コーディング内での個人的な利用であれば、そちらでも特に問題ないかと思います😊
Webの神様 ありがとうございます！
こんにちは！いつも参考にさせてもらってます！質問なんですけど、font-sizeとかは検証ツールで確認するしかないですよね？
ご返信が遅くなりました💦フォントサイズは、Google Chrome拡張機能の「What Font」などを使っていただくと確認できるのでオススメです！
選択範囲のサイズで余白を調べようと思っても、実際の余白の値とスクショした画像の余白の数値が大きく異なるのはなぜですか？
ご質問ありがとうございます！スクリーンショット画像が実寸より大きい状態かと思いますので、下記の動画をご覧いただければ解決するかと思います！🙇♀️【初心者向け】模写コーディングのよくあるご質問回答＆お悩み相談！【HTML・CSS コーディング】ua-cam.com/video/ObHr8pbHDoc/v-deo.html
質問させてください。macのプレビュー表示を使用する方法がわかりません。どうしたら、使うことができるでしょうでしょうか？
ご視聴ありがとうございます😊スクリーンショットをダブルクリックで開いてみてください。プレビューアプリが立ち上がるかと思います🍀
@@webgodweb ありがとうございます、成功しました！
この動画を見つけて自分でも出来るかもと励みになりました。ありがとうございます。私はWin10を使っているのですが、15:30あたりで言及されていたMacのプレビュー表示で選択範囲のサイズをリアルタイムで確認できる機能はWin10にもありますでしょうか。グーグルでいろいろ検索したのすが見つけらず、もし知っていたら（このコメントを見た方でご存じの方いましたら）教えてくれませんでしょうか。お願いしますm(_ _ )m
コメントありがとうございます！Windowsでは「ペイント」ツールが代用できるはずですが、他にも画像編集ができるフリーソフトなどで代用可能かと思います！ferret-plus.com/2179是非お試しください🙇♀️
10:50
むむむむ、、、難しいですｗ
ご視聴ありがとうございます😊慣れない間は難しく感じると思います。少しづつ慣れていってくださいね🍀
Mac のプレビューで選択範囲のピクセル数が自動で表示されるのはどのような設定をするのか教えて頂けますか？
ご視聴ありがとうございます😊プレビューアプリでデザインのスクショを開いて、画像の上でクリックしてからドラッグして句形選択している間、ピクセル数が表示されませんでしょうか？一度お試しください🍀
@@webgodweb ありがとうございます。残念ながら四角の選択をしても、動画のように右下にピクセルがでなかったので何か方法や設定があるのかなーと思い質問させて頂きました。わかりましたらお願いします。話は変わりますが、いつかナビバーとハンバーガーメニューを複数の方法で作る動画をお願いします。HTML/CSSのみ、Flexboxを使用、Bootstrapを使用みたいに1つの表現を複数のやり方で見せて頂けると大変勉強になると思いました。
私の環境のMacでは特に設定変更していない状態で今の仕様でしたので、具体的な解決策を提示できず申し訳ありません💦プレビュー機能以外ですと、画像編集ソフトなら恐らく同様の範囲選択、数値表示ができるはずですので、「画像編集 フリーソフト」等で検索して何か別のものでお試しいただけますと幸いです！リクエストもありがとうございます、大変参考になります✨今後の動画テーマとして検討させていただきます！
Webの神様さんって情報商材出身の人？模写コーディングってWeb制作の現場では、使われないんですよね。模写コーディングを自分で作った実績として出す人、おおすぎ。
なつこ先生、いつもありがとうございます
実際コーディングを実践していく上で、どうやって体得していくかという点で進め方が難しいな、と思ってるところ、こうやってレクチャーいただけてありがたいです！
これからも色々参考にさせていただきます！
この動画に出会えたことに感謝感激すぎです！
ありがとう！！！
こちらこそ、ご視聴いただき感謝感激です✨
学習応援しております！
模写コーディングをしたほうがいいとどこでも見かけますが、わからないことが多すぎて一歩目から困っていました。
この動画に出会えてやっと進めそうです、有難うございます。
参考になりました。私は完全初心者からウェブ作製の勉強をしています。
模写コーディングに行くまでどうやってアウトプットしたらいいか、悩んでいます。プロゲートを何周もするのは、よくないと、アドバイスされ、知ってる知識でエディターで何か書く方が、いいと感じるようになったのですが、イマイチ学習のコツが掴めずにいます。
初心者が陥りがちな、暗記、インプット中心にならないようにする動画を上げて頂けたら、最高です。
ご視聴ありがとうございます！こちらこそ、とても参考になるリクエストありがとうございます✨今後のテーマとして検討させて頂きます！
いきなり模写、というのも難しそうな場合は、お手本のサイトのコードを確認しながら、そっくり書き写してコピーサイトを作っていく練習も十分効果的かと思います！いろいろなサイトを見ていると、定番のやり方などがなんとなくわかってくるので、自分でも出来そうと感じてきたら是非模写コーディングに取り組んでみてください🙏
本当に神様だった。
わからなかったことが全部解決しました。
ありがとうございます。
今後の動画も楽しみにしてます。
ご視聴ありがとうございます✨
お力になれてとても嬉しいです！もし今後も不明点など出てきたらお気軽にお尋ねください！
さっきprogateのhtml/cssを終えました。この動画のテーマ、温度感、どれもとても良かったです。明日から模写コーディングしようと思ってますが、やり方やツールなど具体的でとても参考になりました！ありがとうございます！
ご視聴ありがとうございます😊嬉しいお言葉で励みになります✨模写コーディングの方法に、正解はありませんので、参考にしながらも独自に工夫しながら進めてみてください🍀
すごく参考になりました。ありがとうございます。
早速役立たせて頂きます✨
お役に立てて嬉しいです😊学習応援しております！！
ちょうど今、やり始めたので、メッチャ！！！！！勉強になります❗️❗️❗️
コメントありがとうございます😀これからもよろしくお願いします🍀
HTML/CSSの学習で定番の学習方法、模写コーディングのやり方、練習するときのポイントをまとめました！
次回は、この動画の内容を踏まえての「模写コーディング 実践編」をお送りします♪
＜目次＞
・オープニング 0:00
・模写コーディングとは 0:45
・初心者向けの注意点 1:46
・模写コーディングの手順 2:37 〜
①サイト選び 3:05
②スクリーンショットを撮る 5:35
▶︎検証ツールを使う 7:55
▶︎拡張機能を使う 9:26
【おまけ】模写コーディングにオススメな拡張機能 11:02
③テキストを抽出する 12:01
④画像を抽出する 12:46
⑤HTML編集 14:28
⑥CSS編集 15:20
⑦運命の答え合わせ 16:20
・今回のまとめ 18:43
↓今回参考にしたサイト↓
企業サイトアーカイブ
www.ikesai.com/cat/corp/
※この中から、「はくばく」公式サイトを例に挙げて紹介しています！
初学者にも、とても分かりやすい！
ありがとうございます。
ありがとうございます😀励みになります✨これからもよろしくお願いします🍀
模写コーディングはどのように始めたらいいのか困っていたのでスゴく参考になりました。頑張ります😁
本日アップした最新動画で実況コーディングもしてみていますので、こちらも参考にしながら是非一緒にやってみてくださいね✨応援しております！！
模写コーディングするWebサイト選びで悩み過ぎて、時間を取られ過ぎてました。これからはとりあえず、いくつかのWebサイトを選んで部分コーディングに取り組んでみます。
コメントありがとうございます✨
サイト選びで迷っている方は結構多いと思います…！はじめる前の段階で余計に時間を使うよりも、たくさん数をこなすのがスキルアップの近道だと思います！
かなり丁寧でわかりやすいです😭
ありがとうございます！
今日からやってみます✊
お役に立てて良かったです！ご自分のペースで数をこなしていってみてください🙏
すごく分かりやすいです。ありがとうございます😊模写頑張ります。
こちらこそ、ご視聴ありがとうございます！応援しております☺️
模写が全く出来なくて挫折しかけてました...！全体を完璧に作らねばと思い込んでいました。
一部ずつ、少しずつ頑張ります！ありがとうございます！
部分、部分でも出来ることからコツコツと練習してみてくださいね💡
可愛くて集中するのむずかしい
コメントありがとうございます😂
今日から模写コーディング始めたのでとてもありがたい動画でした！頑張ります😊
コメントありがとうございます！お役に立てれば嬉しい限りです🙇♀️
いつも動画で勉強させていただいております。
こちらにコメントして良いかわからないのですが、もしよろしければご回答いただけますと幸いです。
WPで直接エディターの編集となるとさまざまな不便さがあるので、ローカル環境でVS CODEエディターを用いて編集しています。
（模写コーディングぐらいなら、簡単なディレクトリ構成なのでエディターですぐ作業できるのですが）
作業結果を都度ローカルで確認したいのですが、作成したものをわざわざFTPにアップとなると手間になります・・・
なのでローカル環境でWPと同じディレクトリー構成を作りたいのですが、複雑でどうしたら良いかネットでも調べても出てきません。
最近模写を何気にやってましたが、今回の動画でイメージが進みました。
今後も参考にさせてもらいます！！
ありがとうございます！！
今後もお役に立てるようにいろいろ発信してまいりますね🙇♀️🙇♀️
概要欄の目次など分かりやすいです。
ありがたい
こちらこそご視聴ありがとうございます✨
わかりやすいですね！
コメントありがとうございます☺️
明確て非常にわかりやすい説明でした！！
実際に模写コーディングをやっている動画がなくて
結構難しく考えていました😩
お役に立てたようで嬉しい限りです！是非、自分に合ったレベル、スピードで取り組んでいってみてください☺️
神様って言い過ぎだって・・・
ホンマや！！
コメントありがとうございます😂
すごい！ありがとうございます
ご視聴ありがとうございます😊これからもよろしくお願いします🍀
ありがとうございます
こちらこそご視聴ありがとうございます😊
情報ありがとうございます😸
まさに今欲していた学習方法がここにあった！
かなり為になったので
心地よく言われた通りにチャンネル登録しました🙋♂️笑
そう言っていただけて嬉しいです✨チャンネル登録までありがとうございます！！
今後の動画もご覧いただけると嬉しいです🙇♀️
ページ全体のスクリーンショットを撮る方法がめちゃくちゃ参考になりました！
意外と知られていない方法だったりしますよね！是非活用してみてください✨
模写コーディングを始めて1ヶ月になりますが、今更かゆいところに手が届くような解説動画に出会えました、ありがとうございます。
質問というよりリクエストになるのでしょうか、模写コーディングを始めてから "Lancersさん" や "クラウドワークスさん" で簡単な案件を取って来るまでの "流れ" や "期間" 。初めて取る "オススメの案件内容" などの紹介をして頂けたらと思いコメントさせていただきました。
検討の程よろしくおねがいします。
自己流の模写コーディングを見直す機会になったら嬉しいです、コメントありがとうございます✨
私自身がフリーランスではないので的確なアドバイスが出来なくて申し訳ありませんが、極端な話ポートフォリオが載っていて制作物のクオリティがわかる、価格感が合っているなどすれば初心者の方でもすぐにお仕事は頂けると思います。
ただ、あくまでお仕事を頂くことが目標ではないですから、中途半端なスキルのまま案件獲得に至るべきではないというのは、フリーランスさん側、お客さん側どちらの立場でも言えることだと思います！
このあたり、今後の動画テーマとして検討させて頂きます🙏貴重なご意見ありがとうございます！
美人なだけかと思ったら、すげえ人だった
もったいないお言葉です😂
ご視聴ありがとうございます！
こういう動画を待っていた！
ご期待に添えたようで嬉しい限りです！今後ともご視聴お願いいたします🙇♀️
要素のサイズを測れるツールや拡張機能も教えていただきたいです。
お返事遅くなりました！コメントありがとうございます✨
以前はWebページ上で要素のサイズを測れる便利な拡張機能があったのですが、今は諸事情で使えなくなっているようです…。
代替機能を探して、より便利な方法があればまた動画でご紹介したいと思いますので、更新をお待ちいただけると嬉しいです🙏
毎度お世話になっております…
16:00辺りで使われてるpxを測定する拡張機能？が知りたいです。よろしくお願いしますm(_ _)m
ご質問ありがとうございます！下記動画の1:22〜から解説しておりますので、よろしければこちらをご覧いただけると幸いです🙇♀️
ua-cam.com/video/ObHr8pbHDoc/v-deo.htmlsi=gxvzbOGXHv0pWkJN
@@webgodweb お忙しいところ、ご丁寧にありがとうございますm(_ _)m
超初心者にとっては最強のチャンネルです！！
今回の模写コーディングについても参考にさせていただいております。
他の動画にて今までいくつか取り上げて欲しい内容についてコメントさせていただきました。（返信はいただいています。是非前向きに検討いただければ幸いです。）
模写コーディングをしていて意外と困るのが「class名」の決め方でした。よく何でも良いという説明されている事がありますが、どの教材や実際のHPなどのコードを見てもある程度の規則があると思います。一般的に使われるものだけで良いので、まとめて動画で取り上げていただきたいです。
いつもご視聴ありがとうございます✨
クラス名については、確かに自由で良いとはいえ、あまりにも珍しい命名をしていると他人が見てわかりにくい特異なコードになってしまうので、初めのうちは特に悩まれるところですよね…！
今後の動画テーマとして検討させていただきます、ありがとうございます🙇♀️
はじめまして！
丁度ドットインストールでの学習が終わって次はどうしようか考えてたところ、こちらの動画にたどり着きました！
めっちゃ参考になりました！！模写コーディングやってみます＾＾
チャンネル登録させて頂きました＾＾
ご視聴ありがとうございます！
是非、少しずつボリューム、難易度を上げながら模写コーディングに取り組んでいってみてください！✨
チャンネル登録ありがとうございます！今後もどうぞよろしくお願いいたします🙏
いつも勉強させていただいております。ありがとうございます。いろいろなサイトで模写コーディングを繰り返しておりますが、なかなか身につかず困っております。どのようにすれば一番身につきやすいでしょうか？
初めて動画みました。
8:35秒辺りの検証でどこをクリックしたら縦にするページに移れるのか教えて欲しいです。
ご視聴ありがとうございます！
検証ツールの右上あたり、3つの点が並んでいるアイコンをクリックすると、「Dock side」と書いてあってウィンドウの向きを変えられるアイコンが出てくるはずです。
こちらのページも参考にご覧ください。
creive.me/archives/17517/
@@webgodweb
ご返答ありがとうございます！
早速やってみたところ、無事出来ました！
わざわざ、詳細が沢山載ってるURLまで載せていただいてありがとうございました。
これからも色んな動画で勉強したいと思います！
動画投稿頑張ってください(｡･ω･｡)
解決したようで何よりです✨今後ともよろしくお願いいたします！
いつも参考にさせていただいております。windowsのPCで選択範囲のサイズを確認する方法はございますか。拡張などでも構いませんので方法があれば教えてくださると幸いです。
これからも応援しています✨
ご視聴ありがとうございます😊スクリーンショットをダブルクリックで開くのでは無く、右クリックでペイントソフトで開いてみてください🍀
@@webgodweb
ﾍﾟｲﾝﾄで出来ました(*'ω'*)お忙しい所、お返事くださいましてありがとうございます！！勉強励みます✨
WEB制作勉強中の初心者です。動画のように対象サイトとの見た目を比較したいです。やり方を教えてください。。サーバーにアップロードするんでしょうか？
とても分かりやすく参考になりました！
アイコンなどに使用されているsvg画像はどのようにダウンロードしますか？
コメントありがとうございます！
SVGを取り出せるChromeの拡張機能がありましたので、こちら試していただければ幸いです！
webrandum.net/svg-grabber/
chrome.google.com/webstore/detail/svg-grabber-get-all-the-s/ndakggdliegnegeclmfgodmgemdokdmg
動画の例のようなSVGは、そのままだと画像として保存はできないので、Chromeの拡張機能を使わない場合はタグごとコピーしてソースコードを取り出して保存する必要がありますね。。機会があれば今後の動画で紹介いたします！
@@webgodweb 丁寧なご回答ありがとうございます！拡張機能を使うといいんですね^^ 試してみます！動画の方も楽しみにしています！
初心者です。質問があります！
この動画を見ながら実際に模写コーディングしようとしました。
画像を抽出するところでつまづいてしまったのですが、
この「はくばく」さんのサイトのmainの画像はどうやって抽出するのですか？
cssのbackgroundにsvgが指定されているように見えますが、
動画にあるようにopen new tab をしても、真っ白なサイトが開くだけでできません。
初心者すぎてくだらない質問かもしれませんが、よかったらご教示ください。
模写コーディングという言葉を初めて知りました。とても勉強になりました！ありがとうございます。
WordPressで作られたサイトでも模写コーディングは出来ますか？それと、Class名はとりあえず自分なり付けるのでしょうか？
15:45 windowsだとできないんでしょうか...調べても出てこなくて、ご存知の方いたら教えていただきたいです🙇
お返事遅くなりすみません🙇♀️
Windowsだと、標準のペイント機能でスクリーンショットを開いていただければ代用できるかと思います！範囲選択の機能を活用してみてください！
２つ質問があります。⑤のHTML編集のところからわからなくなってしまいました。「用意していたテキストを配置して」とありますが、これはホームページから文字だけコピーして、VSコードのからコピペで張り付けて、適切なタグをつけていくという解釈で大丈夫でしょうか？ また適切なタグが分からない場合は、ホームページから確証を押し、確認して同じものを入れていくという解釈でよろしいのでしょうか？
ご視聴ありがとうございます！
はい、まずはHTMLの雛形（やなど）を用意しておいて、の中に、模写するサイトのテキストだけコピーしたものを貼り付けます。
ちなみに、VS Codeをお使いであれば、空のHTMLファイルを作成して、そこで「!」と押してエンターキーを押していただくだけでも、HTMLの雛形が入力できるので便利です！
webdesign-trends.net/entry/13588#HTML5
その後の作業も、仰るイメージで合っています。
HTMLの学習が不十分な場合は、どこでどんなタグを使っていいかがわからないと思うので、一旦お手本のサイトを検証ツールで確認しながら、そっくり真似ていくのでも最初は良いと思います。応援しております！
大変勉強になりました。わかりやすかったです。
いきなりdivタグ設定していましたが、
まずはテキストを整えてから、
その後にdivを設定する様にしていきます！
ご視聴ありがとうございます！
基本的に、divタグはデザインを整えるために活用するものですので、今後もそのような手順でコーディングしていただければ、より良いコードになるかと思います✨
CSSの余白や文字などの選択範囲のサイズをwindowsでもスクリーンショット画像から調べることできますか？
ご質問ありがとうございます！
私の環境で確認した限りですが、Windowsに標準で入っている「ペイント」でスクショ画像を開けば、選択範囲機能を使って同じように調べることができると思います。
お試しいただけると幸いです！
@@webgodweb 返信ありがとうございます！独学で学んでいるのでわかりやすい動画で助かります！チャンネル登録して勉強させていただきます
自分のオリジナルのウェブサイトを作るという授業があって全然授業についていけてないんですがこれを続けていくうちにできるものですか？できれば教えていただきたいです！
こんにちは。
一回模写で挫折しましたが、もう一度挑戦しようと決意webの神様の所へきました。
またしてもはじめから詰まってしまい調べても理解に苦しんでします。
headerについてです。
progateでははくばくのようなheaderの場合、floar:leftを習いましたが、
他のサイトでは最近はdisplay:flexを使うとのことでした。
一体どちらを選択すれば便利なのでしょうか。
また、display:flexを使った場合のheaderのcssの記述の仕方もいまいちよくわかりません。
もしよろしければ具体的にご教授いただけると幸いです。
ちなみにwebの神様のdisplay:flexの動画もほかの模写の動画も観ました。
色々調べてみましたがheaderについての疑問は解決しませんでした。
コーディングは本当に得意ではないので、かみ砕いて説明していただけると大変助かります。よろしくお願いいたします。
コメントありがとうございます😀コーディングについては、完全な正解というものがない為、意図通りな見た目に実装できているかどうかが重要になります💡 最近では、レスポンシブ表示でPCとSP表示を同一のHTMLで実装することが多く、スマホだけ、要素の順番を並び替えたい等の要件がある場合は、display:flex;を使った方が簡単に実装できます！どちらを使わないといけないということはありませんが、flex、float どちらでもコーディングできるようになっておけば尚良いと思います🍀
@@webgodweb
もやもやしていたことがすっきりしました。
お忙しい中ありがとうございました。
これからも動画参考にさせていただきます‼
初めまして。とても丁寧な解説動画、ありがとうございます！
一点ご質問させて頂きたいことがあるのですが、もしお時間ございましたら、教えていただけると幸いです。
Macのプレビュー表示などで画像を開いていると、
選択範囲のサイズをリアルタイムに確認できる旨、動画内でご説明がありますが、
手持ちのWindowsで、GoFullPageのスクリーンショットや、explorerの「プレビューウィンドウを表示」
⇒その箇所で右クリック等試しても、動画のように上手く、大体の「余白の大きさ」や「要素間の距離」が表示出来ず、困っています。
初歩的なご質問すみません💦
コメントありがとうございます！
プレビュー機能はMac独自のものなので、Windowsの場合はスクリーンショット画像を「ペイント」で開いていただいて、範囲を選択する機能を使用すると、選択範囲の大きさなどが画面下に表示されるかと思います。
お試しいただければ幸いです！
@@webgodweb 早速のご回答、ありがとうございます！
スクリーンショット
⇒ペイント機能
⇒範囲を選択する
で、
無事に画面下で 選択範囲の大きさが確認できました。
とても分かりやすかったです(^^)
おおおーナイス質問です！僕も分からなかったのでありがとうございます！
とてもわかりやすくて勉強になる動画をアップしてくれてありがとうございます！
こちらこそ、ご視聴ありがとうございます！😊
イメージ画像は保存するより画像アドレスのコピーではダメなのですか？
本家のサイトのソースを読み込むということですね！模写コーディング内での個人的な利用であれば、そちらでも特に問題ないかと思います😊
Webの神様 ありがとうございます！
こんにちは！いつも参考にさせてもらってます！質問なんですけど、
font-sizeとかは検証ツールで確認するしかないですよね？
ご返信が遅くなりました💦
フォントサイズは、Google Chrome拡張機能の「What Font」などを使っていただくと確認できるのでオススメです！
選択範囲のサイズで余白を調べようと思っても、実際の余白の値とスクショした画像の余白の数値が大きく異なるのはなぜですか？
ご質問ありがとうございます！
スクリーンショット画像が実寸より大きい状態かと思いますので、下記の動画をご覧いただければ解決するかと思います！🙇♀️
【初心者向け】模写コーディングのよくあるご質問回答＆お悩み相談！【HTML・CSS コーディング】
ua-cam.com/video/ObHr8pbHDoc/v-deo.html
質問させてください。
macのプレビュー表示を使用する方法がわかりません。
どうしたら、使うことができるでしょうでしょうか？
ご視聴ありがとうございます😊スクリーンショットをダブルクリックで開いてみてください。プレビューアプリが立ち上がるかと思います🍀
@@webgodweb ありがとうございます、
成功しました！
この動画を見つけて自分でも出来るかもと励みになりました。ありがとうございます。
私はWin10を使っているのですが、15:30あたりで言及されていたMacのプレビュー表示で選択範囲のサイズをリアルタイムで確認できる機能はWin10にもありますでしょうか。
グーグルでいろいろ検索したのすが見つけらず、もし知っていたら（このコメントを見た方でご存じの方いましたら）教えてくれませんでしょうか。
お願いしますm(_ _ )m
コメントありがとうございます！Windowsでは「ペイント」ツールが代用できるはずですが、他にも画像編集ができるフリーソフトなどで代用可能かと思います！
ferret-plus.com/2179
是非お試しください🙇♀️
10:50
むむむむ、、、難しいですｗ
ご視聴ありがとうございます😊慣れない間は難しく感じると思います。少しづつ慣れていってくださいね🍀
Mac のプレビューで選択範囲のピクセル数が自動で表示されるのはどのような設定をするのか教えて頂けますか？
ご視聴ありがとうございます😊プレビューアプリでデザインのスクショを開いて、画像の上でクリックしてからドラッグして句形選択している間、ピクセル数が表示されませんでしょうか？一度お試しください🍀
@@webgodweb ありがとうございます。残念ながら四角の選択をしても、動画のように右下にピクセルがでなかったので何か方法や設定があるのかなーと思い質問させて頂きました。わかりましたらお願いします。話は変わりますが、いつかナビバーとハンバーガーメニューを複数の方法で作る動画をお願いします。HTML/CSSのみ、Flexboxを使用、Bootstrapを使用みたいに1つの表現を複数のやり方で見せて頂けると大変勉強になると思いました。
私の環境のMacでは特に設定変更していない状態で今の仕様でしたので、具体的な解決策を提示できず申し訳ありません💦
プレビュー機能以外ですと、画像編集ソフトなら恐らく同様の範囲選択、数値表示ができるはずですので、「画像編集 フリーソフト」等で検索して何か別のものでお試しいただけますと幸いです！
リクエストもありがとうございます、大変参考になります✨今後の動画テーマとして検討させていただきます！
Webの神様さんって情報商材出身の人？模写コーディングってWeb制作の現場では、
使われないんですよね。模写コーディングを自分で作った実績として出す人、おおすぎ。