【実践】HTML・CSSでホームページを作りながら解説します【コーディングLIVE】
ฝัง
- เผยแพร่เมื่อ 12 ก.ย. 2024
- ※このページには広告・プロモーションが含まれており、リンクにはアフィリエイトリンクが含まれています。
----------------------------------------------------------------------------------
【公式サイト】
bakusokuw.com/
【X（Twitter）】
/ bakusokuw
----------------------------------------------------------------------------------
【使用ツール/サービス】
▽Brackets（エディター）
brackets.io/
▽Chrome（ブラウザ）
www.google.com...
▽エックスサーバー
px.a8.net/svt/...
🔽コピペを含む補足はこちら
bakusokuw.com/...
🔽 Webサイトを公開する方法こちら
bakusokuw.com/...
リンクやコピペの貼り忘れなどあれば、コメントで教えてください！
講座受講したりいろんな動画見てきましたが、聞き取りやすくてなぜそれを入力するのかちゃんと理解しながらできるから一回動画と一緒にやるだけで全く同じものがちゃんと作れました！
結局これはどうするんだろうで手詰まりだった部分があったので、今回のできた！という経験が少し自信に繋がりました！
最終的に完成品だけ見ながら同じコードが書けるようになるまで練習すれば、この形のウェブサイトなら作れるようになるかもしれないと思ったので頑張りたいと思います🔥
前回の魔王の城よりも、少し簡単に作成する事が出来ました。非常に判りやすく、続けることが出来ています。次回も楽しみにしております。有難う御座います。
HTML・CSS初心者ですが、大変分かりやすく、楽しく制作を続けられています。
いつも動画投稿楽しみにしております！
1つ1つ真似しながら勉強させて頂きましたが、非常に分かりやすく感謝しかありません。
HTML&CSSを一通り学び、手詰まっていた所とても素晴らしい動画に巡り合うことが出来ましたし、少し自信も付きました。
本当にありがとうございます。
HTML勉強し始めたからめちゃくちゃ勉強になります
ありがとうございました。今回も色々と勉強になりました！作っているサイトのデザインや内容も楽しくてやってみたいなと思うものだとやる気が出ます。また楽しみにしています！
とてもわかり易くて勉強になりました。ありがとうございました。
マジで見たかった動画です。これです。ありがとうございます。
他の言語を使った実演も見たいです。
動画を参考に魔王城が作り終わったので次はこれを作ってみます！動画投稿ありがとうございます。
聴きやすいです
相性が いぃかも
ありがとうございます
何度も停止してやり直したりしましたが、やっと完成！！
と思ったらサーバーにアップロードで色々とエラーが出てしまいパニック😵💫
調べて⇒試してをここ2日程やって、ついに先程、自分の携帯でもアクセスしたらちゃんと反映されてました❤
声が聞き取りやすく、動画も見やすかったです。ありがとうございます😊
わかりやすい解説で楽しく理解できます。ありがとうございます。Google Fontのレイアウトが変更されていると思うのですが、サイズごとの選択ができません。Google fontの解説をお願いできればと思います。
変わりましたね！
Google Fontが用意している通りFull axisで全部の太さ読み込んで大丈夫です。
僕も最近は全部読み込んでます！
@@bakusokuwご返信頂き ありがとうございます。動画を見ながら実際に作成して理解、習得を進めたいと思います。また、質問等させて頂くかもしれませんが、よろしくお願いいたします。
フレックスをクラスで作って、使い回すの、頭整理されて助かる。
VScode使っていて今は分かりませんが、更新を押さないと確か反映されなかったので、Braketsのライブプレビューいいなと思いました。コメント押したり外したりして、動きなどを理解しやすい。
ものすごくわかりやすくてとても勉強になりました。本当にありがとうございました。質問なのですが、今後、jQueryを使って、ハンバーガーメニューやスライドショーやアコーディオンメニューなどのような動きのあるサイト制作をされる予定はありますでしょうか？爆速制作さんの動画は説明が親切・丁寧ですごく勉強になるため是非お願いいたします。あと、できれば、動画の最後にでも、今回のサイト制作ができるようになれば、平均でいくらくらい稼げるみたいに教えていただけると、勉強する側も、今の自分のレベルがわかってモチベーションアップにつながります。
ありがとうございます！
次の新しい動画が丁度ハンバーガーメニューの作り方です。jQueryではなく素のJavaScriptですが、簡単に作れて使えるよう解説しています。編集中なので少しお待ちください！
いくら稼げるかについては、サイト次第としうより営業力や交渉次第な場合が多く、表現が難しいです。例えば同じサイトでも実績のない初心者だと数万円でしか売れないけど、実績多数なら10数万円でも売れる。もっと実績豊富であれば数十万円みたいなイメージです。なので基本は数万円スタート、沢山サイトを作って制作実績を重ねていけば単価は上げていけるみたいなイメージです。
ありがとうございました。
動画いつも見させて頂いております。
分かりやすく、とても勉強になり、何度も繰り返しさせてもらっております。
このページを参考に公開したいページを作成したいのですが、
参考にさせてもらっても構いませんか？よろしくお願いいたします。
動画見てくれてありがとうございます！
いいですよ！
@@bakusokuw 有難うございます。
ここまで来た理由は情報の授業のせいw
🇯🇵🇯🇵いいですね。
すごくためになります。これはなんていうサーバーを使っているのですか？
僕はエックスサーバーを使ってます！他のサーバーでもOKです
この流れでサーバー気になるの草
こんにちは！参考にさせてもらってます！
webデザイナーとしてのポートフォリををこのホームページの画像とかは自分で変えながら作成して最終的には一枚の画像として保存したいんですがどのように保存できますでしょうか？
サーバがないと保存できないのでしょうか？
キーボードのF12で出すディベロッパーツール（動画内でスマホ画面確認するときに使ってるやつ）から3点縦並びアイコンのメニューから保存できます！
もしくはChromeの拡張機能でもページを一枚の画像として保存可能です
サーバーはなくても大丈夫です！
@@bakusokuw 丁寧なご回答ありがとうございます😭♥️♥️♥️
自分用 56:08
自分用1:08:00
1日目
22:20
最後のイメージ画像の4つの横並び画像は、バックグランドではなくimg画像をdisplay flexでcssで加工は駄目ですか？background-imageを使用したのは何故ですか？
方法は1つじゃないので、好きな方法でいいですよ！
今回background-imageを使用した理由はサイズがバラバラな画像の縦幅を揃えて表示するためです。
.hero_inner はdiv要素なのでブロック要素だと思うのですが、なぜ横幅が文字分しかないのでしょうか。display flexしたからですか？
そのとおりです！
@@bakusokuwありがとうございます。
カンパニーの部分が横並びから変わらないのですが何が原因でしょう( ; ; )
コードは同じになってそうです…
コードを見れないので原因は特定できないのですが、コードが同じになれば表示も同じになるので気分リフレッシュしてもう一度見てみてください！
完成品のURLとメディアクエリも教えて頂きたいです😂(既にどこかに貼ってあったらごめんなさい🙇♀️)
以前は完成品のソースコードも公開してたのですが、動画見て自分でコードを打って欲しくてやめちゃいました！
メディアクエリは他の動画でも毎回使ってるのでぜひ見てみてください！
@@bakusokuw返信ありがとうございます。わかりました！なんとか完成させることができました。
余談ですが、今までコードの間違いを探すのに時間がかかってましたが、チャットGPTに聞いたらすぐ見つけることができました。
コメント失礼致します。なんのこれはなんて言うエディターですか？
Bracketsです！多分概要欄にあります
1:05:53
Googlefontのselectボタンが出てこなくて追加できないのですが、何か対処法はあるでしょうか？ 4:17
Google Fontsの仕様が少しだけ変わりました。
①使いたいフォントをクリック
②画面右上にあるGet fontをクリック
③画面右にあるGet embed codeをクリック
これで動画のようなコピペする画面が出ます
初期設定では文字の太さが細いのから太いのまで一括で使うようになっていますが、そのままで大丈夫です。
わかりました！ありがとうございます！もう一つお聞きしたいのですが、cssに貼る用のリンク 6:14 はどこからコピーすれば良いのでしょうか？
同じとこにあります！
使用例的なクラス名と波括弧もついてますけど
できました！丁寧に対応していただきありがとうございます！これからも参考にさせていただきます。
こんにちは♪
こちら、無料でいいんですか？
見逃さぬようtwitter フォローさせていただきました。