【html/css】むずかしいと感じたら基礎に戻ろう

html/cssってむずかしすぎる…

学習しはじめの頃って、いたる所でつまづきますよね。

エラーが起きてはそのたびに足止めされ、勉強しても身についてる気がしない。

こうなると、自分には向いてないのかも…

と、考えてしまうのも無理はありません。

そんな人へ向けて、html/cssが分かるようになるための学習方法についてまとめてみました。

思うように学習が進まない人はご覧ください。

html/cssがむずかしく感じる理由

css指定がうまくいない時、原因が推測できないから

css指定が上手くいかない時、何が原因なのか見当がつかない。

これがhtml/cssがむずかしいと感じる理由です。

一般的にはエラーが起きたら、はじめはプロパティや値の選択ミスを考えるはずです。

ですが、ここでその選択が大きく間違うことはそうありません。

• 文字色はcolorを指定
• 幅を決めたい時はwidthを指定
• 写真を3つ横に並べるならdisplayでinline-blockやflexを使う

大まかには分かると思うんです。

こうしたい時は、このプロパティや値を使おうというのが。

仮に分からなくてもググれば、どのプロパティを使うのかは見つけれると思います。

css指定がうまくいかない原因は、基礎に関係している

問題はここからで、使うプロパティは合っているはずなのにうまくいかない場合です。

• text-align: centerで画像が真ん中にならない
• position: absoluteで要素が思いもしないところに行ってしまう

そして、ここでプロパティや値にしか目が行かないなら問題は解決できません。

なぜなら、解決できない原因がcssではなく、基礎的な知識が関係している場合もあるから。

では、html/cssの基礎とは何かを次で解説します。

【参考記事】
img画像を真ん中にできる条件とは？
positionの使い方｜要素を見失わないために

html/cssの基礎とは

html/cssにおける基礎は、以下のような知識です。

htmlの基礎

• タグと要素の違いが分かる
• 親子・子孫関係を理解してコードを書ける
• コードを見た時、ある要素の親子・子孫関係が分かる

cssの基礎

• css指定の正しい書き方ができる
• ボックスモデルを理解している
• ブロック要素・インライン要素の違いが分かる
• パディング・マージンの違いが分かる

上記の知識はhtml/cssの土台です。

cssのプロパティや値よりも優先して覚えるべきものになります。

そして、この基礎が初心者の人は定着していません。

だからエラーが起きても原因を予測できないのです。

初心者はhtml/cssの基礎が定着していない

初心者の人に基礎が定着しない理由は、ほかの知識も基礎と同じくらいたいせつに見えるから。

だから、まんべんなく覚えようとしてしまう。

その結果、基礎知識の定着が不十分になります。

しかもhtml/cssの基礎ははじめに学習するのがほとんど。

本や教材で言うと、序盤に書かれています。

ですので、html/cssの勉強に慣れておらず頭に残りにくいのです。

事実、スクールの受講生にボックスモデルやブロック・インラインについて尋ねても、

「覚えてません」

と返ってきていました。

教材を見返して、ようやく思い出すくらいの感じです。

「そう言えば、動画で講師の人が言ってたなあ」って。

でも、これがふつうなんだと思います。

なので、基礎が固まっていないのは教材やあなたが悪いわけではありません。

学習する時に、どうしても陥おちいりがちな問題なんです。

html/cssがむずかしく感じる時の勉強方法

基礎に戻る

html/cssがむずかしいと思ったら基礎に戻りましょう。

基礎が固まったら、エラーが起きる原因も予測できます。

ほとんどの人が1回は本や教材に目を通していると思います。

ですので、2回目だと読んだ内容がしっくり来るはずです。

点と点がつながる感じで。

あなたもありませんか？

読み返した本が、「分かる」と感じながらページをめくった経験が。

これと同じで、基礎も2度3度と学べば、その意味もより分かるはずです。

だから、基礎の振り返りは有効だし確実性があります。

html/cssの基礎は、本のはじめに書かれている

html/cssの基礎は、本や教材のはじめに書かれています。

なので、見直すのは前半だけでオッケー。

動画講義の場合だと序盤のパートだけを見返しましょう。

ちなみに、本や教材の後半は発展・応用です。

cssで言うと、プロパティと値を決めるのが応用になります。

ですので、本や教材のさいしょの方を復習してみてください。

そうすれば基礎が固まるはずです。

まとめ

この記事の内容をまとめました。

html/cssがむずかしいと感じたら、1歩2歩下がるつもりで基礎に戻りましょう。

基礎を学び直すほど、今書いているコードや指定の理解が深まります。

html/cssの基礎に関する記事は、こちらのカテゴリページからご覧ください。