見出し画像

【html/css】学習の道しるべ、上達のための5つのポイント

hobohobo

対象読者

  • css指定が少しできる初心者の方

この記事では、html/cssが上達するための5つの学習ポイントについて紹介します。

勉強することが多いhtml/cssですが、上達にはポイントがあります。

そのポイントを押さえて、学習しましょう。

そうすれば、このポイントを意識しない時に比べて、倍以上の速さで上達できるはずです。


html/cssが上達した状態とは

あなたが考えるhtml/cssが上達した状態とは、

  • 自分でコードを書ける

  • かかる時間を減らしてサイトデザインを完成させる

だと思います。

実際、自分でコーディングでき、かかる時間を短縮させられると実力も上がるはず。

そこで、この状態を目指すために学習のポイントを紹介します。

html/cssが上達するための5つのポイント

html/cssが上達するための学習ポイントは5つ。

以下の順番で学習していきましょう。

  1. 自分でコードを書ききる

  2. 自分で見て分かりやすいコードを書く

  3. レスポンシブを意識して書く

  4. コード量を減らす

  5. 他人が見て分かりやすいコードを書く

1は「自分でコードを書ける」に。

2〜4は「かかる時間を減らしてサイトデザインを完成させる」に相当します。

5は補足で、仕事をする時に必要な上達の視点です。

①自分でコードを書ききる

自力でコードを書ききるのが、はじめのポイント。

指定が上手くいかない時は検証画面を確認。

どのプロパティを使えばいいか分からない時はググる。

そうやって、失敗を繰り返しながら完成に近づけましょう。

  • css指定する → 上手くいかない → 検証画面を確認 → css指定をし直す

  • プロパティをググる → css指定する → 上手くいかない → ググり直す → css指定をし直す

人によっては、この段階で解決までの時間に差が出ます。

しかし、たくさん時間がかかってもオッケー。

なぜなら、問題を自分で解決する力こそがサイト制作には必要だから。

ここは何よりだいじなところです。

なので、試行錯誤をやり抜きましょう。

【参考記事】
chrome 検証 〜初心者でも、安心して使いこなせる〜
どんな言葉でたどり着きますか？ 〜検索する力〜

②自分で見て分かりやすいコードを書く

自分でデザインを完成させられたら、次はコードの見やすさを意識します。

見やすさとは、自分で見返してコードの中身が把握しやすいかどうか。

  • htmlならパッと見ただけで親子関係が分かる。

  • cssならヘッダーやセクションなど、どの部分の指定をしているのかすぐに分かる。

コード量が多いと、それだけで分かりにくなります。

ですので、html・cssともにコメントを自分用に残す。

またはhtmlならインデントをつけて親子関係をはっきりさせる。

<div>
  <p>テスト</p>
</div>

cssなら指定と指定の間に空白の改行を入れるなどして見やすさを確保。

div {
  margin-bottom: 30px;
}
 /* 空白 */                                                     
p {
  font-size: 24px;
  background-color: #ffffff;
}

※上記コードでは、divとpの指定に間に1行の余白を入れている。

見やすさがアップすると、コードを書き足していく時も素早くとりかかれます。

実際に時間も短縮でき、ミスも減らせます。

【参考記事】
【html】コメントアウトの活用法
【html】レイアウト構造の見方を知る｜視点のポイント

③レスポンシブを意識して書く

自力で見やすくコードを書けるようになったら、レスポンシブを意識しましょう。

慣れないうちはパソコン用のデザインをとりあえず完成させようと思うはずです。

スマホ用はあとで考えたらいいと。

ただ、これだとコードの書き直しが多くなります。

ですので、パソコン用を書き始める前にスマホ用のデザインも確認しておきましょう。

ポイントは、ヘッダー・メインのセクション部分、フッターと大まかなエリアで見ていくことです。

セクション部分のどこが、パソコン用とスマホ用で違うのか。

ここに10分、20分くらい時間をかけましょう。

すると、パソコン用のコードを書きつつスマホ用のもイメージが湧き、両方のデザインを成立させる指定ができるようになります。

すべてを計算してコードを書くのはむずかしいです。

しかし、先を見通してから書いた方が、かかる時間も少なくて済みます。

【参考記事】サイトデザインを2時間早く完成させるために

④コード量を減らす

レスポンシブを意識して書けるようになったら、コード量を減らせないか考えてみてください。

コード量が少なければ、全体を把握できているのが体感的に分かるようになります。

はじめは、cssから見直しましょう。

指定が被っているところがあれば、コメントアウトして、影響がなさそうなら削除します。

慣れたら、htmlのコードを減らせないか検討してみてください。

htmlタグやそれに付けるclassが増えれば、結果的にcssのコード量も増えやすいので。

このように、1つでもタグや指定を減らす意識でやると、少ないコード量で書けるようになります。

⑤他人が見て分かりやすいコードを書く

さいごは他人から見て分かりやすいコードになるよう意識しましょう。

html/cssが上達した状態からはやや逸それるよう感じると思いますが、必要なことです。

なぜなら会社に入ると、サイト制作を複数人でやる機会が多いから。

何人かで制作していると、他の人が自分のコードを読むことがあるし、逆の場合もあります。

ですので、ほかの人が自分のコードを見た時、分かりやすいように書きましょう。

具体的には②のコメントアウトを活用し、さらにそのコメントを他人視点で書く。

ただし、これは仕事をはじめてからでオッケーです。

頭の片隅にだけ入れておいていただければと思います。

まとめ

5つのポイントを押さえれたら、コーディング力は確実に上がります。

ですので、1つずつ実践しならがステップアップしていってください。

それでは、今回は以上となります。

いいなと思ったら応援しよう！