【htmlコーディング】コーディングが苦手・・解決策を分かりやすく解説！

今回は、コーディングが苦手な方に向けて、解決策を分かりやすく解説したいと思います。
僕も最初はコーディングが苦手で、全てdivタグで作ったりしていました。

コーディングが苦手とは？

「コーディングが苦手・・」「コーディングに向いてない・・」と、思う方も多いかと思いますが、最初はみんなそうです。

デザイン業務はイメージしやすく、最初から楽しさが分かるのですが、コーディングは文字ばっかりでさっぱり分からず、最初は楽しさが分からず、必ず行き詰まります。

なので、自分だけ「コーディングに向いてない」ということはないはずです。

解決策

結論を言ってしまうと、「数をこなす」になってしまうのですが、いくつかアドバイスできればと思います。

自分だけじゃない、みんなできない

お話しした通り、最初からコーディングができる人はいません。
みんな勉強をして経験を積んだからできるようになっています。

自分だけ苦手と思いがちですが、そうではないので、諦めずに頑張りましょう。

htmlの主要タグを覚える

htmlには数多くのタグが用意されていますが、良く使うタグは限られています。
良く使うタグは、

• div
• section
• h1〜h6
• p
• a
• img
• ul、li

です。

これらの良く使うタグの意味を理解して、適したタグを使うようにしましょう。

cssの主要スタイルを覚える

cssは、htmlより覚えることが多いです。
全て覚えるのは大変です。もちろん僕も全て覚えていません。

全て覚えていなくても、調べればすぐ出てくるので、marginやpadding、flexなどの主要スタイルを覚えて、あとはcssで表現できるかどうかを、都度調べながら進めていけばページを作ることができます。

デザインデータを印刷する

1番のおすすめな方法は、デザインデータを印刷することです。
デザインを紙で見ると、俯瞰で見ることができ、ペンでメモ書きもできます。

僕が最初の頃やっていたのは、「ヘッダー」「コンテンツ」「サイド」「フッター」など、ブロックごとに分けるように赤ペンで印をつけていました。

ブロックを分けると、1枚のデザインが複数の要素としてイメージできるようになり、コーディングがしやすくなります。

さらに、要素の意味も分かるようになるので、この見出しはh2タグ、この文章はpタグなど、適したhtmlタグも使えるようになります。

最後に

以上、コーディングが苦手な方に向けて、解決策を解説しました。

最初ソースコードを見た時は、Webサイトがこんな風に作られているんだと驚いた記憶があります。
「こんなの絶対書けない！」と思いましたが、しばらくはやっぱり書けませんでした。

でも、何がきっかけかまでは覚えていませんが、諦めず数をこなしていると、ふと出来るようになったことも覚えています。

いくつかコーディングをすれば、htmlの主要タグ、cssの主要スタイルはすぐ覚えられるので、何も気にせず数をこなせば自然と得意に変わるはずですので、諦めず頑張りましょう。