現在、HTMCとCSSの本を読んで勉強しています。
読んでいる本はHTML&CSSとWebデザイン 入門講座をいう本です。
理解するのにまだまだ時間がかかりそうです。
今日はChatGPTに学習について相談しました。
ChatGPTからのアドバイスはこちら✨
HTMLとCSSを最短で学ぶためには、「基礎を押さえて、すぐに手を動かす」ことが最も効率的です。以下のステップで進めれば、初心者でも1〜2週間で基本的なWebページが作れるようになります。
✅ ステップ1:学習の全体像をつかむ(1日)
- HTMLとは何か、CSSとは何かをざっくり理解
- HTML:Webページの「骨組み」
- CSS:その骨組みに「デザイン」を加えるもの
- 【おすすめ動画・資料】
- YouTubeで「HTML CSS 入門」と検索して10分〜30分の解説動画を視聴
- MDN Web Docs(日本語対応)
https://developer.mozilla.org/ja/docs/Web
✅ ステップ2:基本構文を覚える(2〜3日)
💡 HTMLで覚えるタグ
<html>,<head>,<body><h1>〜<h6>:見出し<p>:段落<a href="">:リンク<img src="">:画像<ul>,<ol>,<li>:リスト<div>,<span>:汎用ボックス
💡 CSSで覚えるプロパティ
color,font-size,background-colorwidth,height,margin,paddingborder,text-align,display,flex
📌Progate(無料の範囲でOK)やドットインストールを使うと、手を動かしながら習得できます。
✅ ステップ3:実際にページを作ってみる(3〜5日)
🔨 作るとよい例
- 自己紹介ページ
- 好きな食べ物ランキングページ
- 架空のお店(カフェ・花屋)の紹介ページ
👉 Visual Studio Code を使って、HTMLとCSSファイルを保存・編集し、ブラウザで表示確認。
✅ ステップ4:レスポンシブとGoogle Fontsなどの装飾(2〜3日)
- スマホでも見やすくなる
@mediaクエリの使い方 Google Fontsの読み込み方flexboxレイアウトの導入
✅ ステップ5:ポートフォリオサイトをつくって完成(1日〜)
- 今までの練習ページをまとめた「作品集ページ」を作ってみる
- GitHub Pagesで公開することで、就職活動や実績にも使えます
🔁 補足:1日30分でも毎日続ける
とても参考になるアドバイスでした。
毎日Visual Studio Codeを動かしている勉強している所です。
ChatGPTは絵も描いてくれます。
勉強している絵を描いてもらいました✨

AIで作成した画像です✨

