HTML CSSの書き方｜一緒にページを作ってみよう【初心者】

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の練習・勉強は、実践が大切』ってこと！　どんどん作ってみましょう。

次回から、実在するページの模写をはじめます。がんばるぞい！