HTMLやCSSの勉強を始めたばかりの頃、
「marginとpaddingって何が違うの？」
「コードを書いたのに反映されない…」
と悩んだことはありませんか？
私自身、HTMLやCSSがまったく分からない状態からWeb制作の勉強を始めました。
勉強を始めたばかりの頃は、分からないことばかりで、何度もつまずきました。
その中でも、特に苦戦したのがこの2つです。
- marginとpaddingの違い
- コードを書いたのに思ったように反映されないこと
今回は、HTML・CSS初心者だった私が実際につまずいたポイントと、その中で感じたことを紹介します。
今、HTMLやCSSを勉強していて、
「自分だけできないのかな？」
「なんで思った通りに表示されないんだろう？」
と悩んでいる方の参考になれば嬉しいです。
そもそもHTMLとCSSって何をするもの？
HTMLやCSSを勉強し始めたばかりの方は、まずそれぞれの役割を理解しておくと、これから学習を進めやすくなります。
HTMLは、Webページの構造や内容を作るものです。
例えば、
- 見出し
- 文章
- 画像
- リンク
などをWebページに配置します。
一方、CSSはWebページの見た目を整えるものです。
例えば、
- 文字の色
- 文字の大きさ
- 背景色
- 余白
- 配置
などを指定できます。
HTMLとCSSの違いをまだよく理解できていない方は、先に基本を知っておくとこれからの学習が分かりやすくなります
▶ 関連記事：HTMLとは？初心者向けにざっくり解説
▶ 関連記事：HTMLとCSSの違いって？初心者向けにざっくり解説
HTML・CSS初心者の私が実際につまずいた2つのこと
HTMLやCSSを勉強していると、分からないことが次々と出てきます。
私も最初は、
「何から覚えればいいの？」
「これで合っているのかな？」
と不安になることがたくさんありました。
その中でも、特に私がつまずいたのは、
- marginとpaddingの違い
- コードを書いたのに反映されないこと
です。
ここからは、私が実際に経験したことを紹介します。
一番つまずいたのはmarginとpadding
HTML・CSSを勉強していると、marginとpaddingの違いで混乱する方も多いのではないでしょうか。
私も最初は、
「marginとpaddingって何が違うの？」
「外側？内側？どっちだっけ？」
と何度も混乱しました。
参考書や動画を見ると、marginとpaddingは図を使って分かりやすく説明されています。
そのときは、
「なるほど！分かった！」
と思うんです。
でも、いざ自分でコードを書こうとすると、
「え？なんだっけ？」
となってしまうことが何度もありました。
marginとpaddingは実際に自分でコードを書いてみるのがおすすめ
私が感じたのは、動画や参考書を見るだけではなく、実際に自分でコードを書いてみることが大切だということです。
marginとpaddingは、言葉だけで覚えようとすると混乱しやすいかもしれません。
でも、自分でコードを書いて、
コードを書く → 保存する → 画面を見る
という作業をしてみると、
「marginを使うとここに余白ができるんだ！」
「paddingだとこっちに余白ができるんだ！」
と、実際の変化を見ながら理解できます。
私は「覚えなきゃ！」と思うよりも、実際に何度もコードを書いて確認する方が理解しやすかったです
最初は何度忘れても大丈夫です。
私も、
「分かった！」
と思った次の日には、
「え？どっちだっけ？」
となることがありました（笑）。
でも、実際に何度も使っていくうちに、少しずつ理解できるようになってきました。
marginとpaddingを詳しく知りたい方はこちら
marginとpaddingについては、別の記事で初心者向けに詳しく解説しています。
「まだ違いがよく分からない…」
という方は、こちらの記事も参考にしてみてください。
▶ 関連記事：marginとpaddingの違いとは？初心者向けにわかりやすく解説
ノーコードツールを使って目で見ながら確認するのもおすすめ
marginやpaddingを理解するためには、実際に画面の変化を見ることもおすすめです。
コードを書く勉強だけではなく、ノーコードツールを使ってホームページを作ってみるのも、理解につながるかもしれません。
例えば、STUDIOのようなノーコードツールでは、余白を変更すると画面上で変化を確認しながら作業できます。
そのため、
「この余白を変えると、ここが変わるんだ」
と、目で見ながら確認できます。
実際に簡単なホームページを作りながら、
- 余白を広げる
- 余白を狭くする
- 要素同士の間隔を変える
などを試してみると、marginやpaddingのイメージがつかみやすくなるかもしれません。
コードだけで理解しようとしなくても大丈夫！
実際に画面がどう変わるのかを見ると、イメージがつかみやすくなります
コードを書いたのに反映されない！どこが間違っているのか分からない
もうひとつ、私がとてもつまずいたのが、
コードを書いたのに思ったように反映されないこと
です。
HTMLやCSSを書いていると、最初は少しずつコードを書いて確認しますよね。
でも、一度うまく反映されるようになると、コードを書くことがどんどん楽しくなってきます。
私も、
「これも追加してみよう！」
「次はここも変えてみよう！」
と、どんどんコードを書き進めてしまいました。
コードを書いたものが画面に反映されると、本当に楽しいんですよね。
でも、ここで私がつまずきました。
コードをどんどん書くと、どこを間違えたのか分からなくなる
コードを書くことが楽しくなってくると、
「これも書いてみよう」
「次はこれも追加してみよう」
と、どんどん先に進みたくなります。
私もまさにそうでした。
でも、確認せずにどんどんコードを書いていると、途中で思ったように表示されなくなったとき、
「どこが間違っているんだろう？」
となります。
少しずつ確認していれば、
「さっき書いたコードが原因かも」
と考えやすいです。
でも、何個もコードを書いたあとだと、
- どこまでは合っていたのか
- どこから間違ったのか
- スペルミスがあるのか
- タグを閉じ忘れているのか
- CSSの指定が間違っているのか
など、確認する場所が一気に増えてしまいます。
これが本当に大変でした。
コードを書くのは楽しい！
でも、確認せずにどんどん進めると、エラーが出たときの方が何倍も大変でした…！
コードは一つ書いたら必ず確認する
この経験から、私が大切だと感じたのが、
コードを一つ書いたら、必ず確認すること
です。
正直、
「いちいち確認するのはめんどくさい」
と思うこともあります。
でも、何個もコードを書いたあとでエラーを探す方が何倍も大変です。
これは実際に経験した私が言うので間違いないです（笑）。
私がおすすめする流れは、
コードを書く → 保存する → ブラウザで確認する
です。
一つコードを書いたら確認する。
また一つコードを書いたら確認する。
この作業を繰り返すことで、もし表示がおかしくなっても原因を探しやすくなります。
「さっきまではちゃんと表示されていたから、原因は今書いたコードかもしれない」
と、確認する範囲をかなり絞ることができます。
めんどくさい確認作業が、結果的には一番の近道でした
どうしてもエラーが分からないときはAIに聞いてみるのもおすすめ
一つずつ確認しても、どうしてもエラーの原因が分からないこともあります。
そんなときは、AIに聞いてみるのもおすすめです。
もちろん、自分でエラーの原因を考えることも大切です。
でも、何時間もかけてエラーを探し続けることが、いつも一番良い方法とは限らないと私は思います。
特に、
- 子育てをしながら勉強している方
- 仕事をしながら勉強している方
- 家事の合間に勉強している方
は、勉強できる時間が限られていることも多いですよね。
せっかく時間を作って勉強しているのに、何時間もエラーを探して終わってしまうと、
「もう分からない…」
「なんでできないんだろう…」
と、どんどん疲れてしまいます。
私自身も、エラーが分からなくなると、
「もう分からないから全部消してしまえ！」
と思ってしまったことがあります（笑）。
イライラして「もうやりたくない」と思うくらいならAIを活用しよう
どうしてもエラーが分からないときは、AIにコードを見てもらうのもひとつの方法です。
AIにコードを見てもらうことで、
- どこが間違っているのか
- なぜエラーが起きているのか
- どう修正すればいいのか
を教えてもらえます。
もちろん、AIが出した答えをそのまま使うだけではなく、
「なぜここが間違っていたのか」
まで確認することも大切です。
その理由まで理解することで、次に同じようなエラーが出たときの学習にもつながります。
何時間も一人で悩んで「もうHTML・CSSなんてやりたくない！」となるくらいなら、AIに聞いて解決し、次に進むのも立派な学習方法だと思います
AIを使うことは、ずるをすることではありません。
限られた時間の中で学習を続けるために、使えるものを上手に活用することも大切だと思います。
特に子育てや仕事などで忙しい方は、一人で抱え込みすぎず、AIの力を借りながら学習を続けるのもおすすめです。
めんどくさい確認作業が、結果的に一番の近道だった
HTML・CSSを勉強していると、早く先に進みたくなることがあります。
私も、コードを書くのが楽しくなってくると、どんどん先に進みたくなりました。
でも、確認せずに進んでエラーが起きると、結局かなり時間がかかってしまいます。
一つずつ確認しながら進める方が遠回りに見えるかもしれません。
でも、実際にはその方が原因を見つけやすく、結果的に時間の短縮にもなります。
初心者のうちは特に、
コードを書く → 保存する → 表示を確認する
この流れを習慣にするのがおすすめです。
そして、どうしても原因が分からないときは、一人で何時間も悩み続けず、AIを活用するのもひとつの方法です。
まとめ｜HTML・CSSはつまずきながら少しずつ理解していけば大丈夫
HTML・CSSの勉強を始めたばかりの頃は、分からないことがたくさんあります。
私自身も、
- marginとpaddingの違いが分からない
- コードを書いたのに反映されない
- エラーの原因が分からない
など、何度もつまずきました。
今回の記事で一番伝えたいのは、
分からないことがあっても、つまずくのは自分だけではない
ということです。
marginとpaddingは、実際にコードを書いて画面の変化を確認してみる。
コードを書くときは、一度にたくさん進めず、一つ書いたら確認する。
そして、どうしてもエラーが分からないときは、AIの力を借りる。
このように、自分に合った方法を使いながら少しずつ学習を続けていけば大丈夫です。
私自身も、今でも、
「え？なんだっけ？」
となりながら勉強しています（笑）。
最初からすべてを理解できなくても大丈夫。
つまずくことも、実際にコードを書いて試していくことで、少しずつ理解につながっていくと思います。
これからHTML・CSSを勉強する方も、一緒に少しずつ頑張っていきましょう
コメント