【第6回】HTML&CSSの学習を始めよう!~WEBエンジニアへの第一歩~

この記事は古い情報が含まれています。他の記事を参考にしてください。

どうも! ウェブマスターです。

この記事は、 「【連載】完全未経験から6カ月間でWEBエンジニアへ転職しよう! 」の第6回目です。

前回の記事はコチラです↓
【第5回】独学でWEBエンジニアになるための学習の全体像を把握しよう!

前回は、独学でWEBエンジニアになるための学習方法(カリキュラム)の全体像についてのお話をしました。

学習目標」、「学習期間」、「学習の進め方」、「学習する技術」についての説明をしました。

今回からは、実際にWEBエンジニアになるための学習を始めていきます。

学習項目

今回は、「HTML(エイチティーエムエル)」と「CSS(シーエスエス)」というコンピュータ言語の学習をします。

「HTML」と「CSS」は、WEBアプリケーションの画面の表示を担当する技術です。

普段私たちが何気なく見ている、WEBページは、「HTML(エイチティーエムエル)」と「CSS(シーエスエス)」と呼ばれるコンピューター言語で作られています。

今回は、このWEBページを作成するための技術、「HTML」と「CSS」の基本を学習します。

学習書籍

今回の学習で利用する書籍は、

スラスラわかるHTML&CSSのきほん 第2版

です。

「スラスラわかるHTML&CSSのきほん 第2版」は、実習形式で、架空のカフェのWEBサイトを作りながら、「HTML」と「CSS」の基本を学習することが出来ます。

作成した架空のカフェのWEBサイトを実際に無料のレンタルサーバーで公開するところまでの説明があるので、「スラスラわかるHTML&CSSのきほん 第2版」を実習形式で読み進めることにより、WEBサイトの作成~公開までを一通り体験することが出来ます。

(目次)
chapter01 Webサイト制作を始める前に
chapter02 HTMLの基礎
chapter03 制作の準備と基本のHTML
chapter04 見出し、段落、リスト
chapter05 リンクと画像の挿入
chapter06 2ページ目以降を効率的に作成する
chapter07 CSSの基礎
chapter08 CSSでページのスタイルを調整
chapter09 フロート、テーブル、フレックスボックス
chapter10 フォームの作成
chapter11 モバイル端末に対応する
chapter12 Webサイトの公開
丁寧な操作説明と分かりやすい解説で、HTMLとCSSに初めて触れる方でもつまずくことなく、内容を理解しながら読み進められるようになっているので、「HTML」と「CSS」を初めて学習する人にピッタリの書籍です。
改定前の古い方の書籍を購入しないように注意しましょう。書籍名に第2版と書かれている方が新しい方です。

学習目標

今回の学習目標は、

「簡単なホームページ(WEBサイト)を「HTML」と「CSS」で作成出来るようになること」

です。

学習時間

「スラスラわかるHTML&CSSのきほん 第2版」の学習時間の目安は、20時間です。

学習のアドバイス

以下の3つのアドバイスを意識しながら、「スラスラわかるHTML&CSSのきほん 第2版」での学習をすると、効率よく学習を進めることが出来ます。

(1)必ず手を動かすこと

プログラミングの学習は、手を動かしながら学習するのが基本です。

「スラスラわかるHTML&CSSのきほん 第2版」は、実習形式で、実際に手を動かしてWEBサイトを作成しながら「HTML」と「CSS」を学習する構成になっています。

なので、必ず、書籍に記載してあるソースコード(HTML, CSS)を自分のパソコンに打ち込んで、サンプルのサイトを自分のパソコンで作りながら学習しましょう。

プログラミングは本を読んでいるだけでは、上達しません。必ず手を動かしながら学習しましょう。

(2)細かなことを覚えようとしないこと

プログラミングはカンニングし放題です。

実務でエンジニアは、常にインターネットや書籍で調べながら仕事をしています。

なので、プログラミングの学習は、学校のテスト勉強みたいに暗記をする必要はありません。

逆に、エンジニアが扱う技術の範囲は膨大なので、細かなことを暗記しようとすると、早い段階で挫折してしまいます。

暗記していなくても、調べて使えれば充分です。

例えば、今回、「HTMLタグ」というものを学習します。「HTMLタグ」の種類は、140種類以上あるのですが、それらを全て覚える必要はありません。「HTMLタグ」がどういうものなのか(※HTMLタグは文書構造を記述するもの)を覚えていれば、後は実際に使用するときに適切なものを調べて使えるからです。例えば、段落をHTMLで記述したいと思ったら、Googleで「HTML 段落」と調べれば、「pタグ」を使えば良いことが分かります。

(3)深堀し過ぎないこと

WEBエンジニアになるためには、沢山の技術を学習しますが、そのどれもが、とても奥が深いです。

例えば、今回学習する「CSS」を極めようと思ったら、軽く1年以上は掛かるでしょう。

今回は、限られた時間(480時間)のなかでエンジニアとして働くために必要な最低限のスキルを身に付けることが目的です。

ひとつの技術を深堀し過ぎないように注意しましょう。

「スラスラわかるHTML&CSSのきほん 第2版」の学習時間は、20時間が目安です。学習の時間が20時間を過ぎたら、まだ理解が甘いと感じていても、強制的に次の練習問題に移ってください。全体の技術を把握することで、個別の技術の理解が深まることもあります。

まとめ

今回は、HTML&CSSの学習方法についてのお話をしました。
「スラスラわかるHTML&CSSのきほん 第2版」の学習時間の目安は20時間です。
学習が終わりましたら、次の記事にある練習問題を進めましょう。

学習を進める中で、躓いてしまい、どうしても前に進めない場合は、下記の質問テンプレートに則ってこちらの記事へコメントして頂ければ、私の時間が許す限りで回答させて頂きます。

皆さん同じような箇所で躓くと思いますので、他の人の参考にも出来るように、質問への回答は、この記事内に追記させていただきます。
質問テンプレート

■ 作業しているパソコンのOS
(※例)Windows10

■ 躓いた箇所(書籍のページ数)
(※例)p122

■ やりたかったこと
(※例)文字を大きくしたい

■ できなかったこと
(※例)文字が大きくならない

■ 自由記述

■ 関連する全てのソースコードをアップロードしてください。
アップロードする