HTML CSS書き方講座準備編

HTML & CSS プログラミング

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

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

-HTML & CSS, プログラミング
-, ,

Copyright© zackut , 2019 All Rights Reserved Powered by AFFINGER5.