意識改革も重要！初心者からコーディングができるようになるためのフロー

コーディングをできる人になろう！

この記事を見ている皆さんはWebサイトが作れる人になりたいと考えているはず・・・！

パソコン作業がどうしても苦手、という場合でなければしっかり初歩から理解していけばサイト制作に必要なHTML / CSSの知識はきちんと身に付きます。

コーディングが身に付けられないケース

どうしてもコーディングが身に付けられない、学習がなかなか進まないという方には以下のケースが挙げられます。

技術と知識の問題

パソコンの操作に慣れておらず操作が遅く学習がなかなか進まない
タイピングが遅い
フォルダ/ファイル/ブラウザ等のPCの基礎知識が頭にない
四則演算などの初歩の算数が理解できていない

まずはパソコンに慣れよう

上記問題はとにかくパソコンを触り、パソコンに慣れることで大半が解消できます。
最初は遊びで構いません。普段スマホでやっている作業をできるだけパソコンでやってみましょう。
LINEやyoutubeを見る、ゲームをするなどはパソコンでもできることがおおいです！

タイピングにも慣れよう！

タイピングはタイピングゲームやチャットをすると鍛えられます！

寿司打 - Play

作者の結果

ちなみに筆者はタイピングはそれほど早くありません。

算数が苦手なら

算数苦手、な人はJavaScriptのプログラミングのあたりで躓くと思いますので、小学校のドリルなどで苦手を潰す必要があると思います。
HTML/CSSのあたりなら算数が苦手でもなくてもなんとかなると思います。

意識の問題

重要なのが取り組む際の姿勢と意識の問題です。
以下の知識を持っている場合は早めに是正していきたいところです。

「コーディング/プログラミングは難しい」という苦手意識が払拭できない
知識を「理解しないと」先にすすまない完璧主義者
コードの実行結果より自分の頭の理屈が優先になってしまっている

コーディングは難しい！辛い！という思い込みがあるとなかなか学習が進みません。
コーディングは簡単だ！という気持ちで学習に臨んでほしいです。

HTML/CSSはそもそも学ぶべきことが多いです。
全網羅して学ぼうとすると、どれだけ時間がかかるかわかりません。
また、人間が作り出したものなので人の直感、自然な感覚とそぐわないものが多いです。
触っているとなんとなくわかってくる、という部分も多いのでとりあえず触って理解していくというぐらいがちょうどいいと考えられます。

HTML/CSSやプログラミングではコードの実行結果が全てです。
作り手の頭の中のことが実現できなかった場合は、作り方が絶対に悪いです。
時々「私は正しい！実行結果がおかしい！」と頑なになってしまう方がおられます。
そうではなく、自分の考えを実行結果に合わせて変えていくという感覚が必要になってきます。

独学で良く陥ること

独学で学習を行っていると、ある程度のところで行き詰まりだったりよくわからないことが出てきます。よくある例をピックアップしておきます。

今学習している内容が正しい内容なのか不安
どこまで、何をすれば仕事ができる状態と言えるのかがわからない
体系的に学んでいないため、学習内容の全体像が見えない
一人でやっていると仲間がいなくて寂しい・・・

これらが独学でやっている際のデメリットです。
こちらの記事ではこの問題をできる限り解決したいと思います。

コーディングができる、とはどんな状態？

WEB制作においてはサイトのデザインデータがまずあります。
デザインデータとはWebサイトを画像データで表現したものです。
データはFigmaやPhotoshopといったソフトで作成します。

そのデザインデータと、そこから切り出した画像データを使ってWebサイトをネット上で公開できる形に作成できれば「コーディングができる」と呼べる状態と言えるでしょう。

デザインデータをコード化するには必要なこと

コーディングに必要なことを羅列してみます。

HTML/CSSの知識

HTMLの知識
- 基本のタグ
- 構造タグ
- 属性の知識
- idとclassの付け方
- ボックスモデルの知識
- フォーム関連タグ
- メタタグの知識
CSSの知識
- 基本の装飾の知識
  - 文字装飾
  - 背景装飾
- レイアウトの知識と技術
  - ボックスの中央揃え
  - インライン要素の中央揃え
  - フレックスボックスの知識
  - ポジションの知識
- メディアクエリの知識（スマホ対応）
その他
- パスの知識
- ディレクトリの考え方

コーディングを練習する

HTMLとCSSの知識を学んだら、あとは実際にデザインをHTMLのコードにする練習をするのみです。HTML/CSSの教材テキストを参考にコードに起こしていくのと、自分でレイアウトを考えて起こしていくのは全く別の話です。

テキストを起こしていくのはすんなりできるけれど、何もないところからHTMLやCSSを起こしていくことができない・・・というのは良くあることです。

HTML/CSSをコードにするのは慣れでしかありません。
知識で知っているというより、できる/作れるという感覚です。
自転車に乗るような技術に近いです。

自転車に乗る際に自転車の仕組みを詳細に理解する必要はないですよね。
それに近いと心得てください。

おすすめの学習順序とそれに応じたコーディング課題をこちらに掲載します。

基本のHTMLを学ぶ

まずは基本のHTMLタグを学びましょう。機械は文章にどのような意味があるかを理解できないためタグによって意味づけを行います。

初心者向けHTML入門：書き方の基本とタグの使い方

HTMLの書き方を初心者でも分かるようにゼロから解説。ブラウザでHTMLを表示させ練習する方法から、基本的なタグの使い方まで丁寧に解説していきます。

上記のサイトで必要な基本知識は頭に入れることができます。

h1,h2,h3,h4,h5,h6,p,br,img,a,ul,ol,li,dl,dt,dd,div,span
table,tr,th,td

タグには「属性」を付けることができます。タグによってつけられる属性が異なります。

CSSで命令するにはタグに名前をつけてあげる必要があります。「id」「class」でタグに任意の名前をつけることができます。

「href」などの基本的な属性も覚えましょう。

[すべてのタグ] → class / id
[aタグ] → href / target=”blank”
[imgタグ]→ src / alt

基本的なタグの意味を理解したら課題に挑戦です。

お決まりタグも把握しておきましょう

最初に記載しておくべきタグはVisualStudioCodeを使っていれば簡単に出せますので、書き方を覚える必要はありません。意味だけは把握しておきましょう。
以下のようなものです。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
html,meta,head,body

基本のCSSを学ぶ

基本の装飾に使うCSSを学びましょう。単純なCSSでは文字を大きくしたり、色を変えたり、背景色をつけたりできます。

htmlにCSSを読み込む
CSSの文法を覚える
idとclassで任意の名前をつける
タグ名、id、classでCSS指定を行う
インライン要素、ブロック要素の概念を把握する

まずはこれらをマスターしましょう。

Webデザイン入門：HTMLとCSSの書き方をゼロから学ぼう

サルでも分かるHTMLとCSSの勉強講座です。初心者の方でも分かるように丁寧に１つずつ解説していきます。

上記サイトのCSSの項目を一通り学びましょう。

課題です。

CSSをhtmlに読み込む
基本の装飾①
基本の装飾②
WEBパーツを作ってみよう(準備中)

デベロッパーツールを使う

ブラウザのデベロッパーツールは非常に強力な開発ツールです。
全ての機能を把握するのは難しいので、わかりやすく使える基本機能から使っていきましょう。

ここまで学んだら総合的な課題！（外部サイト）

プロフィールリンクを作ろう - Web鍛（うぇぶたん）

サンプルページ：

がんばりましょう！

フォーム用のタグを学ぶ

html文書は紙の文書と違い動的に動かすことができます。

すでに学んだ「a」タグによるハイパーリンクも代表的な動的要素です。

そしてお問い合わせフォームなどのメール送信ができるプログラムが作れるのもウェブサイトの大きなメリットです。

htmlだけではメール送信のプログラムは作れません。PHPなどのプログラムを使わなければメール送信はできないのです。

HTMLで行えるのはメール送信の画面の部分です。文字を入力する部分や送信ボタンはHTMLで構築します。

form,input,textarea,label,slect,option

[form] → action / method
[input]
→ type=”text” /type=”radio” /type=”checkbox” /type=”email” /type=”submit” / value / name / checked=”checked” / for
[select]→ name
[option]→ name

課題です