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

Подписаться 43 тыс.

Просмотров 64 тыс.

50% 1

#入門 #html #css #プログラミング #web制作 #website #エンジニア #独学 #コーディング #レスポンシブ
CodeStep公式はこちら。
code-step.com/
【さらに詳しく学びたい方へ。Udemy90%割引クーポン発行中🚀】
↓↓↓↓↓
shincode.info/2...
＼ShinCode_Camp開校しました／
プログラミング講座＆副業・起業＆就職・転職が学べるプラットフォーム🚀
🎁月額2500円で全講座が見放題
🎁分からない箇所は質問し放題
🎁7日間無料キャンペーン実施中
🎁コミュニティ機能付き
🎁いつでも解約可能etc...
↓↓↓↓↓
code-s-school-...
-----------------------------------------------------------------------------------------------------------------------------
【この動画を視聴するメリット】
・HTML/CSSの基礎が理解できる
・レスポンシブ対応のWebサイトが構築できる
・メディアクエリについて理解が深まる
・flexboxについて学べる
【信頼性】
・Udemy講師
・講師レビュー評価94.6%
・Udemy受講生延べ3000人突破
・Webアプリ/サイト開発数：200以上
・生きがい：プログラミングでサイトやアプリを作ること
-----------------------------------------------------------------------------------------------------------------------------
★チャンネル登録はこちらから★
/ @programming_tutorial_...
★今回のソースコード★
github.com/Shi...
★運営者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
※アフィリエイトリンクになります。

Опубликовано:

5 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 82

@Anzywork 3 месяца назад

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

@かえる-v7l Год назад

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

@H2Office_hiro 9 месяцев назад

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

@おなかすいた-i2c Год назад

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

@programming_tutorial_youtube Год назад

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

@formkokolo7001 Год назад

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

@ricoco57 8 месяцев назад

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

@programming_tutorial_youtube 8 месяцев назад

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

@白藤晴輝 Год назад

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

@トカゲちゃん-h5x Год назад

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

@nagai_net Год назад

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

@shohirano-gc4do Год назад

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

@programming_tutorial_youtube Год назад

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

@kamikaze37136 11 месяцев назад

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

@エーミール-d3x 9 месяцев назад

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

@user-ep7bq3zb6y 3 месяца назад

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

@GG92KZ Год назад

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

@hikkymama 11 месяцев назад

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

@programming_tutorial_youtube 11 месяцев назад

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

@mlabosalontv3178 Год назад

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

@nagai_net Год назад

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

@user-xj8uz4qd5f Год назад

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

@komakoma Год назад

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

@programming_tutorial_youtube Год назад

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

@Kk-fq3nd Год назад

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

@y.i157 Год назад

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

@世界の覇者3-x7i Год назад

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

@karisutonn Год назад

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

@カキモリマサナリ Год назад

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

@ktml_o.O 5 месяцев назад

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

@トムリドル-h9x Год назад

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

@tako29378 5 месяцев назад

最高すぎます。

@だいどん-x3h 9 месяцев назад

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

@user-ne9ke1ew8x Год назад

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

@hwialh5914 Год назад

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

@マリーさんもひつじ 10 месяцев назад

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

@暁燕陳 Год назад

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

@suragi2196 Год назад

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

@DeCoperi Год назад

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

@ShikiHachi2023 3 месяца назад

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

@尾崎百合香 Год назад

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

@akha8091 Год назад

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

@GG92KZ Год назад

ありがとうございます！

@programming_tutorial_youtube Год назад

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

@yu-ma4765 Год назад

10:18 大事そうなところ

@tinytale7902 Год назад

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

@DNA4570 Год назад

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

@programming_tutorial_youtube Год назад

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

@エルサンスイ Год назад

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

@コーチゃまコーチゃま Год назад

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

@switchtoanotherone Год назад

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

@programming_tutorial_youtube Год назад

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

@switchtoanotherone Год назад

@@programming_tutorial_youtube 15:26 あたりです。

@エルブランコの小鳥 Год назад

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

@FR030523 Год назад

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

@オラオラ-s6i Год назад

29:00

@porike47 Год назад

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

@programming_tutorial_youtube Год назад

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

@ちゃゆう-f1r Год назад

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

@kuma_noko365 Год назад

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

@programming_tutorial_youtube Год назад

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

@kuma_noko365 Год назад

@@programming_tutorial_youtube 分かりました！試してみます

@あああ-o7e Год назад

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

@programming_tutorial_youtube Год назад

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

@あああ-o7e Год назад

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

@愁-l6v Год назад

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

@programming_tutorial_youtube Год назад

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

@ちゃゆう-f1r Год назад

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

@harutotsumutsumu Год назад

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

@programming_tutorial_youtube Год назад

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

@塚本豊-w5q Год назад

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

@programming_tutorial_youtube Год назад

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