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

#入門 #HTML #CSS #HTML5 #CSS3 #模写コーディング

💻今回のブログ風ウェブサイトのデモ：https://2colum-website.vercel.app/

【さらに詳しく学びたい方へ。Udemy90%割引クーポン発行中🚀】
↓↓↓↓↓
http://shincode.info/2021/12/31/udemy...

＼ShinCode_Camp開校しました／
プログラミング講座＆副業・起業＆就職・転職が学べるプラットフォーム🚀
🎁月額2500円で全講座が見放題
🎁分からない箇所は質問し放題
🎁7日間無料キャンペーン実施中
🎁コミュニティ機能付き
🎁いつでも解約可能etc...
↓↓↓↓↓
https://code-s-school-5bc2.thinkific....

♥今回のソースコード：https://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 赤軸)：https://amzn.to/3F4zca5
マウス(Logicool G ロジクール G ゲーミングマウス)：https://amzn.to/3DZaaYB
マイク(サンワダイレクト USBマイク PCマイク)：https://amzn.to/30AVwJF
マイクスタンド(Luling Arts マイクスタンド マイクアーム スタンド)：
https://amzn.to/3se5onZ
※アフィリエイトリンクになります。
*--------------------------------------------------------------------*