【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

  • @kamikaze37136
    @kamikaze371369 ай бұрын

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

  • @user-vt7tc1bc9b
    @user-vt7tc1bc9bАй бұрын

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

  • @user-go4tn3tn3p
    @user-go4tn3tn3p Жыл бұрын

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

  • @user-nx4kt4zl8z
    @user-nx4kt4zl8z Жыл бұрын

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

  • @user-wo6oz4rm3w
    @user-wo6oz4rm3w Жыл бұрын

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

  • @user-ne9ke1ew8x
    @user-ne9ke1ew8x Жыл бұрын

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

  • @DeCoperi
    @DeCoperi Жыл бұрын

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

  • @user-xj8uz4qd5f
    @user-xj8uz4qd5f Жыл бұрын

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

  • @user-ic4nb2ck3h
    @user-ic4nb2ck3h Жыл бұрын

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

  • @H2Office_hiro
    @H2Office_hiro6 ай бұрын

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

  • @GG92KZ
    @GG92KZ Жыл бұрын

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

  • @user-ve5ct5rl2h
    @user-ve5ct5rl2h Жыл бұрын

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

  • @mlabosalontv3178
    @mlabosalontv3178 Жыл бұрын

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

  • @tako29378
    @tako293782 ай бұрын

    最高すぎます。

  • @user-ck5vr8jm6l
    @user-ck5vr8jm6l Жыл бұрын

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

  • @user-ni5tm7xw4v
    @user-ni5tm7xw4v7 ай бұрын

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

  • @user-vr1lc5wx1s
    @user-vr1lc5wx1s Жыл бұрын

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

  • @user-ep7bq3zb6y
    @user-ep7bq3zb6yАй бұрын

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

  • @formkokolo7001
    @formkokolo700111 ай бұрын

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

  • @y.i157
    @y.i15710 ай бұрын

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

  • @karisutonn
    @karisutonn Жыл бұрын

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

  • @ktml_o.O
    @ktml_o.O2 ай бұрын

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

  • @nagai_net
    @nagai_net Жыл бұрын

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

  • @Kk-fq3nd
    @Kk-fq3nd Жыл бұрын

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

  • @komakoma
    @komakoma Жыл бұрын

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

  • @user-hl9uv6cv7k

    @user-hl9uv6cv7k

    Жыл бұрын

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

  • @hwialh5914
    @hwialh5914 Жыл бұрын

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

  • @user-br9oz4yp8g
    @user-br9oz4yp8g Жыл бұрын

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

  • @ricoco57
    @ricoco575 ай бұрын

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

  • @user-hl9uv6cv7k

    @user-hl9uv6cv7k

    5 ай бұрын

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

  • @nagai_net
    @nagai_net Жыл бұрын

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

  • @ShikiHachi2023
    @ShikiHachi2023Ай бұрын

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

  • @user-pc7lk1sr8f
    @user-pc7lk1sr8f10 ай бұрын

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

  • @user-hl9uv6cv7k

    @user-hl9uv6cv7k

    10 ай бұрын

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

  • @GG92KZ
    @GG92KZ Жыл бұрын

    ありがとうございます!

  • @user-hl9uv6cv7k

    @user-hl9uv6cv7k

    Жыл бұрын

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

  • @hikkymama
    @hikkymama8 ай бұрын

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

  • @user-hl9uv6cv7k

    @user-hl9uv6cv7k

    8 ай бұрын

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

  • @user-mp7fu9vk8e
    @user-mp7fu9vk8e7 ай бұрын

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

  • @user-vw4dg6zj3g
    @user-vw4dg6zj3g8 ай бұрын

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

  • @shohirano-gc4do
    @shohirano-gc4do Жыл бұрын

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

  • @user-hl9uv6cv7k

    @user-hl9uv6cv7k

    Жыл бұрын

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

  • @suragi2196
    @suragi2196 Жыл бұрын

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

  • @akha8091
    @akha809110 ай бұрын

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

  • @tinytale7902
    @tinytale7902 Жыл бұрын

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

  • @yu-ma4765
    @yu-ma4765 Жыл бұрын

    10:18 大事そうなところ

  • @user-jz8dd1um9z
    @user-jz8dd1um9z Жыл бұрын

    29:00

  • @FR030523
    @FR030523 Жыл бұрын

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

  • @user-lu9io8iz2k
    @user-lu9io8iz2k Жыл бұрын

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

  • @user-le2sh4fg7m
    @user-le2sh4fg7m Жыл бұрын

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

  • @angel_crypto
    @angel_crypto Жыл бұрын

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

  • @user-wm4qh1ff3x
    @user-wm4qh1ff3x Жыл бұрын

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

  • @user-hl9uv6cv7k

    @user-hl9uv6cv7k

    Жыл бұрын

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

  • @user-wm4qh1ff3x

    @user-wm4qh1ff3x

    Жыл бұрын

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

  • @DNA4570
    @DNA4570 Жыл бұрын

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

  • @user-hl9uv6cv7k

    @user-hl9uv6cv7k

    Жыл бұрын

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

  • @user-bp3wq9gm2j

    @user-bp3wq9gm2j

    Жыл бұрын

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

  • @twj6643
    @twj6643 Жыл бұрын

    react hook form Please❤

  • @kuma_noko365
    @kuma_noko36511 ай бұрын

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

  • @user-hl9uv6cv7k

    @user-hl9uv6cv7k

    11 ай бұрын

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

  • @kuma_noko365

    @kuma_noko365

    11 ай бұрын

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

  • @switchtoanotherone
    @switchtoanotherone Жыл бұрын

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

  • @user-hl9uv6cv7k

    @user-hl9uv6cv7k

    Жыл бұрын

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

  • @switchtoanotherone

    @switchtoanotherone

    Жыл бұрын

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

  • @user-kf9fj6rf1w
    @user-kf9fj6rf1w Жыл бұрын

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

  • @user-hl9uv6cv7k

    @user-hl9uv6cv7k

    Жыл бұрын

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

  • @user-qd7yl7fe4t

    @user-qd7yl7fe4t

    Жыл бұрын

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

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

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

  • @user-hl9uv6cv7k

    @user-hl9uv6cv7k

    Жыл бұрын

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

  • @jack1999jp
    @jack1999jp Жыл бұрын

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

  • @user-qd7yl7fe4t

    @user-qd7yl7fe4t

    Жыл бұрын

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

  • @user-lk9pq9nn5c
    @user-lk9pq9nn5c8 ай бұрын

    34:57 56:11

  • @davi48596
    @davi48596Ай бұрын

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

  • @shampoo111ss
    @shampoo111ss Жыл бұрын

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

  • @user-hl9uv6cv7k

    @user-hl9uv6cv7k

    Жыл бұрын

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

  • @porike47
    @porike47 Жыл бұрын

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

  • @user-hl9uv6cv7k

    @user-hl9uv6cv7k

    Жыл бұрын

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

  • @user-qd7yl7fe4t

    @user-qd7yl7fe4t

    Жыл бұрын

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

  • @user-zy5zs2fn4h
    @user-zy5zs2fn4h Жыл бұрын

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

  • @pop-lk6ro
    @pop-lk6ro Жыл бұрын

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

  • @user-hl9uv6cv7k

    @user-hl9uv6cv7k

    Жыл бұрын

    追加いたします。

  • @user-hl9uv6cv7k

    @user-hl9uv6cv7k

    Жыл бұрын

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

Келесі