morderblog 新しいことに挑戦する人を応援するメディア

【初心者向け】プログラミングを始めるならHTMLとCSSから始めましょう

【初心者向け】プログラミングを始めるならHTMLとCSSから始めましょう

こんにちは。macco(まっこ)です。

今回はプログラミングを始めようとしている人向けにお話したいと思います。

目次

こんな方におすすめ

  • プログラミングに興味があるけど何から始めたらいいの？
  • Progateとドットインストールどちらをやったほうがいいの？

簡単な自己紹介

  • Web未経験からIT企業に勤めて8年目くらい
  • Webサイト制作、テスター、基本設計、開発、企画・提案書作成、RFP作成支援、コンサル業務支援…色々な業務を経験

最近プログラミングを一から勉強しようと思い、HTMLとCSSから学習中です。

まずはHTMLとCSSから学んでみる

「プログラミングを始めてみたい」という方には、まずHTMLとCSSを最初に学ぶことをオススメします。

なぜHTMLとCSSから学んだほうがよいかというと、今後他のプログラミング言語をやるうえでのベースになるからです。

HTMLとCSSはWebページを表示している骨子みたいなもので、

  • HTML⇒文章構造を担当（メニュー、見出し、本文など）
  • CSS⇒デザインを担当（文字の大きさや色、配置など）

という役割に分かれています。

HTMLとCSSから学んだほうがいい理由

結論をいうとHTMLとCSSを理解するところから始めたほうが、効率がよく、結果的にプログラミング習得への近道になります。

例えば、あなたはAmazonのような通販サイト（ECサイトといいます）を作りたいとします。

一番上の「検索キーワードを入力する部分」を作る場合、どんな部品で構成されているか想像つきますでしょうか？

Amazonトップページ

HTMLやCSSの勉強を先にしていると、ここはセレクトボックスという部品とテキストボックスという部品と検索ボタンという部品が必要になる、といったようにどんなHTMLが必要になるかイメージが沸きやすくなります。

もしHTMLやCSSがどんなものか全く分からないと、検索キーワードを入力する部品のイメージが沸かないので、新たに調べたり試したりしながら覚えていかないといけません。

それも無駄ではないのですが、最初にHTMLやCSSを勉強しておくことによって、検索の仕方も検討がつくようになり、楽になります。

HTMLとCSSを学ぶならProgate⇒ドットインストールの順番がおすすめ

このツイートを掘り下げて説明をします。

Progateとドットインストールという名前を聞いたことがない方はこちらの記事の「おすすめの学習方法」内で触れていますのでご参考までに↓

【初心者向け】プログラミング学習の始め方

結論をいいますと、Progateとドットインストール両方をやったほうがよく、順番はProgateを終わらせてからドットインストールに挑戦してください。

実際に自分でそれぞれの学習サイトをやってみたので、その視点からお話します。

ProgateのHTML & CSSコース

HTML & CSSの学習コースの初級編、中級編、上級編、Flexbox編。道場コースの初級編、中級編、上級編をやってみてください。

道場コースはかなり難しいです。

私もだいぶ時間がかかりました。

少しやってみて解けなかったら、ヒントの答えをまるごと写して進めてしまっても大丈夫ですし、場合によっては道場コース自体をやらなくても大丈夫だと思います。

ちなみに無料会員のままですと、学習コースの初級編までしか進められないので、月額980円(税抜)のプラス会員に登録するといいでしょう。

ProgateではHTML & CSSがどのようにWebページの表示に関係しているか肌感覚をつかめればそれでOKだと思います。

また、最初は英単語に抵抗があるかもしれないので、そのあたりも慣れていけるとベストですね。

ドットインストールのウェブサイトを作れるようになろう

ウェブサイトを作れるようになろうの「１．学習環境を整えよう」「２．HTML/CSSの概要を理解しよう」「３．もっと詳しくHTML/CSSを学んでみよう」「４．ウェブサイトをゼロから制作してみよう」をやってみてください。

フォーム(例えばログイン画面とか)やグリッドレイアウトなどProgateで扱っていない項目などもあるので、やっておいて損はないと思います。

また解説動画の手順通りに進めていけば、ほぼ躓くこともないかと思います。

動画のスピードは速いので、一時停止と再生をしながら少しずつやってみてください。

こちらも無料会員のままだと「１．学習環境を整えよう」「２．HTML/CSSの概要を理解しよう」までしか進められないので、月額1,080円(税込)のプレミアム会員に登録して進めましょう。

もう一度いいます。Progateから始めて、次にドットインストールで復習するようなイメージで学んでみてください。

ここまで行えば、大体の雰囲気までつかめてくるかと思いますので、あとは分からないところがでてきたら、参考書で調べたり、Google検索をしてその都度学んでいくやり方で大丈夫だと思います。

終わりに

今回はプログラミングを始めたい人向けに書かせて頂きましたが、いかがだったでしょうか。

  • プログラミングを学びたかったらHTML/CSSから始める
  • Progate⇒ドットインストールの順番で学習する

最近「ウェブサイトを作りたい」「ブログを始めたい」「プログラミングを勉強したい」という方が増えていて、とても嬉しいです。

難しい部分もあり躓くこともあるかと思いますが、続けていれば必ず自分の技術として積み重なっていきますので、頑張ってみてください。

私も引き続き頑張っていきます。

プログラミングカテゴリの最新記事