未分類CSSこんにちは「WEB制作を勉強したいけど、何をしたらいいかわからない。やったけど、WEB制作できない。今日はそんな方に向けて私がやった勉強法、WEB制作の写経を進めていきたいと思います。この記事読むと下記がわかります。現役WEB制作者がやった勉強法がわかる。勉強法のWEB制作の写経の具体的なやり方がわかります。1、達人のWEB制作のコードを真似られる。2、書きながら、達人の書き方が覚えられる。3、書きながら、WEB制作のコードの理解ができる。全体像が見えないゆえの不安『写経なんてやってられるか。自分がかっこいいなあと思ったサイトを見つける。次は自分で一から作ってみる。スンバラシイソースはストックする。写経って何スカ?写経とは写経(しゃきょう)とは、仏教において経典を書写することwikipedia:https://ja.wikipedia.org/wiki/%E5%86%99%E7%B5%8Cまあ、要は書き写すことです!WEBサイトのHTML/CSSを元あるサイトから引っ張ってきて書き写しましょう。WEB制作で写経がおすすめな理由WEB制作で写経がおすすめな理由は下記です。達人のWEB制作のコードを真似られる。書きながら、達人の書き方が覚えられる。書きながら、コードの理解ができる。それでは、説明していきましょう。1、達人のWEB制作のコードを真似られる。WEB制作で写経がおすすめな理由の1つ目は『達人のコードが真似られる』ということです。WEB制作において、HTMLの書き方は上手い下手が別れてしまいます。上手い人はHTMLをすっきり書きますし、無駄なことをしません。下手な人はついついコードを書き過ぎてしまいます。(プログラムだとよくあること。)WEB制作が上手い達人がどのように書いているのかを真似ることができます。真似ることは学ぶこととよく言われていますが、最初は真似でいいのです。テクニックの前に真似!2、書きながら、達人の書き方が覚えられる。WEB制作で写経がおすすめな理由の2つ目は『書きながら、達人の書き方が覚えられる。HTML/CSSはプログラムはプログラムですが、細かく分けるとマークアップ言語というものになります。マークアップ言語とは。language)とはHTMLとかXMLのこと。説明するとタグで囲む(マークをつける)ことで構造を表現する言語です。分からなければ文章に対して構造を表現する目印の付け方ルールと考えてください。https://wa3.i-3-i.info/word1578.htmlマークアップ言語とはタグとタグで囲んで目印として、WEBに読ませるものですね。マークアップ言語であるHTMLは書き方のテクニックがあります。初心者の方はそこの理解をするのに時間がかかります。僕がHTMLを教えていて、日々いうことは『とにかく書け!』ということです。「あーdivで囲まずにimg出しちゃうんだーとか、ここでclassつけてるんだー。」とか「あーidは1個だけしか書かないんやー」みたいなルールが感覚的に頭に染み込みます。HTMLのようなルールだけで考え方はあまり必要なものはまず、感覚的に・覚えてから理解することが勉強の近道です。写経はその感覚的に覚えるという時に役立ちます。これは僕がHTMLを勉強した時に無意味に時間を使って感じたことなので、間違いありません。3、書きながら、WEB制作のコードの理解ができる。WEB制作で写経がおすすめな理由の3つ目は『書きながら、コードの理解ができる。2でも少し書きましたが、書きながら感覚的に覚えることが重要です。それをしながら、必ず初学者の方は写経を通して、WEB制作の疑問にぶち当たります。「divはブロックですー」のようにまとめていきましょう。「このスタイルはこれをしますー」とか「インライン要素にはかなりませんー」とか諸々まとめていくとただの写経が理解になります。これをやっていれば、本なんか書く必要なんかありません。1ヶ月でHTML/CSSは書けるようになります。全体像が見えないゆえの不安『写経なんてやってられるか。上記を見て、「写経をやってみよう」というWEB制作初心者の方は多数いると思います。やっていく上で不安になってくるでしょう。「このままで果たして書けるようになるのか。なんてやってられるか!!!」となるでしょう。その気持ちめっちゃ分かります。僕も出来る風の人をそのように憎んでいた時代がありますし、不安で不安で仕方なかった時期があります。dotinstallをやっても、いくらprogateをやっても出来ないんですよね。勘の鋭い人や、適性がある人はWEB制作なんてちょいちょいと出来るのですが、僕みたいな文系野郎は本当に本当に出来なかったんですよ。それで、結局写経をやったらなんとなく出来るようになって、そのあとは自分で調べて調べて、写経で出来たWEB制作の骨組みに肉付けをしていったんですよね。「何個サイト写経しました!が、お前はどんくらいしたん?」みたいな感じで言ってくれても構いません。「真似ることはダメだー」と思われるかもしれません。真似ることって学ぶことなんですよ。「素晴らしい考え方だな!」と思う時がありますが、これって学んでいるんですよね。自分なりの考え方はひたすら真似をあとで出していきましょう。写経の具体的なやり方は下記です。自分がかっこいいなあと思ったサイトを見つける。次は自分で一から作ってみる。スンバラシイソースはストックする。一つずつみていきましょう。自分がかっこいいなあと思ったサイトを見つける。自分が作りたいサイトを選びましょう。最初は簡単なサイトでいいと思います。ページのソースを表示で中身を確認ページのソースを表示で中身を確認しましょう。右クリック→ページのソースを表示ページのソースを表示をクリックするとページのソースが出てくるので、それをcommand+Cでコピーします。写経勉強用のフォルダを作ろう写経01とかにしておきましょう。style.cssとindex.htmlを作って用意しましょう。reset.cssも引っ張って来ましょう。リセットCSSとは各ブラウザ(IE・FireFox・safariなど)は、タグ毎にデフォルトスタイルをそれぞれ独自にもっており、それらをリセットするスタイルシートのことを『リセットCSS』と呼んでいます。デフォルトのまま文字を表示すると、ブラウザ毎に文字サイズが変わってしまいます。そこで、デフォルトのスタイルをすべてリセットするCSSを読み込み解決します。※ただし、リセットCSSは必ず必要というわけではありません。今回、詳しい説明などはいたしませんが、ブラウザのデフォルトスタイルを有効に使っていこうという考え方もあります。https://meyerweb.com/eric/tools/css/reset/ただこれだけだとやりづらいので画面を2分割しておきましょう。sublimeだとここですね。->Columns2写経でHTMLを書いていこう写経でHTMLを書いていきましょう。その際にJSの記述は無視でいいです。HTMLを写経をします。divの一かたまりくらいをまず書いたくらいでCSSに移ります。写経でCSSを書いていこう!デベロッパーツールフル活用HTMLをdiv一個ぶんくらい写経をしたら次にCSSを写経していきましょう。その際に使うのがデベロッパーツールです。この要素はこんな構成でできてますよというのをカンニングしていきます。右クリック+検証で下記の画面が出て来ます。一個ずつこのHTMLはこのcssでできていることを確認しながら黙々と写経していきます。WEB制作での写経のコツはHTMLを全部写経してからCSSを全部写経してーではなく、ちょっとず使いていくことです。HTML少し写経したら、デベロッパーツールで確認したCSSをちょっと写経してーのように進めていきましょう。次は自分で一から作ってみる。ある程度、自分で何サイトか写経したら、今度は見ないで自分で作ってみましょう。デベロッパーツールは本当に悩んだ時だけ使用可能!のようなゆるいルールを決めてやってみましょう。マークアップ言語であるHTMLやCSSはほぼ筋トレと同じです。数こなした分だけできるようになります。スンバラシイソースはストックする。WEB制作で写経をしていると本当に素晴らしいソースやコードに出会うことがあります。そのようなソースはストックしておきましょう。ぶっちゃけ一回書いたら、なんとなく出来るようになっちゃいますので、見る機会もないと思いますが、ストックしておいて役に立つこともある思います。写経はどんな教材より、どんな動画教材よりもおすすめです。動画教材や教材を使うタイミングがとても大事なんですね。大事ある程度、実践で感覚がわかったタイミングでdotinstallやprogateを使うとすごく理解できるんですよね。僕自身、HTML/CSSの本を何冊も書いましたし、dotinstallもprogateも本当に一生懸命やりました。できるようにならなかったんですよね。WEB制作でフリーランスになりたい!って思っていたのに、できない。不安で不安でしょうがありませんでした。法人営業だったので、全然ITの知識は0。Macは使ったことがない。Wordとパワポだけ。そんな時に写経おすすめですよーって言われて、やってみたところ。感覚的にわかるようになったんですよね。ブロック要素とかインライン要素とかあんまり理解してないけど、普通にかけるんですよ。floatは理解してないけど、floatをかけたら上のタグにclearfixのクラスをつけるみたいなルールは理解して、感覚的にはできるようになりました。WEB制作ができなくて不安で不安でしょうがない人にとって写経をすることが突破口になればいいなと思って、この記事を書きました。仕事は習うより慣れろです。WEB制作をはじめたての方にこの記事が良いものであったら嬉しいです。WEB制作初心者の方!応援してます。