新宿区のトータルクリエイティブオフィス えんぎ株式会社 / ENGI Inc.
©2020 ENGI Inc.
HTMLやCSSは独学で学べる？実際の勉強方法や体験談、HTMLやCSSとは何かについても解説します
2021年10月29日 11:30
こんにちはENGI MAG編集部です！
Webデザイナーになりたい人が必ず目にする、HTMLやCSSという言語。
学校に通って何年もかけて習得しなければならないと思っていませんか？
実際以前は学校に通う、あるいは企業に就職して講習を受ける以外に習得する術がなかったかもしれません。
しかし現在ではHTMLやCSSに関連した本もたくさん出ておりますし、インターネットの情報も充実しており、大金をつぎ込んで勉強をしなくても習得できる時代になりました。
筆者は知識ゼロの状態からHTMLやCSSを独学で勉強し、Webサイトを作成することができました。
そこで今回は、HTMLやCSSとはなにか、勉強するために最低限必要なもの、独学で勉強を行う方法などを、実際の経験談やWEB屋としての観点も交えながらお伝えします。
きっとWebデザイナーへの一歩を踏み出せるでしょう。
目次
HTML（エイチティーエムエル）とは？
HTMLとはHyperText Markup Languageの略で、Webサイトを構成するマークアップ言語です。
読み方はエイチティーエムエルで、小文字でhtmlとも書きます。
HyperTextは「テキストを超えた（Hyper）テキスト（Text）」という意味で名付けられたもので、文字をクリックすると別のページやファイルに飛ぶ、いわゆる「リンク」の正式名称『Hyperlink（ハイパーリンク）』の機能を持つテキストを指します。
Markup Language（マークアップ言語）の『Markup』は、編集用語として使われているもので、
「ここが見出しで、ここに表を入れて、ここからここまでがひとつの文章」
という構成を表しています。
いきなり難しそうですが、特に覚える必要もないので「ふ〜ん、よくわかんないけどそういうものなんだ」と思っていただいて大丈夫です。
HTMLについてもう少し簡単に言えば、ページに表示したい情報をHTMLという言語で書いて、コンピュータに読み込ませるというイメージといえば伝わりますでしょうか。
それでは実際にHTMLがどのようなものか見てみましょう。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>サイトのタイトルがここに入ります</title>
<meta name="description" content="サイトの説明文がここに入ります">
<meta name="keywords" content="キーワード,キーワード02,キーワード03">
<meta name="author" content="著者名">
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>HTMLやCSSを独学で勉強する方法</h1>
<p>このサイトは、HTMLとCSSというプログラミング言語を独学で勉強する方法を解説しています。</p>
<p>本当に独学で勉強できるのでしょうか？<br>
実際に勉強したせいかも含めてお伝えできたらと思います。</p>
<img src="images/main.jpg" alt="画像の説明文がここに入ります" width="100%" height="auto" />
</body>
</html>雰囲気だけでも伝わりましたか？
段落や見出し、画像の位置などの構成をHTML言語のタグを使って書いていきます。
CSS（シーエスエス）とは？
CSS（小文字でcssとも）とはCascading Style Sheetsの略で、「CSS」と呼ぶ人もいれば「スタイルシート」と呼ぶ人もいます。
読み方はシーエスエスで、小文字でcssとも書きます。
先程のHTMLは文章の構成を指示する言語でしたが、CSSはデザインを指示するスタイルシート言語。
WebサイトはHTMLとCSSを組み合わせて完成するので、どちらもかかせないものなのです。
ちなみにHTMLやCSSはプログラミング言語と思われがちですが、計算などの処理をするわけではないのでプログラミング言語ではありません。
話を戻しましてCSSは
「見出しはこの色、画像は中央に、文字の大きさをこれにしてください」
と命令する言語で、以前はHTMLの中に直接スタイルを入れ込んでいましたが、CSSにすることにより、指定したところは全て同じスタイルが適応できるようになりました。
つまり、重複して書かなくても良くなったということです。
これが実際のCSSのコードです。
* {
margin: 0;
padding: 0;
}
h1 {
color: white;
background-color: #3bd5d4;
text-align: center;
font-size: 50px;
padding: 20px 0px;
margin-bottom: 30px;
}
p {
font-size: 20px;
text-align: center;
color: gray;
}「color: white;」は色を白くする、「font-size: 20px;」は文字サイズを20ピクセルにする、といった意味合いです。
ちなみにHTMLやCSSを書く際に出てくるタグ、例えばh1やpといったタグは一見覚えるのが大変に思えるかもしれませんが、「h1」の「h」はHeading（見出し）の頭文字で、それの1番なので「ページの中でいっちばん目立たせたい見出し」という意味だったり、「p」はParagraph（段落）の頭文字だったりと、基本的に指定する意味とリンクしているので、案外覚えやすいですし、逆に英語が苦手な人は1つずつ意味を覚えていけば、もしかすると英語の勉強にもなるかもしれません。
HTMLやCSSを勉強するために最低限必要なもの
では実際に勉強を始めるにあたって最低限必要なものをご紹介します。
本で勉強をする場合を除いて、極力お金をかけずに勉強を開始することもできます（ただし、後述しますが初心者は本での勉強がオススメです）。
サーバーの契約などはサイトをWeb上に公開するときには必要になりますが、今回は独学の段階である想定として、そちらは除きました。
①パソコン
パソコンは最低限必要となります。
スペックはそこまで高くなくてもいいですし、デスクトップでもノートパソコンでも、WindowsでもMacでもどちらでも構いませんが、本気でWebの仕事をするんだ！という場合はある程度のスペックのパソコンにすることをオススメします。（結局高スペックのものに買い換えるので）
特に、コーディングだけでなく今後Webデザインもしていきたい、という場合はPhotoshopなどは結構重たかったりしますので、最低でもメモリ8GB、SSD256GBくらいはほしいのと（ガッツリ仕事をするようになるとそれでも全く足りなくなります）、画面のサイズも大きいほうが間違いなく作業は楽なので、しょっちゅう自分自身が移動しない限りはデスクトップがオススメです。
リンク
リンク
②HTMLエディタ・Webオーサリングツール
HTMLエディタとWebオーサリングツールは、ざっくり言えばどちらもHTMLやCSSなどのコードを書くための便利なツールです。
詳しくはこちらの記事で、オススメのHTMLエディタやWebオーサリングツールなどと併せてまとめておりますので、是非ご覧ください。
③ブラウザ
言わずと知れたWebサイトを表示するためのもので、英語でbrowserなので『ブラウザー』と伸ばしても呼ばれます。
Webオーサリングツールなどでは確認用の表示ができる機能もありますが、基本的にはHTMLやCSSを記入しただけでは実際に正しく表示がされるかどうかを確かめる術がありません。
ブラウザで開くことによって、間違いを見つけたり表示が正しいかを確認したりします。
必要なもの、といってもお金はかからず、パソコンさえあればそこから各種ブラウザをインストールできますのでご安心ください。
種類は幾つかありますが、有名なものは「Google Chrome（グーグルクローム）」「Safari（サファリ）」「Firefox（ファイヤーフォックス）」「Microsoft Edge（マイクロソフト エッジ）」でしょう。
Google ChromeはGoogle純正のブラウザで、Androidスマホの標準ブラウザになっているほど有名です。
Googleアカウントで管理できるので、Gmailやカレンダーなども同期できるので便利です。
SafariはiOSで使われるブラウザで、iPhoneやiPad、Macの標準ブラウザになっています。
Firefoxはアドオン機能によりカスタマイズが可能なブラウザで、スマホやほかのパソコンと同期したい場合はログインが必要になります。
Microsoft Edgeはマイクロソフト社が開発したブラウザで、Internet ExplorerというWEB制作者泣かせのブラウザ（笑）の、後継ブラウザです。
初心者は独学では難しい？HTMLを独学で勉強する方法
さていよいよ本題ですが、マークアップ言語やスタイルシート言語を自分一人で勉強するなんて難しそうですよね。
ですが、結論、独学でも勉強することは可能です。可能というか、できます。
ちなみに当記事は1人が書いたものを、別の人間が編集として加筆・修正を行っているのですが、2人とも独学でWeb制作ができるようになった人間ですので、自信を持って「独学はできる」と言えます。
冒頭でも触れましたが、今はWeb制作に関する本もたくさん出ていますし、インターネットでの情報も溢れています。
というわけで、実際に独学で勉強してきたある程度の流れをお伝えします。
①ネットで勉強するか本で勉強するかを決めましょう。
インターネットで勉強するのか、本で勉強するのか。
筆者は企業様へWeb講座などを行いにいくこともあるのですが、どのような年齢・立場の方であっても基本的には本での勉強をオススメしています。
もっと言うと完全な初心者は電子書籍ではなく、“紙の本”での勉強を強くオススメしています。
確かに電子書籍は便利ですし、筆者もよく購入していますが、初心者の勉強として紙の本がオススメである明確な理由があります。
それは「これ、あの本のあそこら辺に書いてあった気がする」と確認する時にパッとさかのぼりやすいから。
電子書籍の場合しおりのようにページにマークをつけることもできますが、それは自分で「重要だ」と思った時だけなので、マークをつけていないページを感覚的にさかのぼって探すことはかなり難しい。
対してWebの勉強をする本の場合、本と画面を交互に見ながらゆっくり1つずつクリアしていくので、なんとなく書いてあった場所を感覚で覚えていることが多いんです。
「ここなんだっけな〜…あそこら辺に書いてあったと思うんだよな〜」「あったあったこれだわ。」
初心者の頃は本当にしょっちゅうこんなことがありました。付箋を貼らずとも感覚でパッとさかのぼれるのがポイントです。
リンク
リンク
一応WEB制作に関する人気の本のリンクを貼っておきますが、本を購入するときには実際に開いて自分にピッタリのものを見つけるのも重要です。
「なんとなくイラストの雰囲気が自分に合っている」「厚さ的にこれくらいなら自分でも読破できそう」「この機能！これが作りたいやつなんだよ〜」、独学には意外と重要な要素だったりします。
たくさん情報が載っているという理由だけで本を選ぶと、大抵は失敗します。
筆者も何度か「情報が載りすぎていて探しにくい」「ページ数が多すぎて心が折れる」といった経験をしています。
本の雰囲気や進め方が自分の勉強スタイルに合っているかが大切です。
ここまで強く本での独学をオススメしましたが、学生さんなどでお金がない場合は、もちろんインターネットを使った勉強でも全く問題ありません。
今は無料で勉強できる時代ですし、情報の精度もかなり高まっていますので、それらを有効活用していきましょう。
ネットで勉強するにあたり、『Progate』という有名な学習サイトを1つだけ貼っておきます。
他にも無料で使える学習サイトは色々とありますし、有料だとしても数千円程度でHTMLやCSSを学べる講座もありますので、気になった方は調べてみてください。
また、インターネット上の情報を使う場合も本と同じで、自分のペースに合わせて勉強できるものにしましょう。
②実際に手を動かしてみる。
HTMLやCSSの勉強で大切なことは実際に作ってみること。
Webサイトを作るのには、パソコンとHTMLエディタとブラウザがあれば事足ります。
勉強する段階で高い機材などは必要ありません。
というわけで本、またはインターネットを見ながら、実際に手を動かして作ってみてください。
オススメは最低2冊、同じような内容の本を実際に手を動かしながら試すこと。
理由としては2つあって、1冊だけの場合、ほしい情報が部分的に薄かった場合理解しにくいことがあるのが1点、もう1つは2冊ともに出てきた内容はほぼ確実に知識として定着する、という点。
当然、2冊ともに出てくる内容は重要な内容ですし、確実に実践でも使うことになる内容だと、作りながら認識することができます。
「2冊やるのキツいな〜」という方は（筆者も面倒くさがりなので痛いほど気持ちはわかります）、まず薄めでイラストが多い本を読破して、次に厚めの本に移行すると多少気持ち的に楽です。Web制作の本ってあんまり薄い本はないですが…（笑）
③分からなかったところを徹底的に。
実際に作ってみてできなかったところを重点的に勉強しましょう。
先述の通り2冊目、3冊目と新しい本を買ってみても、有料の講座を購入してみても良いです。
弁護士さんが六法全書を一言一句すべて覚えていないのと同じで、Webデザイナーやコーダーも全てを覚えているわけではありません。
タグを覚えなくても「どうやって調べれば目的の情報にたどり着けるのか」さえ訓練しておけば怖いものはありません。
分からない言葉が出てきたらその都度調べて自分のものにしていきましょう。
初心者がHTMLやCSSを独学で勉強してみて思ったこと。
始めた頃は正直独学ができるかどうか不安でした。
ですが、今はインターネットでもWEB制作を勉強するための確かな情報を得ることができます。
本も選びきれないほど出版されています。
WEBに関する勉強はやっていくと楽しくて、ついにはインターネットの有料講座まで受講しました。
HTMLやCSSをゲーム感覚で学べるスマホアプリもあるので、いずれおすすめします。
先程もお伝えした通り、全部覚える必要はありません。
基本的なところを覚えて、あとは当てはめるだけです。
少しずつ自分の知識にしていけば、いずれきっと素敵なWebサイトができることでしょう。
あなたのWebサイトを目にする日を楽しみにしております。
それではまた！