はじめに
今回は、「導入編」の記事で書いたスクールに入る前に独学で勉強していたときの話を紹介していこうと思います。
あくまで、初心者なりに理解しやすい方法を模索した話ですので、そこだけご了承くださいね^^;
HTML/CSS (Progate)
最初にプログラミング言語（正確にはマークアップ言語）として触れたのが、HTML/CSSでした。
HTML/CSSを学習するのに自分は「Progate」というプログラミングの基礎学習をができるサービスを利用して始めました。（一部は月額制で有料有り）「Progate」には色々なコースが用意されているのですが、最終的に自分はHTML/CSSの道場編や上級編は全て勉強してスラスラできる程練習しました。
そういった中で、「もっとこうやって理解していたら良かったのに」というのが度々あったので、紹介したいと思います。
「共通した内容」を整理して覚える
HTML/CSSで最初に苦労したのは、一般的なタグの種類を覚えたり、タグごとの性質が違ったりと覚えることが多すぎて無理！となりました。しかし、実際に開発するときはググってその都度調べてもいいんです。なので、丸暗記ではなく手段やルール、規則などをひとまず覚えておけば何とかなります。
例えば、
ブロック要素「divタグ/h1~h6タグ/pタグ」
この３種類のタグを一番よく目にすると思いますが、これらは積み木のように、上から順に縦に並ぶと覚えておきます。また、ボックスモデル(CSS)という概念がありmargin（外の余白）・border（枠線）・padding（中の余白）も適用されます。
この考えを共通のルールとして、これ以外に例外的な並び方をしたり、ボックスモデルの概念が無いものがあると考えておくと理解しやすくなると思います。
「例外な物」をピックアップ
先ほどの要素はいわゆるブロック要素という物でした。これら以外に並びやボックスモデルが異なるものがあります。
インライン要素「aタグ/spanタグ」
これは、ブロック要素のように縦に並ばず、横に並んでいきます。改行がされないとも言います。また、ボックスモデルの概念が無い為、margin等は指定できません。
このボックスモデルの概念が無いため、ブロック要素で囲んであげたり、次に紹介している方法でボックスモデルの概念を持たせたりしていると思います。
インラインブロック要素「ブロック要素やインライン要素を変化させたもの」
インラインブロック要素というのは、横に並んでいくが、ボックスモデルの概念が適用できるという要素です。
これはCSSの「display:inline-block;」というプロパティがあるのですが、それを使ってブロック要素→インラインブロック要素へ変化させたり、インライン要素→インラインブロック要素へ変化させたりすることができます。
CSSのタグ指定方法 基本の3つ
h1{~~}・div{~}・p{~~}といった指定の仕方
これは、そのHTML側にある要素全てということになります。もしh1タグが2つあればh1{~~}とすれば「HTML側にあるh1全て」という意味になり、2つともCSSが付けられます。
.class名{~~}という指定の仕方
これはドット「.」を付けてその後にHTML側で指定したclass名を入れることで、そのclass名のものだけCSSが適用されるというもの。
#id名{~~}という指定の仕方
class以外に要素の指定方法で唯一無二な名前を付けて使うidがあります。クラスに似ていますが、CSSでの指定方法がシャープ「#」でid名はHTML側で同じものは使えない程度に最初は覚えていました。
CSSでは、色々なプロパティがありますが、その都度「CSS 文字色変える」といった感じでCSSプロパティを検索していました。
CSSセレクタのチートシート
https://webliker.info/css-selector-cheat-sheet/
以上の内容を踏まえて、Progateの道場編でどのタグを使うべきか？、それに付けるCSSは何か？などを考えていくと、分かっていない事も明確になると思います。
このような形でまずは、共通ルールを覚えた上で、例外だけ個別に知っておくと勉強の効率が上がると思います。
HTML/CSS (ドットインストール)
「Progate」である程度スラスラコードを書いたりすることができるようになってきたら、自分はドットインストールでまた、HTML/CSSの勉強をしました。
こちらも、がっつり学習するつもりであれば、月額制に申し込んだ方がいいと思います。HTML/CSSのコースの「学習環境を整えよう」は分かり易いのですが、「HTML/CSSの概要を理解しよう」は全くの初心者が見ると、ついていけないかもしれません…。次のコースに「もっと詳しくHTML/CSSを学んでみよう」が有りますがこちらをやっていないと「HTML/CSSの概要を理解しよう」は分かりづらいです。
Progateに無いHTML/CSSの知識がある
Progateを学習していて、ふと疑問に思った方もいると思うのですが、「HTML/CSSのコードって実際に自分のPCで書くときはどうするのか？」です。まずHTML/CSSでWEBページを開発していく際に必要なツールの準備から動画で解説があります。
また、HTMLのタグも「Progate」で見たことなかったタグも出てくると思いますし、CSSのプロパティも知らないものが出てくる筈です。
こういったものが出てきますが、先に「Progate」の学習のなかで共通ルールと例外を理解して大まかに覚えてきていたので、知らないタグが出てきても自分で「HTML 〜タグ」といった感じでその都度調べて、理解していきました。CSSも同様です。
ドットインストールの勉強方法
「Progate」の知識がある状態でしたが、
素直に動画を見ながら、一時停止して同じようにコードを入力していくという方法でまずは動画を1週します。2週目は、入力した自分のコードを確認しながらを動画をじっくり見て理解を深めていました。
この方法でドットインストールのHTML/CSSに関する動画を全て見てある程度理解できたところで、実際にWEBページを作っていきました。
作るといっても、メニューバーだけ作って見たり、３つの四角い要素を横並びに並べて見たり、「Progate」の道場編のページをロゴや写真は無視して、要素並びや大きさ、CSSによる装飾だけ真似して作ったりしていました。
勉強の進め方が迷走したときは…
HTML/CSSを勉強し始める人や、HMTL/CSSやったけど他に何やればいいの？となってしまう人もいると思います。そんな人は、「東京フリーランス」というサイトにあるデイトラ1stを参考にして見てください。ブログ形式の記事に勉強の進め方を順番に紹介しています。
以下にリンクを載せておきますね٩( ‘ω’ )و
30DAYSトライアル1st【コーディング基礎学習〜環境設定編】
https://tokyofreelance.jp/30daystrial-coding-1st/
個人的にはデイトラだけでなく、例えば色々なスクールのコース内容やカリキュラムを調べて、他に何を勉強したらいいのか？を調べて、参考書を買って勉強するのもアリだと思います！
まとめ
今回は、自分がスクールに通う前に独学で勉強していた時に工夫していた事や気づいた事を書いてみました！
SNS等で色々な情報商材もあったりしますが、まず自分で模索してみる事も大切ではないのかなと個人的には思っています。
また、HTML/CSS以外の言語(jQueryやPHP)も独学で勉強していたので、その話もまた違う機会に書いてみようと思います！٩( ‘ω’ )و
では、また！
コメント