HTMLとCSSのオススメ練習方法の『ランディングページの模写』をいっしょにやってみましょう！
ランディングページには様々な要素があるため、すごくいい勉強・練習になるんですよ。
連載予定なので、これからもよろしくね。
初回・準備編ということで、今回は
- HTML CSSの練習は『実践』すると力がつきやすいこと
- HTML CSSの練習に、ランディングページの模写がオススメの理由
- 練習の環境について
- 練習時間について
などについての読み物です。3分でさらっと読めます。
目次
この記事は、こんな人向け
プロゲートや、ドットインストールで、HTML CSS の基礎を勉強した人。
基礎は勉強したけど、実践したことがない人。
HTML CSSの勉強に行き詰まった人。に向けて書いています。
この記事を読むとできること
HTML CSS の効果的な勉強方法がわかります。
HTML CSSの練習は『実践・出力』すると力がつきやすい
記憶は入力するより、実践・出力するほうが、定着しやすいんです。
プログラミングは実践（ページの作成）すると、めっちゃ力がつきます。
感覚的にいうと『プロゲートやドットインストールを見ただけだと、全然知識が定着してない → 悔しいから調べて勉強して、自分で作る → 気づいたら力がついてる』という感じ。
プロゲートや、ドットインストールを馬鹿にしているわけじゃないです。プロゲートもドットインストールも、毎日お世話になってるよ！ 靴を舐めろと言われたら舐めれる。いや無理だわ。
『0から考えて作る』と学んだ知識が、どんどん自分の力になっていきます。出来ないことを調べて勉強して（入力）、自分で作る（出力）からです。出力すると、記憶に定着します。
『勉強は復習するより、実践した方が効果的』なのは科学的にも根拠があり。アメリカの研究では以下のような研究結果が報告されています。
勉強は教科書を復習するより問題を解くほうが効果的だ―――。そんな論文が『サイエンス誌』の2008年2月15日号で報告された。
米パデュー大学のカーピック博士の研究だ。より専門的に説明すれば「入力を繰り返すよりも、出力を繰り返す方が、脳回路への情報の定着が良い」ということになる。
出展：潜在“脳力”：【1】脳は「入力」より「出力」で覚える(1/2ページ)：nikkei BPnet 〈日経BPネット〉
なに？よくわかんない？
素振りは十分だから、試合やろうぜ！
HTML CSSの練習にランディングページの模写がオススメの理由
- 1ページなのに様々な要素があって、練習になる
- デザインを考えなくていい
- ランディングページは1ページで構造が単純なので、手軽に作れる
- ランディングページ自体がたくさんある → 教材が多い
- HTML CSSだけで作れる（javascript や PHP がなくても形になる）
この5つが、HTML CSSの練習にランディングページの模写がオススメな理由です。
ランディングページは、離脱されないように1ページに様々な要素（メニュー・ボタン・入力フォームとか）を詰め込んでいます。練習にもってこいなわけ。
模写なのでデザインは考えなくてOK。デザインを考えると時間がかかります。優れたデザインを模写することで、デザインの練習にもなりますね。
1ページしかないので、index.htm と style.css があれば作れます。手軽なのはいいことです。
ランディングページがたくさんあることも大きなメリット。お堅いサイト、ポートフォリオよりのサイト、デザイン押しのサイトなど、タイプの違う教材が無限・無料です。
そんなわけで、HTML CSSの練習には、ランディングページの模写がオススメなのです。
HTML CSSの練習環境について
必要なモノをざっとあげると……
- パソコン
- テキストエディタ
- ブラウザ（google chrome）
- インターネット環境
こんなところです。これだけあればOK。
ぼくの環境を紹介します。
パソコンはMacbookpro。windowsでもまっっっっっったく問題ないよ。
テキストエディタwindows visual studio code（通称 VScode）を使っています。（公式サイト）
拡張機能がなくても入力補助してくれる（div.container と入力すると、<div class=”container”> </div>に変換してくれる！）ので、とっても便利だし無料だヤッター！
ブラウザは google chrome 推奨。Internet Explorer（windows標準ブラウザ）、やSafari（Mac標準エディタ）は使わない方がいいです。CSSがうまく動かない可能性があります。
ローカル開発なので、インターネット環境がなくても動きます。しかし、常にググりながらの作業になるため、インターネット環境は必須です。プログラミングは暗記するモノじゃないので、堂々とググってください。
以上がぼくの練習環境。パソコンとネットがあれば、あとは無料です。テキストエディタはダウンロードしておいた方がいいね。
HTML CSSの練習時間について
HTML CSSの勉強にゴールなんてない！
なぜこんなことを聞くかというと、『勉強にキリはないから、さっさと作りたいモノを作った方がいい』と思うからです。
分からないことは、調べて勉強すればいいんです。知らないことの方が多いのは当たり前だから、調べながら作ればいいと思います。それって勉強にもなりますし。
作りたいWebサービスがないなら、日常の不安をメモるのがオススメ。
日常の不満ってすぐ忘れちゃうけど、メモすると結構な量だと気づきます。その不満を解消できるようなサービスを作れば、素敵な物になるはず。
ちょっと話がそれました。要は、HTML CSSの勉強はほどほどに。いろいろ作って、どんどん上達しようぜウヘヘヘって話です！
まとめ：HTML CSSの練習方法
連載初回ということで、
- HTML CSSの練習は『実践』すると力がつきやすいこと
- HTML CSSの練習に、ランディングページの模写がオススメの理由
- 練習の環境
- 練習時間
について紹介しました。
この記事で1番伝えたいのは、『HTML CSSの練習・勉強は、実践が大切』ってこと！ どんどん作ってみましょう。
次回から、実在するページの模写をはじめます。がんばるぞい！