【HTML/CSS入門】レスポンシブ対応のコーポレートサイトを１から構築してみよう

#入門 #html #css #プログラミング #web制作 #website #エンジニア #独学 #コーディング #レスポンシブ
CodeStep公式はこちら。
code-step.com/
【さらに詳しく学びたい方へ。Udemy90%割引クーポン発行中🚀】
↓↓↓↓↓
shincode.info/2021/12/31/udemy...
＼ShinCode_Camp開校しました／
プログラミング講座＆副業・起業＆就職・転職が学べるプラットフォーム🚀
🎁月額2500円で全講座が見放題
🎁分からない箇所は質問し放題
🎁7日間無料キャンペーン実施中
🎁コミュニティ機能付き
🎁いつでも解約可能etc...
↓↓↓↓↓
code-s-school-5bc2.thinkific....
-----------------------------------------------------------------------------------------------------------------------------
【この動画を視聴するメリット】
・HTML/CSSの基礎が理解できる
・レスポンシブ対応のWebサイトが構築できる
・メディアクエリについて理解が深まる
・flexboxについて学べる
【信頼性】
・Udemy講師
・講師レビュー評価94.6%
・Udemy受講生延べ3000人突破
・Webアプリ/サイト開発数：200以上
・生きがい：プログラミングでサイトやアプリを作ること
-----------------------------------------------------------------------------------------------------------------------------
★チャンネル登録はこちらから★
/ @user-hl9uv6cv7k
★今回のソースコード★
github.com/Shin-sibainu/lp-ht...
★運営者SNS★
Twitter： / shin_engineer
★この動画で使用している機材★
キーボード(Keychron K6 赤軸)：amzn.to/3F4zca5
マウス(Logicool G ロジクール G ゲーミングマウス)：amzn.to/3DZaaYB
マイク(サンワダイレクト USBマイク PCマイク)：amzn.to/30AVwJF
マイクスタンド(Luling Arts マイクスタンド マイクアーム スタンド)：
amzn.to/3se5onZ
※アフィリエイトリンクになります。

[@user-nx4kt4zl8z]

視聴者のレベル感に合わせて動画によって説明の詳しさが違うの凄すぎる。的確、、、

[@user-go4tn3tn3p]

細かいところまで感謝します。

[@DeCoperi]

すごく参考になります！ ありがとうございます👍

[@user-wo6oz4rm3w]

わかりやすいです。感謝します❣️

[@kamikaze37136]

ちょっと待て。 このチャンネル有益過ぎないか？ ズブの素人の俺でも同じものが作れてマジで感動した🥺

[@user-ne9ke1ew8x]

いつも参考にさせて頂いてます。分かりやすく、とても助かってます。ありがとうございます。

[@user-xj8uz4qd5f]

いつも質の高い動画をありがとうございます。欲を言うと、もっと見たいです！！

[@tako29378]

最高すぎます。

[@user-ve5ct5rl2h]

ありがとうございました。最後までやり切ることができました。今まで観てきたどの動画 よりも分かりやすく、丁寧な内容でした。

[@mlabosalontv3178]

👏Shinさん、やっぱすごいや！最高に分かりやすいですね。素晴らしいです。

[@user-ic4nb2ck3h]

今回もとてもわかりやすく勉強になりました！ 体調悪い中、本当にありがとうございます！！

[@y.i157]

初心者にもすごく分かりやすいです！初心者なので、ショートカットキーに触れていただいているのもとてもありがたいです！

[@GG92KZ]

中身のある動画になります。 ありがとうございます！ これからもよろしくお願いします

[@user-ck5vr8jm6l]

すごく分かりやすくて助かります。 まだショートカットキーも、おぼつかない初心者でも助かります！

[@user-vr1lc5wx1s]

しんちゃんのUDEMY買ったけど分かりやすくて勉強になったよ！

[@formkokolo7001]

始めて見させていただきました。飽きないスピードで丁寧かつ分かりやすい。自分もこのくらい出来たらなーと憧れますね

[@user-ni5tm7xw4v]

少し前から勉強を始めてて凄くわかりやすい動画があって嬉しいです。他の動画も見て勉強します！

[@hwialh5914]

codestepに取り組んでおり、今回の動画で疑問点がクリアになりました！！ 非常に分かりやすかったです✨ありがとうございました。 ぜひCodestepの他のものもやっていただきたいです！！

[@user-vt7tc1bc9b]

いつも実況してくれるのがすごく助かります。リアリティな制作過程がよくわかります。

[@user-ep7bq3zb6y]

本当に分かりやすく、動画を観ていてめっちゃ楽しかったです。

[@H2Office_hiro]

しばらくコーディングから離れてしまっていてアタマ訛っていたので、リフレッシュとしてもとても分かりやすく、簡潔でリピしそうです！！

[@nagai_net]

さすがに凄い！最近ビジネス系KZbin動画上げる人少なくなって来ていますが、貴重で中身の濃い無くてはならない動画ありがとうございます！

[@ktml_o.O]

めちゃくちゃわかりやすくて感動餃子🥲

[@nagai_net]

何回も見させていただいております。細かい所まで丁寧に解説ありがとうございます。お陰様でかなり上達しました。自分は52歳ですがペースの速さより1つ1つ自分のものにしていきたいと思います。これからも貴重な動画待ってます。

[@Kk-fq3nd]

スクールより分かりやすいです。 いつもありがとうございます。

[@user-br9oz4yp8g]

とてもわかりやすく勉強になります^_^ これからも楽しみにしていますので、宜しくお願いします😊

[@karisutonn]

めっちゃわかりやすかったです。詰まることなく最後までいけました。ありがとうございます!!!

[@komakoma]

非常にわかりやすく勉強になりました。体調にお気をつけて頑張ってください！応援しています。

[@user-hl9uv6cv7k]

こまこまさん、ありがとうございます！ 体調が良いときに進められたらと思います

[@ricoco57]

この動画が初心者向けのもので一番良いと思います。いろんな内容も取り入れてあってありがたいです。

[@user-hl9uv6cv7k]

確かにLP作成の動画はあまりないので、これは勉強になりますね。今回も動画のご視聴ありがとうございます

[@ShikiHachi2023]

これ無料はやばくないかｗありがとうございます！

[@hikkymama]

Shinさんの動画はテンポがいい+詳しく説明してくれているので、初心者でもチャレンジしやすいです。ありがとうございます！1時間程度の動画ですが、メモしながら一緒に作ったら4時間かかりました💦。 今度は動画無しで一人でつくれるように練習します！ （ちょうど1年ほど前の動画なんですね。その後も更新していただいてて嬉しいです。）

[@user-hl9uv6cv7k]

hikkymamaさん、ご受講ありがとうございます!! メモしながら！良いと思います☺ はい！デザインカンプから自力で模写できるようになったらかなり実力がついていると思っても大丈夫だと思います～！ がんばってくださいね🤗

[@user-pc7lk1sr8f]

web制作初心者です。痒い所に手が届く内容で無事に疑問が解決しました！ありがとうございました。

[@user-hl9uv6cv7k]

2500円ものスーパーチャットをいただきまして、ありがとうございます！！！ 動画制作の励みになります！！とても助かります。 そして疑問が解決したということでよかったです。引き続き学習の方がんばってくださいね。

[@GG92KZ]

ありがとうございます！

[@user-hl9uv6cv7k]

ITOMO！さんどうもありがとうございます！ とても励みになります スパコメとご視聴ありがとうございます

[@shohirano-gc4do]

コーディングは３年のブランクがあったので、復習のために拝見させていただきました。 さらっと疑問に思っていたことを回答している箇所がいくつもあったので、聴いた後「あ、それ知りたかったヤツ！」って感じで、いくつも問題がクリアになりました。ありがとうございました。

[@user-hl9uv6cv7k]

こちらこそ、ご視聴ありがとうございます！ お役に立てなのならば光栄です！

[@akha8091]

初めて模写コーディングしましたが説明がとても分かりやすく助かりました。正直、ドッ〇イン〇トールより分かりやすいし、サクサク進めることができました。体調が心配ですが、あまり無理なさらずに。ありがとうございました！またお邪魔します

[@user-vw4dg6zj3g]

細かく教えてくれるのでわかりやすくてとても参考になります！今学生でWEBシステムの制作をしています！djangoを使ってやってるんですが、今ちょうどHTMLとCSSをいじろうかなというところでした。リクエストのようになりますが、Bootstrapを使用してテンプレートしながら作成するか、今回の主さんのように自分で作成するか悩んでます、、、笑　Bootstrapを使うとどうしてもわからなくなりがちなのでできればで大丈夫ですのでBootstrapの使い方や適用の仕方の解説していただきたいです！

[@suragi2196]

19:40 交差軸に対して 20:01 ヘッダーを中央に 21:17 パディング 22:27 ヘッダーの高さ変更 31:58 レスポンシブ対応画像 42:43 飛ばせる 1:03:45 ボタン

[@user-mp7fu9vk8e]

模写コーディングしまくってます👍

[@tinytale7902]

planetscaleを是非やってほしい！！

[@FR030523]

いつも拝見させていただいています。 ブラウザを右から左に幅を小さくしていくと、真ん中にセットした画像が左側から消えていってしまうので、あるところまで来たら画像をそれ以上動かないようにしたいのですが、これを解決する方法について何か参考にできる動画がないでしょうか。 素人質問ですいません。

[@angel_crypto]

有難う御座いますm(_ _)m

[@user-wm4qh1ff3x]

いつも有益な動画ありがとうございます。 一点ご質問なのですが、実際の開発環境でブートストラップ使うかどうかの判断はどのようにされてますでしょうか。

[@user-hl9uv6cv7k]

ご視聴ありがとうございます。 作成するウェブサイトの仕様によりますかね。ブートストラップのUIで作成可能であれば使うとは思いますが、結局は生のCSSかtailwindcssを利用することが多いのかなと思っています。ですがブートストラップのようなutilityを利用したCSSの考え方はいずれ使うようになると思います。自作でutility作る人もいますし。

[@user-wm4qh1ff3x]

@@user-hl9uv6cv7k ご返信ありがとうございます。勉強になりました。仕様に合わせて使い分けるようにします。

[@user-le2sh4fg7m]

コメント失礼致します。 プログラミング超初心者です。 Twitterのアイコンを貼り付けたいのですが、gidhubはどうやってダウンロードしたらいいのでしょうか？

[@yu-ma4765]

10:18 大事そうなところ

[@user-lu9io8iz2k]

過去の動画に対しての質問で大変恐縮なのですがcss.styleのworksでの事なのですが記述後PC画面でもスマホ画面の用に画像が縦表示になってしまうのは何故なのでしょうか、、回答頂けると幸いです。。ちなみにaboutや画像以外はレスポンシブになっています。画像だけならないのです。

[@DNA4570]

マックスウィズスかマックスワイドかどちらか素朴な疑問です。気にせず進みます。シンコード！

[@user-hl9uv6cv7k]

マックスウィズスっぽいですね笑 癖でワイドって発音しちゃいます、、

[@user-bp3wq9gm2j]

@@user-hl9uv6cv7k 毎回丁重にご指導に感謝致します。ご返信頂き有難うございます。

[@jack1999-b9w]

コンタクトセクション部分は、dlタグを使用せずに、formタグから直接、labelタグとinput、textareaタグを使用してはダメでしょうか。

[@user-qd7yl7fe4t]

セマンティック的にはそちらが正しいと思います！

[@user-jz8dd1um9z]

29:00

[@twj6643]

react hook form Please❤

[@user-kf9fj6rf1w]

コメント失礼します。 35:10でdivタグでもいいのをsectionタグにしたのに関してそれぞれの違いはなんですか？教えていただけると幸いです。

[@user-hl9uv6cv7k]

機能的には同じですが、セマンティックCSSの考え方で「ここはセクションですよ」とグーグルに教えるためにsectionにしています。 他にもheaderやasideやfooterなどもそれにあたりますね。

[@user-qd7yl7fe4t]

HTML解体新書という書籍を買うと理解が深まるかもしれません！

[@user-ix8ot9wd8n]

動画24:55位のところで、.site-titleに対してline-height: 1.0;と指定しているのは何故なのでしょうか？

[@user-hl9uv6cv7k]

スーパーチャットありがとうございます！ CSSの line-height プロパティは、行間（行の高さ）を制御します。 デフォルトでは、ブラウザが自動的に行間を設定しますがデザインの目的で手動で調節することもあります。 特に、line-height: 1.0;と指定すると、行間がフォントサイズと同じになります。つまり、テキストの行が互いに接近し、ブロックの全体の高さが小さくなります。これは、テキストの見た目を制御したり、スペースを節約したりするために利用されます。 ご参考までに。

[@kuma_noko365]

質問です！！！ 動画のLPを参考にhtml、cssを組んでいるのですが、 worksの下にwordpressのサイトに飛ばすボタンをを置きたいんですけどどんなコードを打ち込めば良いですか？ 試行錯誤してるんですけど、全然出来なくて...

[@user-hl9uv6cv7k]

aタグのhrefの中身に、飛ばしたいWordPressの絶対パスを配置してはどうでしょうか。cssでボタンのような形に修正はできます。

[@kuma_noko365]

@@user-hl9uv6cv7k 分かりました！試してみます

[@switchtoanotherone]

プログラミング初心者です。宜しくお願いいたします。cssでpタグに対して記述をされていますが、htmlを見る限りが書かれていないように思います。この矛盾が分からないため、ぜひ教えていただきたくコメントしました。

[@user-hl9uv6cv7k]

ご視聴ありがとうございます。 具体的に動画の何分くらいの場所でしょうか。

[@switchtoanotherone]

@@user-hl9uv6cv7k 15:26 あたりです。

[@porike47]

お体の方は大丈夫でしょうか。 いつも勉強させていただいております。 一つ質問させてください。 にidをつけられてましたが、idをつけずにのままでcssを当てていっても同じように出来るのですが、 あえてidをつける理由を教えていただけますでしょうか。よろしくお願いいたします。

[@user-hl9uv6cv7k]

headerのままcssを付けても構いません！ idをつけたのは、セクションごとにidで統一したかったからです。あとは詳細度の問題もありますが あまり気にしなくても大丈夫だとは思います。

[@user-qd7yl7fe4t]

Idよりclass名でcssを当てたほうがオススメです！詳しくはBEMとかで調べてみてください

[@HaRuToDeSuYo]

すみません。お忙しい時に申し訳ございません。 チャンネル宣伝ページを作ろうとしているのですが、この動画のところの、ヘッダー？を真似してもいいですか？ 全ては真似しません。もちろん登録もしていますが、使えなければ全然いいのですが、どうですかね。長文失礼しました

[@user-hl9uv6cv7k]

ご視聴ありがとうございます。 どうぞご利用くださいませ🙇

[@user-lk9pq9nn5c]

34:57 56:11

[@pop-lk6ro]

コメント失礼します。 githubのURLを概要欄に貼るとおっしゃってましたが、どこにありますでしょうか！

[@user-hl9uv6cv7k]

追加いたします。

[@user-hl9uv6cv7k]

概要欄の方に記載しておりますので、ご確認おねがいします。

[@user-zy5zs2fn4h]

画面サイズを小さくしても文字が小さくならない。。

[@davi48596]

ありがとうございますしんさん🫰