HTML・CSSの基礎知識
ここでは、HTML・CSSの基礎知識をまとめました。HTMLとCSSの違いなどについてまとめています。HTMLやCSSという言葉を初めて聞いた方は、まずはこちらから読み進めてください。
HTMLとは？
HTMLとは、Webページを作成するための言語のことです。タグを使ってWebページの書式を表します。たとえば、表・画像・リンクなどのWebページに必要な部品を配置することが可能です。HTMLで書かれたソースコードをブラウザに読み込ませることで、ブラウザがHTMLをWebページに変換して表示してくれます。
CSSとは？
CSSとは、主にWebページのデザインを変更するための言語です。CSSを使うことでWebページの文章の色を変更する、などの調整ができます。
HTMLだけでもデザインの調整は一応可能です。CSSがない頃はHTMLだけで全て行っていました。ただHTMLで全て行うと、ソースコードが長くなり、読みにくくなってしまいます。読みにくくなると、後でWebページを修正したいときに、かなりの労力がかかってしまいます。
そこで、デザイン調整はCSSで行うようになりました。デザイン関連の記述をCSSに移すことで、HTMLのソースコードが見やすくなります。今ではWeb制作をする際は、必ずと言って良いほどCSSが使われています。
CSSはHTMLに埋め込みで使うことも可能で、ただソースコードの可読性を上げるために別ファイルに記述することが多いです。
HTML・CSSは難しい？
「HTML・CSSは難しい？」と気になる方もいるでしょう。HTMLやCSSはそこまで難しくはありません。少なくとも、PHPやJavaScriptに比べたらずっと簡単です。基本的な構造はシンプルですが、覚えることが少し多いので、きちんと学習時間を取る必要はあるでしょう。
HTML・CSSの使い方
続いて、HTML・CSSの使い方を紹介します。HTMLとCSSを使ってWebサイトをどのようにデサインするのか、手順をまとめました。HTMLとCSSのファイルの作り方やブラウザに表示する方法などが分からない方は、こちらを参考にしてください。
①必要なものを用意する
まずは、HTML・CSSでWebサイトを作る際に必要なものを準備します。HTML・CSSのソースコードを記述するために、テキストエディタが必要です。テキストエディタは普段使っているもので問題ありません。テキストエディタをインストールしていない方は、メモ帳でも可能です。
続いて、HTML・CSSの表示結果を確認するために、Webブラウザが必要です。Webブラウザも特に種類は関係なく、パソコンに最初から入っているもので大丈夫です。
以上の2つがあれば、Webサイトを作成することはできます。ただし、作成したWebサイトをネット上に公開するためには、Webサーバーが必要です。Webサーバーは自分で立てたり、レンタルしたりしないといけません。今回は自分のパソコンでWebサイトを確認するまでを解説するので、Webサイトの公開方法は割愛します。
②HTMlの雛形を作る
次に、HTMLの雛形を作ります。HTMLは特定の書式に従って書く必要があります。書式に従わないと、ブラウザが正しくHTMLのソースコードを読み込むことができません。テキストエディタを開き、以下のようにHTMLの雛形を記述しましょう。
<html>
<head>
</head>
<body>
</body>
</html>雛形を記述したら、HTMLファイルを保存します。ファイル名は「test.html」としましょう。ファイルの拡張子を「html」にすることで、htmlファイルとして識別されます。
HTMLは、html要素・head要素・body要素、この3つが軸となっています。この3つのタグをまず記述しておきましょう。「html」は、この文書がHTMLの文書であることを示すタグです。このタグを記述することで、ブラウザが「これはHTMLなんだ」と認識することができます。「head」は、文書のメタデータを示すタグです。たとえば、headタグの中にWebサイトのタイトルを記述することが可能です。「body」は、文書の本文を示すタグです。bodyタグの中にWebページに表示する文章を記述していきます。
③表示する情報を記述する
続いて、Webページに表示する文章を記述します。先程解説したように、Webページに表示する文章は、bodyタグの中に記述していきます。bodyタグの中に、以下のように「Hello World」と記述してください。
<html>
<head>
</head>
<body>
Hello World
</body>
</html>こうすることで、Webページに「Hello World」と表示させることが可能です。
④ブラウザでチェックする
本当に「Hello World」と表示されているか、確認を行いましょう。確認を行うためには、ブラウザで作成したHTMLファイルを開く必要があります。HTMLファイルを開くときは、ファイル一覧から「test.html」をダブルクリックします。これで、ブラウザが起動し、「test.html」を開いてくれます。「test.html」を開いたら、「Hello World」と表示されている筈です。これでひとまずHTMLファイルの作成・確認は完了しました。
⑤HTMLにCSSを読み込ませる
続いて、CSSファイルを作成します。CSSファイルを作成する前に、HTMLにCSSを読み込ませるように設定しないといけません。CSSを読み込ませるには、headタグにCSSのファイル名を指定します。次のように記述してください。
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
Hello World
</body>
</html>linkタグは関連する文書を指定するためのものです。ここでは「test.css」を関連ファイルとして指定しています。このように記述することで、HTMLにCSSを読み込ませることが可能です。
⑥CSSを作成する
最後に、CSSファイルを作成しましょう。テキストエディタを開き、以下のように記述してください。
body {
font-weight: bold;
}記述したらファイルを保存します。ファイル名は「test.css」にしてください。先程同様、「test.html」を開いて確認しましょう。「Hello World」という文字が太字になっています。これはCSSファイルによって、Webページ上の文字を太字に変更したからです。
CSSは「セレクタ{プロパティ:値;}」というように記述するのが基本です。セレクタに「何を変更するのか」を記述します。上記の場合、「bodyタグ」を変更するようにしています。つまりbodyタグの中に書かれた文章全てを対象に変更しているのです。そしてプロパティと値に「どのように変更するのか」を記述します。上記の場合、文章を太字に変更しています。
これがCSSの書き方の基本になります。
HTML・CSSの独学方法
最後に、HTML・CSSの独学方法について解説します。HTML・CSSはそこまで難しいものではありません。プログラミングスクールで学ぶ手もありますが、HTML・CSSなら独学でも十分習得は可能でしょう。おすすめのHTMl・CSS独学方法について解説していきます。
書籍を活用する
HTML・CSSは書籍が多く販売されています。書籍を購入することで、HTML・CSSを体系的に身につけることが可能です。書籍は内容が整理されており、イラストなども追加されています。文章を読むのが苦手な方でも分かりやすいように書かれているものもあります。
ただし注意点として、書籍はなるべく最新のものを選びましょう。古い書籍ですと、HTMLやCSSのバージョンが昔のままになっている場合があります。HTML・CSSはバージョンによって書き方が異なる場合があり、古いバージョンの書き方を学ぶと、混乱する恐れがあるでしょう。書籍の出版日は確認した方が良いです。
学習サイトを使う
もう1つの方法は、学習サイトを使うことです。Progateやドットインストールなどには、HTML・CSSの教材があります。学習サイトは月額1,000円程度で活用できるため、かなりコスパに優れています。Progateはスライドで、ドットインストールは動画でHTML・CSSを学ぶことが可能です。どちらか自分にとって分かりやすい方を選択して、勉強していくのが良いでしょう。
HTML・CSSはWeb系エンジニアやWebデザイナーを目指すなら必須！ぜひ習得しよう！
本記事ではHTML・CSSについてまとめました。HTML・CSSとは何か、お分かり頂けたかと思います。HTMLやCSSはWebサイトをデザインする上で必ず使うものです。Web系エンジニアやWebデザイナーを目指すなら、HTML・CSSはまず習得しましょう。その上で、JavaScriptやPHPなどプログラミング言語も習得できると、より仕事の幅が広がるでしょう。本記事がHTML・CSSについて知りたい方にとって、有意義なものとなれば幸いです。
編集部オススメコンテンツ
アンドエンジニアへの取材依頼、情報提供などはこちらから
編集部おすすめコンテンツ
人気のある記事
アンドエンジニアへの取材依頼、情報提供などはこちらから