私がプログラミング学習で最初に行ったのはタイピングの練習です。
これって私の勝手なイメージなんですが、プログラミングってモニターに向かって一心不乱にカタカタやってるじゃないですが？
なら私も手元を見ずにカタカタ出来たほうがいいよな？って思ったんです。
それで手持ちのPCで無料のタイピングソフトで練習してました。
「マイタイピング」ってタイトルです。
このソフトは、
と言った具合にプログラミング学習にピッタリのメニューがあったのでお世話になりました。
ただし、正直そこまでカタカタ出来なくてもプログラミングは出来ると思いますよ。
自分が4年間学習を続けて思ったのですが、プログラミングってカタカタ入力するより、実装方法や不具合の解決方法を調べる時間のほうが圧倒的に多いです。
でも、いざコードを入力するようになったら入力は遅いより速いに越したことはありませんよね？私も入力ミスはありますがある程度は手元を見なくても打ててますので気が向いたらやってみて損はないと思います。
次は教材探しです。
「まずは基本の言語であるHTMLとCSSから学習すべき。」と多くの方が仰ってましたので、それに適した教材を探しました。教材とは主に動画か書籍だと思うのですが、自分が学習しやすい物であればどちらでもいいと思います。
HTMLとはHyperText Markup Languageの略で、Webページを構成するためのマークアップ言語です。マークアップ言語とは、テキストに意味や構造を与えるための言語で、HTMLでは、タグと呼ばれる記号を使って要素を囲むことで、Webページ上のテキストや画像などの情報を構造化します。（←AI先生）
CSSとはCascading Style Sheetsの略で、ウェブサイトのデザインやレイアウトを定義するためのスタイルシート言語です。HTMLで記述されたウェブページの見た目を整えるために使用され、文字の色、サイズ、フォント、背景、配置などを指定できます。（←これもAI先生）
私は書籍中心に学習しました。というのも、動画学習だと結構な確率で寝落ちしてしまってたんです。
動画にせよ書籍にせよ、一番大切なことは実際に手を動かすことだと思います。実際にコードを入力していけば自ずとタイピングもマスター出来ますし。
ちなみに私がプログラミング学習のために初めて購入した書籍は、
「本当によくわかるHTML&CSSの教科書〜鈴木介翔著」です。
これ、タイトルの通り本当に難易度低めでわかりやすいテキストでした。
ただ書いている通りにコードを入力していけばサンプルサイトが本当に完成しました。サンプルサイトは架空のカフェの紹介サイトです。
余談ですが、Web制作の練習として架空のカフェの紹介サイトを作るってよくあるパターンなんです。
割と後になってから知った事実なのですが、この「カフェの紹介サイト」ってあまりお勧めできません。と言うのも、Web制作会社に営業のDMとか送る際に、自分のスキルを見てもらうためにこれまでの制作実績を添付するのですが、制作会社からすれば「カフェの紹介サイト」を見せられても困るみたいです。
理由はWeb制作会社にカフェの紹介サイトの制作依頼がないからだそうです。
とは言え、結局は分かりやすさを一番に選ぶべきです。ですので分かりやすさで選んだ書籍の課題が「カフェの紹介サイト」制作ならばとりあえずはそれを作っても問題はないです。もしテキスト選びに悩んでいるのであれば、選択肢の一つとして制作課題が「架空の企業のホームページ制作」を選んでも良いと思います。
話を元に戻しますが、この初めてのWeb制作学習は本当に楽しかったです。仕事中は書籍を読んでコードを頭とかノートに書き込んだりして思いを馳せ、帰宅後にPCに打ち込む作業をやってました。
ところがです。初めは全然書籍通りの表示になりませんでした。
Webサイト制作において、画像やテキストの位置や大きさ等をブラウザ上の思い通りの場所に表示させるためにコードを入力することをコーディングといいます。
学習初期の私は全くコーディングが理解出来ていませんでした。一番記憶にあるセンス皆無事件は「閉じタグ数合わせ事件」ですね。これは例えば、
<section>
<div class="box_1">
<p>Hollow</p>
</div>
<div class="box_2">
<p>Hollow2</p>
</div>
</section>
こんなコードがあったとします。
これって、
Hollowという文字をPタグ(<p>~</p>)でパーツ化。
それをbox_1と命名したdiv要素(パーツをまとめる箱みたいな物)に収納。
という意味です。その次のbox_2も同じ意味です。
div要素に別の要素を収納するのであれば、div要素の開始タグ<div>と閉じタグ</div>の間に記入しなければいけないのです。
ところが、この意味が理解出来てなかった当時の私は以下のように解釈してました。
「結局のところ、開始タグ<div>と閉じタグ</div>の数があってればいいんでしょ？」
なので、下記のように記述してました。
<section>
<div class="box_1">
<p>Hollow
<div class="box_2">
<p>Hollow2
</section></p></p></div></div>これじゃ、ブラウザ上で綺麗に表示される筈がありません。だってパーツ(この場合は<p>Hollow</p>や<p>Hollow2</p>)がdivの中に入っていませんから。
この原因がわからないまま本当に3日間悩み続けました。3日目にノートに色々コードを書いてる途中に、
「あ、開始タグと閉じタグの間に記述しなければいけないの？だから開始タグ、閉じタグと言う呼び方なのか？」
と突然天からそのような発想が降って来たときは、
「自分はコーディングの天才なのでは？」
と舞い上がってしまいました。
こんな私でも諦めずに学習を続ければそれなりに形になりました。これを読んでる年配の方でも絶対に出来るようになりますよ。
あ、ちなみに私は50代です。
では次の記事に。
記事一覧ページへ