HTMLとCSSでブログ風ウェブサイトを模写コーディングしてみよう ~レスポンシブ対応~
HTML-код
- Опубликовано: 16 янв 2022
- #入門 #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
※アフィリエイトリンクになります。
*--------------------------------------------------------------------*
![NoCap - Maliboo [Official Music Video]](http://i.ytimg.com/vi/FUV7E0QyniU/mqdefault.jpg)
概要欄にソースコードを記入していただくなど、本当にとってもわかりやすかったです。ありがとうございました！
いろんなプログラマーユーチューバーの中で一番分かりやすいです！！
ありがとうございます🙇
無駄な部分がなく、必要なことをテンポ良く進めていて、私のレベルでも理解しやすく、一番求めていた動画です。
ありがとうございます。
チャネル登録して、今後も参考にして、勉強させていただきます。
基本的な模写コーディング作成とわかりやすい説明をありがとうございました！HTML/CSSは10年以上前に習ったことがあるのですが、それっきりだったので、今回勉強しなおしています。シンプルだけど基本がたくさん詰まったサイトを実践しながら練習出来てとても役に立ちました！
初心者の私のレベルにちょうど良く、ほんとうにわかりやすいです。shin さんのチュートリアルたくさんあるのでやりがいがあります。😊
とっても分かりやすい動画をありがとうございます！初心者独学の私でもスムーズに理解することができました。
フッターもこの後自分で作ってみることにします！
全体の流れがよく分かる動画でした。これからも参考にさせていただきます。有意義な動画をありがとうございました。
最高の動画ありがとうございます😂
同じような動画の投稿お待ちしてます
すごくわかりやすかったです。ありがとうございました。
大元の要素にdisplay: flexを指定してmainのほうでflex:66.6、asideの方でflex:33.3っていう考えはありませんでした。すごく参考になります。
シン先生
こんにちは。
動画頂き、ありがとうございます。
シン先生の動画講座はバラバラになっています。
Tutorial Seriesを作成したほうがいいかもしれません
例：
月：HTML/CSS Tutorial Series
火：Python program Tutorial Series
水：JavaScrip Tutorial Series
そうすると、わかりやすいですね。
ご検討宜しくお願い致します。
そうですね。
動画内容・ジャンルは不規則でアップロードしています。
確かにそういった感じで固定にできるのが理想ですが、如何せん動画のネタをそのシリーズ毎に用意するのが大変でして、、、
個人的に出したいプログラム動画を不規則で出すというスタイルは変わらないかなと思います（そっちの方が継続できるかなと）。
ご提案ありがとうございますm(__)m
とても分かりやすいと思います。細かいところまで有難うございます。もしよければ、CSSでなぜ(.)をつけないのか、header nav ul li と header ul liとの違いは何なのでしょうか。どしろーとで申し訳ないのですが、時間があれば教えて頂きたいと思います。また動画、楽しみにしています。
header nav ul li と header ul liとの違いは何なのかですね。
別にnavタグはつけなくてもサイトは作れます。なぜnavタグをつけるのかというと
「ここのセクションはナビゲーションバーですよ」とGoogle先生に教えるためですね。SEO対策になったり
するので、明示的につけて上げると良いですね。セマンティックタグと検索すると出てくると思います。
参考になりました。
自分で作成したホームページでブログをネットに公開したいんですけど、この動画を参考にしたものを公開しても大丈夫ですかね？
もちろん見た目をまるパクリするわけじゃないですが、著作権的なものが気になったので
まるまるパクリでなければ大丈夫かと思われます。
自分で用意した写真を使ってみたのですが大きさもバラバラで階段状になってしまいます。
この場合どう対処すれば良いのでしょうか
cssでimgの大きさを固定にすればよいと思います。
widthやheightプロパティ等を使ってみてください。できない場合は画像サイズを統一すれば良いと思います。検索すればサービスが出てきます。
@@user-hl9uv6cv7k ありがとうございます！
どうやってデモ公開しているんですか？！
Vercelのnowというサービスを使って簡単にデプロイしてますね。
いつか紹介したいと思います
@@user-hl9uv6cv7k
ありがとうございます
netlifyもおすすめですよー@@python3343