• HOME
  • HTML/CSS
  • HTML/CSS初心者がWebページを作るための学習ステップを解説
  • HTML/CSS
  • css
  • html
  • 初心者

HTML/CSS初心者がWebページを作るための学習ステップを解説

HTML/CSS初心者がWebページを作るための学習ステップを解説

Webページの構造とレイアウトを作るのがHTML/CSSです。Web制作をするためにはHTML/CSSが不可欠です。HTML/CSSは初心者でもコードのルールや使用方法もわかりやすいため、取り組みやすいです。

テキストエディタとブラウザがあれば、すぐに始めることができます。市販のパソコンでメモ帳が入っていない、ブラウザが入っていないことはほとんどありません。つまり、誰でもすぐにできます。

本記事では初心者がHTML/CSSでWebページを作るための学習ステップを解説します。

初心者がHTML/CSSでWebページを作るためにすること

基本コードを学ぶ

まずは基本コードの書き方を学ぶことから始めることをおすすめします。環境構築はテキストエディタとブラウザのみなので「メモ帳」と「Google Chrome」などで十分です。そのため、基本のコードを学んで動かしてみるのがいいと思います。

HTMLは各タグの役割と使い方が分かるようになるまで勉強しましょう。HTML/CSS初心者が覚えておきたいタグについて下にまとめています。参考にしてください。

①全体の構造を示すタグ

  • <!DOCTYPE html>：HTML5の宣言タグ
  • <html>～</html>：HTMLテキストの宣言
  • <head>～</head>:Webページの情報を記載する（文書のヘッダ情報）
  • <body>～</body>:文書の本体を示す

②<head>内で使われるタグ

  • <meta>:文書に関するメタ情報を記述する
  • <link>:関連する文書を読み込む
  • <title>:文書のタイトル
  • <style>:CSSを記述する
  • <script>:JavaScriptを記述する

③<body>内で使われるタグ

  • <h1>～<h6>：見出し
  • <div>:一塊の範囲（ブロック）
  • <p>:段落
  • <a>:リンク
  • <img>：画像
  • <ul>、<li>:リスト
  • <input>、<textarea>:入力画面
  • <button>:ボタン

CSSは基本構文とプロパティを覚えておくことをおすすめします。CSSの基本構文とプロパティを紹介します。

①基本構文

セレクタ {
  プロパティ：値;
}

②プロパティ

  • color:文字色
  • background-color:背景色
  • text-align:テキストの位置
  • margin、padding:余白
  • float:浮動点
  • display:表示方法
  • position:位置の指定

プロパティの使い方は使いながら慣れていくのが上達の近道です。特に、float、position、margin、paddingあたりを使いこなすことができれば、自由にレイアウトを返れるようになります。

公開されているサイトを模写する

基本的なコードを使えるようになったら公開されているサイトを模写することで上達します。あなたがよく見るサイトや作ってみたいと思うサイトを探して同じように作ることがおすすめです。特に模写したいサイトがない場合はクラウドソーシングの案件から参考サイトを模写するサイトを選んでもいいです。

作っている途中でレイアウトが崩れたり、わからなくなったりすることがあると思います。そんなときはGoogleで検索して、解決しましょう。自力で解決していくことで課題解決力も身に付きます。

最初は挫折しそうになるかもしれませんが、ここを踏ん張れば脱初心者に近づきます。挫折しないためのコツとして、完璧に模写しようとすることはやめましょう。少しのずれは多めに見てどんどん進めて完成させることが大切です。

オリジナルサイトを作る

模写サイトを3つくらい作れればオリジナルサイトを作ることをおすすめします。ポートフォリオサイトを作るのがいいと思います。自分のスキルをアピールできて、HTML/CSSの勉強にもなります。

初心者の内は実績がないため、アピールすることが難しいです。ポートフォリオを作ることで自分の実績を1つ作ることができます。また、他のスキルを持っている場合、そちらも記載しておけば、新しい仕事を得ることができるかもしれません。

練習だけでなく、転職や案件獲得のためにも使えるので、ぜひ作ることをおすすめします。

レンタルサーバーで公開する

オリジナルサイトを作ったらWeb上で公開するためにレンタルサーバーを使いましょう。サーバーへアップするまでを行う案件もあるので、練習として公開することは損にはなりません。

最初は「エックスフリー」などの無料レンタルサーバーを使うことをおすすめします。お金に余裕があれば、有料でもいいですが、ポートフォリオを使って稼げるようになるまでは無料で十分と考えます。

ただし、アフィリエイトサイトにする場合は有料サイトの方が効率的です。（無料サーバーはSEOが弱いため）

初心者がHTML/CSSを独学する方法

オンライン学習サイト

独学するためにはオンライン学習サービスがおすすめです。月額が書籍よりも安く、わかりやすいため、初心者が始めにHTML/CSSに触れるにはもってこいの教材が豊富です。おすすめのオンライン学習サービスを紹介します。

・Progate：スライドを利用したサービス。初心者にも分かりやすい。ブラウザ上でコードを書けるため、環境構築が不要。

・ドットインストール：動画での学習サービス。Progateよりも深い内容を学べる。自分のPC環境で学習する必要がある。

どちらも1～2週間で学習できます。本を一冊買うよりも安いです。今まで全くプログラミングに触れていない初心者の方であれば、Progateをおすすめします。

入門書

独学するには入門書を使うのも有効です。オンライン学習サイトは初心者がすぐにWebサイトを作れるように広い範囲を浅く掲載しています。一方で、入門書や技術書は知識の深いところも書かれています。

ただし、Webページを作り上げるためのスピードが感がないため、断片的な知識になってしまい、全体像を掴みづらい本もあります。オンライン学習サイトである程度Webサイトの作り方を学んだ後に入門書や技術書を使うことをおすすめします。

HTML/CSSで早く脱初心者となるにはプログラミング教室

HTML/CSSでいち早く脱初心者を目指すのであればプログラミング教室をおすすめします。講師がついており、わからないところがあればすぐに質問できるので挫折率も低いです。

ただし、聞けば答えてもらえる環境であるため、自分で調べて解決するという習慣が身につきません。プログラミングでは新しいものを作るときはわからないことがたくさんでてきます。そんなときに調べる力がないと挫折しやすくなります。

費用が許して、転職やフリーランスに早くなりたいという人はプログラミング教室という選択肢を持ってもいいのではないかと思います。

HTML/CSSの学習が終わったらJavaScriptを始める

HTML/CSSがある程度理解ができたらJavaScriptの学習を始めることをおすすめします。JavaScriptはWebページに動きをつけるためのプログラミング言語です。JavaScriptもProgateやドットインストールで学習できます。

JavaScriptも一緒にやってしまいたいのであればUdemyのWeb制作コースを購入することもおすすめです。1～3万円ほどかかりますが、定期的にセールもやっており、2000円程度で教材を購入できます。

HTML/CSS/JavaScriptを勉強するのにおすすめのコースを下に紹介しています。参考にしてください。

[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門

まとめ

HTML/CSS初心者がWebページを作るまでの学習ステップを解説しました。HTML/CSSは他のプログラミング言語を学習する際にも絶対に必要な知識となります。例えば、スクレイピングしたいとなったら、HTMLの知識がなくてはできません。

Web系の開発へ進みたいと思っているのであるならば、一旦自分でWebページを作って動かす経験が大切です。本記事を参考にオリジナルサイトを一度作ってみてください。