【実践】HTML・CSSでホームページを作りながら解説します【コーディングLIVE】

Рет қаралды 59,417

Жыл бұрын

※このページには広告・プロモーションが含まれており、リンクにはアフィリエイトリンクが含まれています。
----------------------------------------------------------------------------------
【公式サイト】
bakusokuw.com/
【Instagram】
/ bakusoku.freelance
【X（Twitter）】
/ bakusokuw
----------------------------------------------------------------------------------
【使用ツール/サービス】
▽Brackets（エディター）
brackets.io/
▽Chrome（ブラウザ）
www.google.com/intl/ja/chrome/
▽エックスサーバー
px.a8.net/svt/ejp?a8mat=3H5CY...
🔽コピペを含む補足はこちら
bakusokuw.com/note/#salad-mee...
🔽 Webサイトを公開する方法こちら
bakusokuw.com/webup/
リンクやコピペの貼り忘れなどあれば、コメントで教えてください！

Пікірлер: 56

@user-xu2sq1nm6p Жыл бұрын

ありがとうございました。今回も色々と勉強になりました！作っているサイトのデザインや内容も楽しくてやってみたいなと思うものだとやる気が出ます。また楽しみにしています！

@user-lt6cf5cp7b Жыл бұрын

HTML・CSS初心者ですが、大変分かりやすく、楽しく制作を続けられています。いつも動画投稿楽しみにしております！

@user-jb7hc8ggft Жыл бұрын

HTML勉強し始めたからめちゃくちゃ勉強になります

@user-ep7bq3zb6y 7 ай бұрын

1つ1つ真似しながら勉強させて頂きましたが、非常に分かりやすく感謝しかありません。 HTML&CSSを一通り学び、手詰まっていた所とても素晴らしい動画に巡り合うことが出来ましたし、少し自信も付きました。本当にありがとうございます。

@user-tw3yd5we1r Жыл бұрын

動画を参考に魔王城が作り終わったので次はこれを作ってみます！動画投稿ありがとうございます。

@user-minri Жыл бұрын

前回の魔王の城よりも、少し簡単に作成する事が出来ました。非常に判りやすく、続けることが出来ています。次回も楽しみにしております。有難う御座います。

@mnrt23 7 ай бұрын

講座受講したりいろんな動画見てきましたが、聞き取りやすくてなぜそれを入力するのかちゃんと理解しながらできるから一回動画と一緒にやるだけで全く同じものがちゃんと作れました！結局これはどうするんだろうで手詰まりだった部分があったので、今回のできた！という経験が少し自信に繋がりました！最終的に完成品だけ見ながら同じコードが書けるようになるまで練習すれば、この形のウェブサイトなら作れるようになるかもしれないと思ったので頑張りたいと思います🔥

@user-ny8we4ne6i 4 ай бұрын

マジで見たかった動画です。これです。ありがとうございます。他の言語を使った実演も見たいです。

@Cooliy-zc9hw 2 ай бұрын

聴きやすいです相性がいぃかもありがとうございます

@pancake56 Ай бұрын

フレックスをクラスで作って、使い回すの、頭整理されて助かる。

@jiyuukibounippon 6 ай бұрын

🇯🇵🇯🇵いいですね。

@user-vc2eg2qc8h Ай бұрын

VScode使っていて今は分かりませんが、更新を押さないと確か反映されなかったので、Braketsのライブプレビューいいなと思いました。コメント押したり外したりして、動きなどを理解しやすい。

@user-ix8ot9wd8n Жыл бұрын

ものすごくわかりやすくてとても勉強になりました。本当にありがとうございました。質問なのですが、今後、jQueryを使って、ハンバーガーメニューやスライドショーやアコーディオンメニューなどのような動きのあるサイト制作をされる予定はありますでしょうか？爆速制作さんの動画は説明が親切・丁寧ですごく勉強になるため是非お願いいたします。あと、できれば、動画の最後にでも、今回のサイト制作ができるようになれば、平均でいくらくらい稼げるみたいに教えていただけると、勉強する側も、今の自分のレベルがわかってモチベーションアップにつながります。

@bakusokuw Жыл бұрын

ありがとうございます！次の新しい動画が丁度ハンバーガーメニューの作り方です。jQueryではなく素のJavaScriptですが、簡単に作れて使えるよう解説しています。編集中なので少しお待ちください！いくら稼げるかについては、サイト次第としうより営業力や交渉次第な場合が多く、表現が難しいです。例えば同じサイトでも実績のない初心者だと数万円でしか売れないけど、実績多数なら10数万円でも売れる。もっと実績豊富であれば数十万円みたいなイメージです。なので基本は数万円スタート、沢山サイトを作って制作実績を重ねていけば単価は上げていけるみたいなイメージです。

@user-ix8ot9wd8n Жыл бұрын

ありがとうございました。

@user-df3yz3oj1z 14 сағат бұрын

自分用1:08:00

@erikayyy4631 5 ай бұрын

何度も停止してやり直したりしましたが、やっと完成！！と思ったらサーバーにアップロードで色々とエラーが出てしまいパニック😵‍💫 調べて⇒試してをここ2日程やって、ついに先程、自分の携帯でもアクセスしたらちゃんと反映されてました❤ 声が聞き取りやすく、動画も見やすかったです。ありがとうございます😊

@hidekinishikawa915 3 ай бұрын

わかりやすい解説で楽しく理解できます。ありがとうございます。Google Fontのレイアウトが変更されていると思うのですが、サイズごとの選択ができません。Google　fontの解説をお願いできればと思います。

@bakusokuw 3 ай бұрын

変わりましたね！ Google Fontが用意している通りFull axisで全部の太さ読み込んで大丈夫です。僕も最近は全部読み込んでます！

@hidekinishikawa915 3 ай бұрын

@@bakusokuwご返信頂きありがとうございます。動画を見ながら実際に作成して理解、習得を進めたいと思います。また、質問等させて頂くかもしれませんが、よろしくお願いいたします。

@misa3142 3 ай бұрын

動画いつも見させて頂いております。分かりやすく、とても勉強になり、何度も繰り返しさせてもらっております。このページを参考に公開したいページを作成したいのですが、参考にさせてもらっても構いませんか？よろしくお願いいたします。

@bakusokuw 3 ай бұрын

動画見てくれてありがとうございます！いいですよ！

@misa3142 3 ай бұрын

@@bakusokuw 有難うございます。

@Lordrandyvillarta 4 ай бұрын

ここまで来た理由は情報の授業のせいw

@nemu74 6 ай бұрын

こんにちは！参考にさせてもらってます！ webデザイナーとしてのポートフォリををこのホームページの画像とかは自分で変えながら作成して最終的には一枚の画像として保存したいんですがどのように保存できますでしょうか？サーバがないと保存できないのでしょうか？

@bakusokuw 6 ай бұрын

キーボードのF12で出すディベロッパーツール（動画内でスマホ画面確認するときに使ってるやつ）から3点縦並びアイコンのメニューから保存できます！もしくはChromeの拡張機能でもページを一枚の画像として保存可能ですサーバーはなくても大丈夫です！

@nemu74 6 ай бұрын

@@bakusokuw 丁寧なご回答ありがとうございます😭♥️♥️♥️

@jack1999-b9w 5 ай бұрын

最後のイメージ画像の4つの横並び画像は、バックグランドではなくimg画像をdisplay flexでcssで加工は駄目ですか？background-imageを使用したのは何故ですか？

@bakusokuw 5 ай бұрын

方法は1つじゃないので、好きな方法でいいですよ！今回background-imageを使用した理由はサイズがバラバラな画像の縦幅を揃えて表示するためです。

@kazu20091000 6 ай бұрын

すごくためになります。これはなんていうサーバーを使っているのですか？

@bakusokuw 6 ай бұрын

僕はエックスサーバーを使ってます！他のサーバーでもOKです

@user-jo7ke8mk1b 2 ай бұрын

この流れでサーバー気になるの草

@user-cz9ou3oo2o Ай бұрын

1日目 22:20

@user-bv6lj9db9b 4 ай бұрын

自分用 56:08

@user-es3lv1xz6c 2 ай бұрын

1:05:53

@jack1999-b9w 5 ай бұрын

.hero_inner　はdiv要素なのでブロック要素だと思うのですが、なぜ横幅が文字分しかないのでしょうか。display flexしたからですか？

@bakusokuw 5 ай бұрын

そのとおりです！

@jack1999-b9w 5 ай бұрын

@@bakusokuwありがとうございます。

@user-ns9qy1fd1b 5 ай бұрын

Googlefontのselectボタンが出てこなくて追加できないのですが、何か対処法はあるでしょうか？ 4:17

@bakusokuw 5 ай бұрын

Google Fontsの仕様が少しだけ変わりました。 ①使いたいフォントをクリック ②画面右上にあるGet fontをクリック ③画面右にあるGet embed codeをクリックこれで動画のようなコピペする画面が出ます初期設定では文字の太さが細いのから太いのまで一括で使うようになっていますが、そのままで大丈夫です。

@user-ns9qy1fd1b 5 ай бұрын

わかりました！ありがとうございます！もう一つお聞きしたいのですが、cssに貼る用のリンク 6:14 はどこからコピーすれば良いのでしょうか？

@bakusokuw 5 ай бұрын

同じとこにあります！使用例的なクラス名と波括弧もついてますけど

@user-ns9qy1fd1b 5 ай бұрын

できました！丁寧に対応していただきありがとうございます！これからも参考にさせていただきます。