【必見】コーディング(HTML,CSS)が苦手な方でも必ずできるおすすめの進め方【初学者向け】
こんにちはNNCの中里です。
本日はコーディングが苦手な方や初学者の方へ向け、おすすめのコーディング手法を紹介します!
学習中は理解できていても、自分自身で1からコーディングをしようとすると難しく感じることってありますよね。
大前提として、コーディングを学習し始めたばかりの頃は誰もが難しく感じるものです。
「難しいから苦手」「難しいから向いていない」とネガティブに考える必要はありません。
目次
コーディングが難しく感じる原因
コーディングを難しいと感じてしまう原因はいくつかありますが、代表的なものとしては以下のようなものになると思います。
- 1. HTMLのタグもCSSのプロパティ(値)も数が多くて覚えきれない
- 2. テキスト(コード)からデザイン通りの画面を作るイメージが湧かない
- 3. 何から書いたら良いかが分からない
最初から完璧なものを目指そうとしないこと
まず第一にタグやプロパティ全てを暗記する必要はありません。
基本文法や「HTMLやCSSで何ができるか」を理解して、あとは調べながらコードを書けば良いと考えてください。
調べながら書いているうちにいつの間にか暗記しているものですので、無理に暗記しようとせず慣れながら覚えていきましょう。
また「最初から完璧なものを目指そう」と考えることで「イメージが湧かない」「何をしたら良いか分からない」という思考に陥ってしまいます。
初学者の方は最初からスマートで無駄のない記述を行おうとするのではなく、「まずは簡単にできるなことから書いていく」という意識がおすすめです!
この考え方を持つだけである程度までコーディングを進めることができるようになります。
簡単に書けるHTMLの進め方
まずは簡単に書けるHTMLの進め方を紹介します。
以下の順でHTMLを書いてみてください。
1.テキストだけ書いてタグを付けてみる
ページに掲載するテキストだけを書いてみてください。
そして各テキストに対してタグをつけていきましょう。(classやidなどは気にせずに最低限でオッケーです)
まずは最低限「見出し(h1〜h6)」「段落(p)」「リスト(ul / ol / dl)」が使えればよしと考えてください。コピーライトがあればsmallで囲みます。
画像を配置する場所には「ここに画像配置」とテキストのみ書いておいてください!(背景として表示する画像はCSSで呼び出すためHTML側での記述は不要です)
2.画像を配置してみる
「ここに画像配置」と書いた箇所に、表示したい画像をimgタグで呼び出しましょう。
パスの考え方などをしっかり意識しながら記述をしてください!
3.リンクを設置してみる
必要な箇所にaタグでリンクを設置しましょう。(ここもしっかりとパスの考え方を意識してください)
ページ内リンクがある場合、リンク先の要素にidを付与して#id名でリンクさせましょう!
4.構造(分かりやすいものだけ)を作ってみる
ここまで書いたHTMLにヘッダー・メイン・セクション・フッターなど分かりやすい構造だけを書いてみましょう。
レイアウトに必要な細かなdivなどは後回し(CSSを編集しながら)でもオッケーです!
できる方はレイアウトまで意識してdivを作ってみましょう。
5.classやidを付けてみる
ページ内リンクの移動先があればidを付けましょう。
必要なければidはなくてもオッケーです。
次にボタンなどの共通パーツにclassを付けてみましょう。
細かなスタイルのためのclassは後回し(CSSを編集しながら)でもオッケーです。
できる方はスタイルを意識したclassも付けてみてください!
まとめ
この順で進めていくとおそらく1〜3までは自分自身で記述ができるはずです!
とにかく簡単なことから進めることで「何もできない」「手が止まってしまう」から脱却ができます。
難しいのは4と5です。
ここは難しいと感じたらCSSを編集しながら、スタイルに必要な構造やclassを加えていくという考え方でもオッケーです。
できる方は5まで進めておきましょう!
ここまでのHTMLは以下のような記述となります。(画像呼び出しのパスのみ都合上変更してます)
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
簡単に書けるCSSの進め方
コーディングの中で特にCSSが苦手という方も多くいらっしゃるかと思います。
ここからは先ほどのHTMLにCSSを適用する形で解説をします。
以下の順でCSSを書いてみてください。
1.色を変えてみる
color(文字色)やbackground-color(背景色)を使い、まずは必要な箇所全ての色を変更してみましょう。
作業効率など無視して色のみ変更してみてください。
色のコードをデザインデータから確認すれば良いので難しくないはずです。
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
2.大きさを変えてみる
font-size・width・heightなどを使い、文字サイズや要素の大きさを変更してみましょう。
これもまた大きさをデザインデータから確認すれば良いので難しくないはずです。
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
3.線や装飾を加えてみる
borderやbackgrund-imageを使い、線や装飾を加えてみましょう。
a要素にデフォルトで設定される下線が不要な場合、text-decorationで削除してください。
線の太さや色もデザインデータから確認をします。
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
4.余白を作ってみる
marginやpaddingを使い、余白を作ってみましょう。
marginは外側余白・paddingは内側余白ということを意識しながら行ってください。
余白もデザインデータを確認し、予め「どこの内側に何px」「どこの外側に何px」とメモを書いておくと進めやすくなります。
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
5.レイアウトを作ってみる(気合い)
最後に気合を入れてレイアウトに立ち向かいましょう。
まず横並びにするものをdisplay:flexでレイアウトしてみてください。
flexで表現できないような要素同士の重なりや固定表示などはpositionを使いましょう。
flexは親要素に指定することで子要素を横並びにすることができるので、「どこにflexを指定してどの要素を横に並べるか」などと予めメモをしておけば迷うことが少なくなるはずです。
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
まとめ
この手順で進めていくと全く進まない状況からしっかりと自分で進めることができるはずです。
おそらく1〜3までは問題なく記述ができるはずですが、4辺りから少々難しくなり多くの方が苦しむのが5のレイアウトです。
CSSのレイアウトは正直最初のうちはかなり苦労しますが、flexやpositionの基礎などを理解すれば必ずできるようになります。
「分からない = 理解できていないポイント」と考え、学習しながら前に進んでください。
経験を重ねるうちに理解が深まり必ずできるようになります!
最後に
いかがでしたでしょうか?
今回は決してスマートで無駄のない記述ではなく「とにかく自分自身でコーディングを前に進めるための手法」の紹介でした。
もちろんここからさらに細かい調整やレスポンシブの設定が必要になると思いますが、難しいことは最後に調べながら進めると考えください。
正直回りくどい進め方のように思えるかもしれませんが、最初のうちは少しでも自分自身で前に進めることができることが大事です。
苦手意識を取り除き、自分自身がどこが苦手かを理解することで問題を解決しやすくなります!
よろしければぜひ参考にしてみてください。