HTML,CSSを独学で勉強してる方、「この要素の意味がわからない」「どうしたらこうなるのかが理解できない」なんてことありませんか？
僕はあります、僕も勉強中で素人なんですが「このサイトみたいにしたいけど出来ない」「ここの要素がなんで必要なのか理解できない」なんて事はしょっちゅうあります。最初は何も分かんなくて断念しようとしたり。。。
ですがこんな僕でも少しは理解できるようになってきました、そこで僕の勉強方法を皆さんに共有できたらいいなと思います。
LP（ランディングページ）を模写する
例えば、飲食店バイトなどで、口頭で説明されていざやってみろと言われて、出来る人は少ないと思います。
サイト作りも一緒で、本を読んだり、動画を見たり、HTML練習ゲームをしたりしても、実際にサイトを作ってみろと言われたら全然出来ませんよね？（僕の読解力、理解力が乏しいだけなのかもしれませんが笑）
何に対しても触ってみる事って大切なんです。
そこで僕が教わったLPを模写する勉強方法をオススメします。
そもそもLP（ランディングページ）って何？
簡単に説明すると、webサイト上のチラシみたいなものです。
LPの目的としては、
ザックリ言うと、web広告から来たユーザーに対して「購入」「お問い合わせ」「資料請求」などの行動を起こしてもらう事です。
なぜLPの模写なのか？
「LPの模写じゃなくてHP（ホームページ）の模写でもいいじゃないか」と言う方もいると思います。
HPの模写でも全然いいと思います、でもなんで僕がLPの模写を推すのかと言いますと、
HPは複数のページがあり複雑でページ内の情報量が多いいです、また別のスキルも必要となってきます、そこで諦めて辞めてしまう人がいたりします。
一方LPでは、上記でも説明しましたが他ページへのリンクがほぼ無く、ページ内情報が限定されてるので1ページで完結します。
なのでHPに比べるとLPの方が簡単なんです。
模写をしながら要素などの勉強
当たり前ですが、ただ模写するだけでは何も効果はありません。
例えば、模写をしながら、意味が分からない要素が出てきたら調べたり、模写が終わったコードを触ってみて「ここをいじったらこう動く」など、いじってみるといいですね。
そうしたら自然と知識がついてきます。
実際に1から作ってみる
模写勉強をして、「ちょっと知識が付いてきたな」と思ったら実際に作ってみましょう！
自分で考えて出来る所まで作ってみる
模写勉強をしたら次は1から自分で作ってみましょう！
勉強はインプットするだけじゃ意味ないです、しっかりアウトプットしましょう。
全然作れなくても問題はないです、行き詰まったらまた勉強すればいいんです。
デザインが思いつかないなら他のサイトを見てみて、それを自分なりに作り変えていくなりしてみるといいですよ。
この勉強方法をやってみて
やっぱり僕は何事に対してもやってみると言うのがとても大切だと思います。
HTML,CSSに限らず、他のことでも言えます。
独学で勉強するのにも限界はあると思います、その時は友人などに教えてもらったり、スクールに行ってみたりするといいかもしれませんね。
僕も初心者なので深いことは言えませんが、少しでも参考になれば幸いです。
・縦長のレイアウト
・他ページへのリンクが少ない
・ページ内の情報が限定されている