HTMLとCSSでブログ風ウェブサイトを模写コーディングしてみよう ~レスポンシブ対応~

Рет қаралды 12,808

2 жыл бұрын

#入門 #HTML #CSS #HTML5 #CSS3 #模写コーディング
💻今回のブログ風ウェブサイトのデモ：2colum-website.vercel.app/
【さらに詳しく学びたい方へ。Udemy90%割引クーポン発行中🚀】
↓↓↓↓↓
shincode.info/2021/12/31/udemy...
＼ShinCode_Camp開校しました／
プログラミング講座＆副業・起業＆就職・転職が学べるプラットフォーム🚀
🎁月額2500円で全講座が見放題
🎁分からない箇所は質問し放題
🎁7日間無料キャンペーン実施中
🎁コミュニティ機能付き
🎁いつでも解約可能etc...
↓↓↓↓↓
code-s-school-5bc2.thinkific....
♥今回のソースコード：github.com/Shin-sibainu/2colu...
*--------------------------------------------------------------------*
HTMLとCSSだけを使ってブログ風にウェブサイトを作りました。HTMLの構造は模写コーディングをすればするほど、予測して書くことができるようになるはずです。
またarticleタグやasideタグを使い分ければセマンティックHTMLと言って、SEO対策にもなるので、ここで覚えておくといいかもしれません。
2-カラムなのでflexを使えばOK。
メディアクエリでレスポンシブ対応には@mediaを利用しましょう。今回のブレイクポイントは768pxに設定しました。
ちなみにCSSフレームワークを利用すればもっと簡単にレスポンシブに対応できます。Bootstrap5が有名どころです。
この動画が良いと思ったらチャンネル登録よろしくお願いします。
バグや分からないことがあればコメント欄、またはDMでご質問ください。
*--------------------------------------------------------------------*
♥運営者のTwitter： / shin_engineer
*--------------------------------------------------------------------*
使用している機材：
キーボード(Keychron K6 赤軸)：amzn.to/3F4zca5
マウス(Logicool G ロジクール G ゲーミングマウス)：amzn.to/3DZaaYB
マイク(サンワダイレクト USBマイク PCマイク)：amzn.to/30AVwJF
マイクスタンド(Luling Arts マイクスタンドマイクアームスタンド)：
amzn.to/3se5onZ
※アフィリエイトリンクになります。
*--------------------------------------------------------------------*

Пікірлер: 24

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

概要欄にソースコードを記入していただくなど、本当にとってもわかりやすかったです。ありがとうございました！

@user-dy6sx3tf6v 2 жыл бұрын

いろんなプログラマーユーチューバーの中で一番分かりやすいです！！

@user-hl9uv6cv7k 2 жыл бұрын

ありがとうございます🙇

@ricoco57 4 ай бұрын

初心者の私のレベルにちょうど良く、ほんとうにわかりやすいです。shin さんのチュートリアルたくさんあるのでやりがいがあります。😊

@hikkymama 8 ай бұрын

基本的な模写コーディング作成とわかりやすい説明をありがとうございました！HTML/CSSは10年以上前に習ったことがあるのですが、それっきりだったので、今回勉強しなおしています。シンプルだけど基本がたくさん詰まったサイトを実践しながら練習出来てとても役に立ちました！

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

無駄な部分がなく、必要なことをテンポ良く進めていて、私のレベルでも理解しやすく、一番求めていた動画です。ありがとうございます。チャネル登録して、今後も参考にして、勉強させていただきます。

@Yu-jo3ik Жыл бұрын

全体の流れがよく分かる動画でした。これからも参考にさせていただきます。有意義な動画をありがとうございました。

@flowerhappy3297 Жыл бұрын

すごくわかりやすかったです。ありがとうございました。

@senzurijapan 8 ай бұрын

最高の動画ありがとうございます😂 同じような動画の投稿お待ちしてます

@user-hx5lg8cd1m 10 ай бұрын

とっても分かりやすい動画をありがとうございます！初心者独学の私でもスムーズに理解することができました。フッターもこの後自分で作ってみることにします！

@Ha4lan 9 ай бұрын

大元の要素にdisplay: flexを指定してmainのほうでflex:66.6、asideの方でflex:33.3っていう考えはありませんでした。すごく参考になります。

@user-hj6ub1nr9p 2 жыл бұрын

シン先生こんにちは。動画頂き、ありがとうございます。シン先生の動画講座はバラバラになっています。 Tutorial Seriesを作成したほうがいいかもしれません例：月：HTML/CSS Tutorial Series 火：Python program Tutorial Series 水：JavaScrip Tutorial Series そうすると、わかりやすいですね。ご検討宜しくお願い致します。

@user-hl9uv6cv7k 2 жыл бұрын

そうですね。動画内容・ジャンルは不規則でアップロードしています。確かにそういった感じで固定にできるのが理想ですが、如何せん動画のネタをそのシリーズ毎に用意するのが大変でして、、、個人的に出したいプログラム動画を不規則で出すというスタイルは変わらないかなと思います（そっちの方が継続できるかなと）。ご提案ありがとうございますm(__)m

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

とても分かりやすいと思います。細かいところまで有難うございます。もしよければ、CSSでなぜ(.)をつけないのか、header nav ul li と header ul liとの違いは何なのでしょうか。どしろーとで申し訳ないのですが、時間があれば教えて頂きたいと思います。また動画、楽しみにしています。

@user-hl9uv6cv7k 11 ай бұрын

header nav ul li と header ul liとの違いは何なのかですね。別にnavタグはつけなくてもサイトは作れます。なぜnavタグをつけるのかというと「ここのセクションはナビゲーションバーですよ」とGoogle先生に教えるためですね。SEO対策になったりするので、明示的につけて上げると良いですね。セマンティックタグと検索すると出てくると思います。