【HTML/CSS入門】レスポンシブ対応のコーポレートサイトを1から構築してみよう
#入門 #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
※アフィリエイトリンクになります。
Пікірлер: 82
ちょっと待て。 このチャンネル有益過ぎないか? ズブの素人の俺でも同じものが作れてマジで感動した🥺
いつも実況してくれるのがすごく助かります。リアリティな制作過程がよくわかります。
細かいところまで感謝します。
視聴者のレベル感に合わせて動画によって説明の詳しさが違うの凄すぎる。的確、、、
わかりやすいです。感謝します❣️
いつも参考にさせて頂いてます。分かりやすく、とても助かってます。ありがとうございます。
すごく参考になります! ありがとうございます👍
いつも質の高い動画をありがとうございます。欲を言うと、もっと見たいです!!
今回もとてもわかりやすく勉強になりました! 体調悪い中、本当にありがとうございます!!
しばらくコーディングから離れてしまっていてアタマ訛っていたので、リフレッシュとしてもとても分かりやすく、簡潔でリピしそうです!!
中身のある動画になります。 ありがとうございます! これからもよろしくお願いします
ありがとうございました。最後までやり切ることができました。今まで観てきたどの動画 よりも分かりやすく、丁寧な内容でした。
👏Shinさん、やっぱすごいや!最高に分かりやすいですね。素晴らしいです。
最高すぎます。
すごく分かりやすくて助かります。 まだショートカットキーも、おぼつかない初心者でも助かります!
少し前から勉強を始めてて凄くわかりやすい動画があって嬉しいです。他の動画も見て勉強します!
しんちゃんのUDEMY買ったけど分かりやすくて勉強になったよ!
本当に分かりやすく、動画を観ていてめっちゃ楽しかったです。
始めて見させていただきました。飽きないスピードで丁寧かつ分かりやすい。自分もこのくらい出来たらなーと憧れますね
初心者にもすごく分かりやすいです!初心者なので、ショートカットキーに触れていただいているのもとてもありがたいです!
めっちゃわかりやすかったです。詰まることなく最後までいけました。ありがとうございます!!!
めちゃくちゃわかりやすくて感動餃子🥲
さすがに凄い!最近ビジネス系KZread動画上げる人少なくなって来ていますが、貴重で中身の濃い無くてはならない動画ありがとうございます!
スクールより分かりやすいです。 いつもありがとうございます。
非常にわかりやすく勉強になりました。体調にお気をつけて頑張ってください!応援しています。
@user-hl9uv6cv7k
Жыл бұрын
こまこまさん、ありがとうございます! 体調が良いときに進められたらと思います
codestepに取り組んでおり、今回の動画で疑問点がクリアになりました!! 非常に分かりやすかったです✨ありがとうございました。 ぜひCodestepの他のものもやっていただきたいです!!
とてもわかりやすく勉強になります^_^ これからも楽しみにしていますので、宜しくお願いします😊
この動画が初心者向けのもので一番良いと思います。いろんな内容も取り入れてあってありがたいです。
@user-hl9uv6cv7k
5 ай бұрын
確かにLP作成の動画はあまりないので、これは勉強になりますね。今回も動画のご視聴ありがとうございます
何回も見させていただいております。細かい所まで丁寧に解説ありがとうございます。お陰様でかなり上達しました。自分は52歳ですがペースの速さより1つ1つ自分のものにしていきたいと思います。これからも貴重な動画待ってます。
これ無料はやばくないかwありがとうございます!
web制作初心者です。痒い所に手が届く内容で無事に疑問が解決しました!ありがとうございました。
@user-hl9uv6cv7k
10 ай бұрын
2500円ものスーパーチャットをいただきまして、ありがとうございます!!! 動画制作の励みになります!!とても助かります。 そして疑問が解決したということでよかったです。引き続き学習の方がんばってくださいね。
ありがとうございます!
@user-hl9uv6cv7k
Жыл бұрын
ITOMO!さんどうもありがとうございます! とても励みになります スパコメとご視聴ありがとうございます
Shinさんの動画はテンポがいい+詳しく説明してくれているので、初心者でもチャレンジしやすいです。ありがとうございます!1時間程度の動画ですが、メモしながら一緒に作ったら4時間かかりました💦。 今度は動画無しで一人でつくれるように練習します! (ちょうど1年ほど前の動画なんですね。その後も更新していただいてて嬉しいです。)
@user-hl9uv6cv7k
8 ай бұрын
hikkymamaさん、ご受講ありがとうございます!! メモしながら!良いと思います☺ はい!デザインカンプから自力で模写できるようになったらかなり実力がついていると思っても大丈夫だと思います~! がんばってくださいね🤗
模写コーディングしまくってます👍
細かく教えてくれるのでわかりやすくてとても参考になります!今学生でWEBシステムの制作をしています!djangoを使ってやってるんですが、今ちょうどHTMLとCSSをいじろうかなというところでした。リクエストのようになりますが、Bootstrapを使用してテンプレートしながら作成するか、今回の主さんのように自分で作成するか悩んでます、、、笑 Bootstrapを使うとどうしてもわからなくなりがちなのでできればで大丈夫ですのでBootstrapの使い方や適用の仕方の解説していただきたいです!
コーディングは3年のブランクがあったので、復習のために拝見させていただきました。 さらっと疑問に思っていたことを回答している箇所がいくつもあったので、聴いた後「あ、それ知りたかったヤツ!」って感じで、いくつも問題がクリアになりました。ありがとうございました。
@user-hl9uv6cv7k
Жыл бұрын
こちらこそ、ご視聴ありがとうございます! お役に立てなのならば光栄です!
19:40 交差軸に対して 20:01 ヘッダーを中央に 21:17 パディング 22:27 ヘッダーの高さ変更 31:58 レスポンシブ対応画像 42:43 飛ばせる 1:03:45 ボタン
初めて模写コーディングしましたが説明がとても分かりやすく助かりました。正直、ドッ〇イン〇トールより分かりやすいし、サクサク進めることができました。体調が心配ですが、あまり無理なさらずに。ありがとうございました!またお邪魔します
planetscaleを是非やってほしい!!
10:18 大事そうなところ
29:00
いつも拝見させていただいています。 ブラウザを右から左に幅を小さくしていくと、真ん中にセットした画像が左側から消えていってしまうので、あるところまで来たら画像をそれ以上動かないようにしたいのですが、これを解決する方法について何か参考にできる動画がないでしょうか。 素人質問ですいません。
過去の動画に対しての質問で大変恐縮なのですがcss.styleのworksでの事なのですが記述後PC画面でもスマホ画面の用に画像が縦表示になってしまうのは何故なのでしょうか、、回答頂けると幸いです。。ちなみにaboutや画像以外はレスポンシブになっています。画像だけならないのです。
コメント失礼致します。 プログラミング超初心者です。 Twitterのアイコンを貼り付けたいのですが、gidhubはどうやってダウンロードしたらいいのでしょうか?
有難う御座いますm(_ _)m
いつも有益な動画ありがとうございます。 一点ご質問なのですが、実際の開発環境でブートストラップ使うかどうかの判断はどのようにされてますでしょうか。
@user-hl9uv6cv7k
Жыл бұрын
ご視聴ありがとうございます。 作成するウェブサイトの仕様によりますかね。ブートストラップのUIで作成可能であれば使うとは思いますが、結局は生のCSSかtailwindcssを利用することが多いのかなと思っています。ですがブートストラップのようなutilityを利用したCSSの考え方はいずれ使うようになると思います。自作でutility作る人もいますし。
@user-wm4qh1ff3x
Жыл бұрын
@@user-hl9uv6cv7k ご返信ありがとうございます。勉強になりました。仕様に合わせて使い分けるようにします。
マックスウィズスかマックスワイドかどちらか素朴な疑問です。気にせず進みます。シンコード!
@user-hl9uv6cv7k
Жыл бұрын
マックスウィズスっぽいですね笑 癖でワイドって発音しちゃいます、、
@user-bp3wq9gm2j
Жыл бұрын
@@user-hl9uv6cv7k 毎回丁重にご指導に感謝致します。ご返信頂き有難うございます。
react hook form Please❤
質問です!!! 動画のLPを参考にhtml、cssを組んでいるのですが、 worksの下にwordpressのサイトに飛ばすボタンをを置きたいんですけどどんなコードを打ち込めば良いですか? 試行錯誤してるんですけど、全然出来なくて...
@user-hl9uv6cv7k
11 ай бұрын
aタグのhrefの中身に、飛ばしたいWordPressの絶対パスを配置してはどうでしょうか。cssでボタンのような形に修正はできます。
@kuma_noko365
11 ай бұрын
@@user-hl9uv6cv7k 分かりました!試してみます
プログラミング初心者です。宜しくお願いいたします。cssでpタグに対して記述をされていますが、htmlを見る限りが書かれていないように思います。この矛盾が分からないため、ぜひ教えていただきたくコメントしました。
@user-hl9uv6cv7k
Жыл бұрын
ご視聴ありがとうございます。 具体的に動画の何分くらいの場所でしょうか。
@switchtoanotherone
Жыл бұрын
@@user-hl9uv6cv7k 15:26 あたりです。
コメント失礼します。 35:10でdivタグでもいいのをsectionタグにしたのに関してそれぞれの違いはなんですか?教えていただけると幸いです。
@user-hl9uv6cv7k
Жыл бұрын
機能的には同じですが、セマンティックCSSの考え方で「ここはセクションですよ」とグーグルに教えるためにsectionにしています。 他にもheaderやasideやfooterなどもそれにあたりますね。
@user-qd7yl7fe4t
Жыл бұрын
HTML解体新書という書籍を買うと理解が深まるかもしれません!
動画24:55位のところで、.site-titleに対してline-height: 1.0;と指定しているのは何故なのでしょうか?
@user-hl9uv6cv7k
Жыл бұрын
スーパーチャットありがとうございます! CSSの line-height プロパティは、行間(行の高さ)を制御します。 デフォルトでは、ブラウザが自動的に行間を設定しますがデザインの目的で手動で調節することもあります。 特に、line-height: 1.0;と指定すると、行間がフォントサイズと同じになります。つまり、テキストの行が互いに接近し、ブロックの全体の高さが小さくなります。これは、テキストの見た目を制御したり、スペースを節約したりするために利用されます。 ご参考までに。
コンタクトセクション部分は、dlタグを使用せずに、formタグから直接、labelタグとinput、textareaタグを使用してはダメでしょうか。
@user-qd7yl7fe4t
Жыл бұрын
セマンティック的にはそちらが正しいと思います!
34:57 56:11
ありがとうございますしんさん🫰
すみません。お忙しい時に申し訳ございません。 チャンネル宣伝ページを作ろうとしているのですが、この動画のところの、ヘッダー?を真似してもいいですか? 全ては真似しません。もちろん登録もしていますが、使えなければ全然いいのですが、どうですかね。長文失礼しました
@user-hl9uv6cv7k
Жыл бұрын
ご視聴ありがとうございます。 どうぞご利用くださいませ🙇
お体の方は大丈夫でしょうか。 いつも勉強させていただいております。 一つ質問させてください。 にidをつけられてましたが、idをつけずにのままでcssを当てていっても同じように出来るのですが、 あえてidをつける理由を教えていただけますでしょうか。よろしくお願いいたします。
@user-hl9uv6cv7k
Жыл бұрын
headerのままcssを付けても構いません! idをつけたのは、セクションごとにidで統一したかったからです。あとは詳細度の問題もありますが あまり気にしなくても大丈夫だとは思います。
@user-qd7yl7fe4t
Жыл бұрын
Idよりclass名でcssを当てたほうがオススメです!詳しくはBEMとかで調べてみてください
画面サイズを小さくしても文字が小さくならない。。
コメント失礼します。 githubのURLを概要欄に貼るとおっしゃってましたが、どこにありますでしょうか!
@user-hl9uv6cv7k
Жыл бұрын
追加いたします。
@user-hl9uv6cv7k
Жыл бұрын
概要欄の方に記載しておりますので、ご確認おねがいします。