【初心者】HTMLを独学で学んだら挫折しそうになった結果…学習方法を発見した話

Learn HTML by yourself

【初心者】HTMLを独学で学んだら挫折しそうになった結果…学習方法を発見した話

こんにちは nikonekoです。

nikoneko
nikoneko

突然ですが、自分が一番身につく学習方法ってなんだか知っていますか?HTMLを独学で学び始めたら、自分の一番身につく学習方法が、今更ながらわかりました。今日は、学習方法についてご紹介していきます。

学習方法のタイプ

これまで自分の学習方法で一番身につく方法は、このように思っていました。

  • 目でみる
  • ひたすら書く
読みながら(目でみながら)書くを繰り返す学習方法!

ということで、私は 勉強=本屋 タイプで、「見ながら(読みながら)」ワードを覚えるために「ひたすら書く!」でした。

覚えるために書き、教えるために書く…繰り返すことで覚えるので、ひたすら書いていましたね。

☝一般的にも、次の学習方法が多いようです。

  • パソコンではなく、ノートにペンで書く
  • 語呂合わせをして覚える
  • 集中して無言で暗記するよりも、声に出す
  • 集中力には限界がある!覚えるためには、適度な動きをとりいれる
  • 勉強のご褒美はお金が一番効果的
  • 勉強中の寝落ちはそのままで、起きたらスッキリ法
  • 水分をとると脳が活性化?!

みなさんはどのタイプでしょうか?

HTMLを独学で学ぶヒント

私は、「HTMLを独学」で勉強中です。その学習方法は、参考書を読み(目で見る)ひたすら書いていました。しかし、あまりにもキャパオーバーな日々で、すでに挫折しそうになっていましたが、あるYouTubeからヒントを得ることができました。

それがコチラ!!

いまいちピンとこなかった自分の学習方法を一気に吹き飛ばしてくれ、しかもプログラミング学習に集中できるサイトを紹介してくれています。

nikoneo
nikoneo

ポイントをまとめてみるよ!

 

目で見る + 声で解説してくれる + html記述の形を理解できる
結果:次のようなことがわかりました。
さて、ここから私の学習方法を挫折せずモチベーションをあげてくれたサイトをご紹介していきます。ヒントをくれる動画で紹介してくれているサイトは、dotinstall.com さんのプログラミング用学習サイトです。
「3分動画でマスターできるプログラミング学習サービス」というタイトルで、405レッスンを、5,991本の動画で提供してくれていてます。
なんといっても、初心者が取り組みやすい構成で成り立っています。
そして、3分間という時間が自分のペースに合わせた時間を組み立てることができるのです。
HTMLを独学で学ぼうとすると、集中力が必要になります。
時間を自由に使えるのは、夜中…☽になってしまいますが、それでも面白いと思ってしまったらマスターするまで取り組みたいのが性分です。
この内容は時間は短いですが、内容が充実していてしかもスピードがよいです。
自分のペースだと何時間もかかってしまうことが、この学習方法にはスピードもあるので、集中することができ、スッと入ってくると思います。
これまで納得できなかったことや、理解に苦しんだことを、面白いほどわかりやすく解説してくれます。

HTMLでプロフィールサイトを作ってみよう

本当に最初のくだりだけは、学習していたので入りやすかったことに感動してしまいました。
良かったら読んでみてください。
さっそく、内容をみながらHTMLでプロフィールサイトを作ってみましょう。
この内容は、集中できる時間で区切られていて「初心者コース」なら無料で学習方法を提供してくれています。
今回は、私のプロフィールサイトを(仮)を作成してみます。
たった1分ほどで、この出来栄えです。
1.コードeditorで紹介文を入力します。
解説:1.<h1></h1>:見出しを囲む【タグ】
   2.<p></p>:段落を囲む【タグ】
2.HTMLでのうつりかた
解説:見出し<h1>で囲まれた部分は、協調されて太字で表示されています。
3.記述は、半角英数で記述していきますが、大文字や全角で入力した場合はこうなります。
<h1>を<H1>と入力してしまった場合
<h1>を<H1>と入力たときのうつりかた
解説:見出しタグを、全角で書いてしまったり、全角空白を入れてしまったりすると、タグは反映されません。
4.画像をimgタグで表示してみる

 

 

解説:imgタグで画像を囲みます。<img src=”画像ファイル”>
5.画像の大きさを変える
解説:大きさを変えるには、幅と高さを調節するタグを記述します。 
<img src=”画像ファイル” width=”数値” height=”数値”>

文書の全体を作成する

 

 

 

 

 

HTML文書を記述するには、ルールがあります。

ルールその1

<!DOCTYPE html>

解説:この文書は、HTMLで作成されています宣言です。
※!DOCTYPE(ドクタイプ)は大文字で記述します。

ルールその2

<html lang=”ja”>

解説:このHTML文書は、日本語で作成されていますという説明です。

ルールその3

<head></head>
解説:headは、コンピュータが読み取るためのタグです。

ルールその4

<body></body>

解説:bodyは、html文書を映し出すために記述するタグです。(内容)
✍ルールに沿って記述するとこのような形になります。
この場合、
<img src=”画像ファイル” width=”120″ height=”120″>
<h1>nikoneko</h1>
<p>Webデザイナー見習い</p>
この部分が、<body></body>タグの中へ入ります。

まとめ

いかがでしょうか。
これまで、数時間かけて理解してきたものが、数分で形を覚えることができます。
何度か挫折しかけた私でも、本当にこのサイトは救世主となりました。
それでもまだ「初心者」であることはかわらないのですが、集中して学習できることは確かです。
学習方法は、一人一人ちがいます。理解の仕方もちがいますが、なんといってもスピードが丁度よいのと理解できる解説に時間がたつのも忘れて集中できる内容となっていると思います。
みなさんもどんどんチャレンジしていきましょう。

コメント