初心者の方にもわかりやすい様に画像を使って説明していきます！
この記事を読めば、HTMLとCSSについての理解がグッと深まるはずです
プログラミング学習を始めてみたいけど…そもそもHTMLって何？CSSって何？
見たことない記号や英語が並んでて意味不明なんですけど…
そんな悩みを解決する記事を用意しました。
まずは、HTMLとCSSの基礎と役割、実際にそれをどう使うのかを説明します。
最後には、HTMLとCSSの学習方法の紹介など、順番に詳しくご紹介していきますね。
目次
HTMLとCSSの基本
HTMLとCSSは、Webサイトを作るために最初に学ぶ言語になります。
学習を始める前に、HTMLとCSSの役割を理解していれば、難しい内容も理解しやすくなります。
駒には、それぞれの役割がありますよね。
役割を知らないまま、将棋をプレイするのはとても困難ですが、
駒の役割を理解すれば、将棋もプレイできるようになります。
でも、安心してください。
HTMLやCSSの全てを完璧に覚える必要はありません。
どういうことかというと、HTMLやCSSに限らず、プログラミング言語の答えは、全てインターネット上に公開されているからです。
Webエンジニアやプログラマーのほとんどの人は、Googleで検索をして答えを探し、問題解決と実装を繰り返しています。
この記事で覚えるべきポイントは、HTMLとCSSがどういう役割なのかを理解するということです。
- 「HTML」は、Webサイトの骨組みを作るために使われている言語です。
- 「CSS」は、HTMLで作られたWebサイトを、デザインするために必要な言語です。
Yahooのページも、Amazonのページも、有名なあのページも…、インターネットに公開されているWebサイトは、実はどれもHTMLとCSSが使われています。
HTMLとCSSを覚えれば、見たことのあるWebサイトは大体作れる様になります。
どうでしょう…なんだかワクワクしてきませんか？
正確には、HTMLとCSSで作れるのは「見た目」の部分のみです。Amazonのログイン機能や、買い物機能などの複雑なシステムは、別のプログラミング言語が必要になってきます。
HTMLの基本
「HTML」は、Webサイトの骨組みを作るために使われている言語と前述しましたが、もう少し具体的に言うと…Webページを表示させるために、指示をする言語になります。
少し難しいですかね…
例えば、あなたが今見ているこのページも、
タイトルの文字は上の方にあって、文章はここにあって、画像は少し下にあって･･･と、色んな表示形式がありますよね。この表示を指示しているのが、HTMLなのです。
タイトルの文字の大きさが違ったり、文字が中央寄せされていたり、アイキャッチ画像が中央に表示されていたり、Twitterのシェアボタンがおしゃれだったり…、こういうデザイン部分は、HTMLだけで表現することができません
CSSの基本
前述にも書いた通り、HTMLだけでは、Webページの見た目をおしゃれにすることができません。デザインの手助けをする言語が「CSS」です。
CSSの役割はとても明確で、骨組みを作るHTMLに対し、見た目を整える役割をもっています。
そのため、Webサイト制作には、HTMLとCSSをセットで覚えることが必要になってきます。
HTMLだけのページでは、オシャレに表現できなかったWebサイトも…、
CSSを使うとこんなに綺麗なページに仕上げることができるんです。
HTML書き方
次は、HTMLの書き方について学んでみましょう。
HTMLの書き方には、いくつかのルールがあります。
- 一番初めに＜!DOCTYPE html＞で「これはHTMLファイルだよー」ということを宣言する
- ＜html＞〜＜/html＞の中に記述していく
- 構成は大きく下記の2つに分かれている
・＜head＞＝Webサイトに表示しない裏の指示を書く
・＜body＞＝Webサイトに表示する内容を書く - 「< ~~ >」で始めたタグは、必ず「＜/ ~~ ＞」で閉じる
- ファイルの拡張子は「.html」
HTMLファイルの全体を表示すると下記のような感じです。
・＜body＞の中にコード書いていく
・「< ~~ >」で始めたタグは、必ず「< / ~~ >」で閉じる
この2つを意識しておくと良いです。
HTMLやCSSは「テキストエディタ」を使って記述していく
HTMLやCSSは、「テキストエディタ」というものをつかって、コードを書いていくことになります。テキストエディタは、プログラミング用のメモ帳といった感じです。
専用ソフトは色々ありますが、『Visual Studio Code』を使うと間違いないでしょう。
エディタについては下記の記事に詳しくまとめています。
HTMLでよく使うタグ
HTMLには、色んな種類のタグが存在します。
例えば、前述に書いた＜html＞や＜body＞、これもタグの一種です。
タグには、それぞれの役割が決められています。
- ＜h1＞~＜/h1＞･･･見出しを付ける
※見出しの数字はh1~h6まであります。 - ＜p＞~＜/p＞･･･段落を指定する
- ＜a＞~＜/a＞･･･リンクを指定する
- ＜img＞･･･画像を表示する
- ＜div＞~＜/div＞･･･一つのブロック要素を指定する
上記は一部ですが、中でも頻繁に使うものをあげてみました。
HTMLでは、このようなタグを使ってwebページの骨組みを作っていきます。
この中でも頻繁に使うタグが＜div＞というものです。
この＜div＞タグは、タンスに例えると引き出しのような役割をしています。
＜div＞~＜/div＞の中に、＜p＞タグをいれたり、＜img＞タグをいれたりして、1つのブロック要素が作られます。
タグの役割
HTMLでは、タグにIDやclassといった属性をつけることもできます。
- id属性･･･同じWebページ内でid属性の値が重複してはダメ
- class属性･･･同じWebページ内で何度も使うことができる
さらに、このid属性やclass属性に値を持たせることによって、CSSがどこの部分に対してデザインをするのかを判断できるようになります。
HTMLの書き方と、CSSとの関係性はなんとなく理解できましたか？
次は、CSSの書き方について学んでみましょう。
CSSの書き方
これまでも説明したとおり、CSSは、HTMLにデザインの指示をする役割を持っています。
CSSでは、デザインの指示と、どこにデザインを反映させるのかという記述をしなければなりません。
この記述により、HTMLにデザインが加わり、Webページの見た目が綺麗に仕上がっていきます。
ちなみに、CSSで指示できるデザインの種類は、星の数ほど多く存在します。
「この文字を赤色にしたいなぁ」と思ったら、Google検索で「CSS 文字の色を指定」と検索してみてください。するとすぐに答えが見つかります。
この様に、CSSは調べながら覚えていくのが一番効率がいいです。
HTMLとCSSのファイルの作り方
実際にコードを書いていくときには、それぞれ下記のファイルが必要になります。
一般的に、TOPページは「index.html」という名前でファイルが作られています。
CSSも一般的にファイル名は決まっており、「style.css」という名前で作られます。
ファイル名は好きな名前をつけることもできますが、基本的にTOPページは「index.html」など、形が決まっています。ファイル名を合わせることによって、他の人がファイルを見た時にわかりやすいメリットや、編集や修正をしやすいといったメリットがあります。
2つのファイルは、必ず同じフォルダに入れなければなりません。Webページ1つに対して、フォルダは1つです。
HTMLとCSSを実際に使ってみよう
HTMLファイルとCSSファイルは、前述でも書いた通り、「拡張子」が違うので別々のファイルとして存在してしまっています。
このままでは、HTMLとCSSが紐づいていないので、いくらCSSでデザインの記述をしても、HTMLでは読み込まれません。
そのため、HTMLとCSSのファイルを紐付ける設定をしなくてはなりません。
HTMLとCSSの紐付け方
HTMLとCSSファイルを連携させるためには、HTMLの中でCSSを呼び出すコードを入れる必要があります。
まず、htmlファイルの中身を確認します。
＜head＞タグがあるので、＜head＞タグ内でCSSを呼び出すコードを追加します。
以上！完了です。
これで、「HTMLが、同じフォルダ内にある「style.css」を読み込む」という設定ができました。
どうでしょう、簡単でしょう？
以上で、HTMLとCSSを書く準備ができました。あとはコードを書いていけば、Webページが組み立てられていきます。
HTMLとCSSの学習方法
これまで説明してきた、HTMLとCSSの基本や、HTMLとCSSのルールを思い出しつつ、実際に学習サイトを利用してHTMLとCSSに触れてみましょう。
おすすめの学習サイト
プログラミングを学べる学習サイトや、スクールはたくさんありますが、その中でもオススメのものを紹介していきます。
Progate
Progateは、初心者でも学習しやすいように工夫されたプログラミング学習サイトです。
用意された環境で、すぐにコードを書くことができるので、非常に効率よく学習することができます。
≫Progateはコチラ
Udemy
Udemyは、主にプログラミングの動画教材を販売しているサービスです。
テキストを読みながら学習するのが苦手な人には、Udemyの動画学習が非常にオススメです。
※Udemyの学習教材は、ほとんどが有料です。
プログラミング初心者の方には、下記の動画がオススメです！
非常にわかりやすい説明で、実務可能なレベルにまで成長可能です。
≫「[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門」の動画を見てみる
ドットインストール
ドットインストールは、「3分で学べる」をコンセプトとした、プログラミング動画学習サービスです。Udemyとは違い、月額課金制となっています。
※HTML/CSSならば無料で学べます。
ドットインストールは、少し難易度が高く上級者向けになっています。動画学習をするのなら、Udemyをオススメします。
HTMLとCSSを学習する順番
『次に何を学べば良いのか』これが分からずに迷子になり、そして挫折する人も多くいます。プログラミング学習を始めたおよそ9割の方はリタイアしてしまうそうです。
そんな悩みを解決できる記事を用意しました。
詳しくは、下記の記事を参考にしてください。
HTMLとCSSについてまとめ
いかがでしたでしょうか？
HTMLとCSSの基本は理解できましたか？
「うーん…まだ全然理解できないんだけど…」という人は、まずはコードに触れてみるのが良いかもしれませんね。
すぐにコードに触れることができる学習サービスは、Progateです。
まずは、Progateを利用して、実際にHTMLとCSSを書いてみるのがいいでしょう。
- 「HTML」は、Webサイトの骨組みを作るために使われている言語。
- 「CSS」は、HTMLで作られたWebサイトを、デザインするために必要な言語。
- 一番初めに＜!DOCTYPE html＞で「これはHTMLファイルだよー」ということを宣言する
- ＜html＞〜＜/html＞の中に全て記述していく
- タグは「< ~~ >」で始まり、必ず「＜/ ~~ ＞」で閉じる
- ファイルの拡張子は「.html」→ index.html
- タグにはid属性とclass属性を付与でき、値を追加できる。
- CSSのファイル拡張子は「.css」→ style.css
- HTMLにCSSを呼び出すコードを追加する
- 全てを暗記する必要はない
上記を頭に入れつつ、HTMLとCSSの学習を進めてみましょう。
