初心者だった僕が2ヶ月でHTML&CSSを習得した方法を教えます。初心者だった僕が2ヶ月でHTML&CSSを習得した方法を教えます。2019-07-08ツイートシェアはてブLINEPocketみなさんどうも!僕は、職業訓練に通い2ヶ月ほどで基本的なHTML&CSSを習得出来ました!しかしもともと機械系やITに強かった訳ではなく全くの未経験からの学習でした。早く習得できたのには理由があり、今からお教えする方法で学習すればスムーズにHTML&CSSを習得できるかと思います。勉強の過程で、もっとこうすればよかったのではと言う事やコツなども見つけたので僕の勉強方法と、コツなどを合わせて紹介していきます。僕が始めた時の状態に興味のある方は詳しくはこちらの記事をご覧くださいまた職業訓練についてもこちらでまとめているので是非!目次HTML&CSSとは?まずは、ぼんやりとでも全体のイメージを捉えるひたすら制作するプロに教えてもらう最速で習得する方法まとめHTML&CSSとは?まずは基礎知識からざっくり説明するとHTMLとは...サイトの骨格を作っていくもの、家でいうと土台や骨組みの部分CSSとは...サイトのデザインを作っていくもの、家でいうと壁や床などの部分という感じです。骨格を作るHTMLだけの場合こちらの画像のような見た目になります。当ブログをHTMLのみにした場合(CSS等を外した場合)見た目がかなり寂しいですねこんなサイト見たことありません。普段私たちがよく目にするサイトには、必ずHTMLとCSSはセットで使われているからです。先ほどの画像のサイトにCSSでデザインをしていくことになります↓(当サイトのトップページですが一応...)よく目にする見た目になりました!これがCSSの力です。全体のイメージを捉えるHTMLとCSSそれぞれ役割がわかったところでお次はいよいよ開発のやり方です!まずは、分からなくても進んで大丈夫なので以下で説明することをだいたいで把握してください!HTMLの開発画面とサイト上での表示は以下の通りです。>の部分をタグと言います。>には段落という意味があります。すると囲ってある部分をコンピューターが段落なんだなと認識してくれるという訳です!つまりHTMLを書くということは原文(普通の文章)に、コンピューターが認識できるようにタグを使って目印をつけることですなのでマークアップなどと言います。HTMLの基本的な型(文法)なので覚えておいてください!そしてこのマークアップの後にCSSでデザインをします。緑の部分が値となります。この場合はpタグの色を赤に、文字のサイズを30pxにしなさいという命令文になります。なんとなく理解できましたか?CSSの基本的な文法は、上記の通りなのでこれも覚えておいてくださいそして文法がなんとなく理解できたらとりあえず主要なタグの使い方を覚えてください!!!参考サイト:初心者が必ず使うタグからHTMLのタグ一覧を総まとめ最低限なら覚えなければいけないタグはそんなに多くないと思います。最低限のタグだけでいいのかそれは、他のことはサイト制作で詰まった時に検索して、その都度覚えれば良いからです。それも、完璧には覚えなくても大丈夫ですコーダーやエンジニアと聞くと色々な言語を完璧に覚えていてコードがスラスラ書けると思われがちですが、実は違って現場で活躍しているプロも文法だけ完璧に覚えて他のことはその都度調べながら開発します。制作する実際にサイトを作るこれに尽きます。実際に僕が学習してきた中でひたすら制作をするのが一番身になり、しかも身につく速度が格段に早いと感じました。例えるなら英語の教科書をずっと見ている人よりも英語がわからなくても現地に行って生活している人の方が英語が身につくのが早いと言った感じです!なので基礎と文法だけ理解したらあとはトライアンドエラーでひたすらサイトを作り続けましょう!とは言え初めてだしどうやって作れば良いんだろう、、となると思います。そんな方にはこちらの本がおすすめです!僕もこの本で勉強しました。これからはじめるHTML&CSS一冊を通して「67Green」という架空のサイトを作っていく内容になっています。macOS対応版この本を終えたら、ある程度自分でサイトが作れるようになっていると思うのでひたすらサイトを模倣し続けましょう!!プロに教えてもらう独学でもしっかりと身になる学習はできると思いますがやはり、最速で身に付けたいときはプロの指導を受けるのが一番良いです。制作する過程で詰まった時に自分で調べてもすぐに答えにたどり着けないときが来ますそんな時に聞ける環境があった方が圧倒的に進みが早いからです。独学か、プロに教えてもらうかを選ぶときは学習にかかるコストを重要視するのか、時間を重要視するのかで決めると良いと思います!また、Progateなどの学習サイトがありますがそれだけで学習するのはやめた方がいいですなぜなら、Progateを使ったコーディング(プログラミング)はレシピを見ながら料理をしているのと同じだからです。料理人を目指す場合はそれじゃダメですよねwしかし、予習や復習などに使う場合は制作環境を整えなくてもすぐに学習できるのでかなりおすすめです!最速で習得する方法まとめ僕が2ヶ月でHTML&CSSを習得した方法をまとめると基礎を満遍なく頭に入れる(ぼんやりとでいい)文法を覚える主要なHTMLタグを覚える練習用のサイトを作りながら学んでいくと言った感じです。4番は最初から完璧に完成させることは無理なので多少不具合があってもなんとか形にする。これを繰り返してください!そうしていくうちにいつか必ず全てが繋がり、理解できる時が来ます。それに一から全て理解しようとすると挫折してしまいますからね。【3時間で合格通知】初心者がAmazonアソシエイトに一発合格した話!パソコンが苦手だった僕が、ひと月で苦手を克服した方法まとめ機械音痴がWEB業界を目指すとどうなる?実際に勉強を始めて思ったこと。Posts【twitter】1日でフォロワー317人増えたからやってきたフォロワーの増やし方をまとめてみる。