今回はWebページを作る上で必要不可欠なHTML（HyperText Markup Language）とCSS (Cascading Style Sheets)について紹介します。
この2つはプログラミングを学ぼうと思ったときに最初に手を付けるものとしてよく挙げられるかと思いますが、実際にこれらを使用して何ができるのかをよく知らない方もいるのではないでしょうか。
今回はそれぞれがどのようなものなのかを実際のコードをお見せしながら紹介したいと思います。
HTMLとCSSはプログラミング言語ではない？
たまに混同されているのを見ますが、HTMLとCSSはプログラミング言語ではありません。
HTMLはマークアップ言語、CSSはスタイルシート言語と呼ばれる言語になります。
プログラミング言語とは条件をもとに処理を行い、その結果を出力する言語になります。
例えば、「クリックされたら非表示になっていた要素を表示する」、「〇〇という処理が発生したらエラー文を出力する」といった指定をしています。しかし、実際にこれらの記述そのものがサイト上に現れることはありません。
一方でマークアップ言語とは、計算処理などを行わず、書かれた内容をそのままコンピュータが読み込む言語になります。
また、スタイルシート言語はマークアップ言語で記述された文章に色をつけたり、サイズや余白を調整して装飾するための言語になります。
HTML、CSSはそれぞれ代表的なマークアップ言語、スタイルシート言語になります。
実際にHTMLを書いてみる
HTMLで文字を打つ際は、タグというもので囲い、その中にテキストを入力することで実際のページに表示される仕組みになっています。以下は例になります。
今回は<head>タグについての詳しい説明は省略しますので、まずは以下の部分だけ見てもらえれば問題ありません。
上記の例では<body>というタグで全体を囲み、その中の文言をそれぞれ<h1>というタグと<p>というタグでそれぞれ囲っています。これによって実際に表示されるものが以下になります。
CSS何も設定していない場合、ブラウザでデフォルトで指定されているCSSが当たっているため、最初から余白や文字の大きさが指定されているためこのような表示になっています。これらを調整するために次はCSSを記載します。
実際にCSSを書いてみる
HTMLへの記述
ウェブページのスタイルを設定するためにCSSを書いてみます。CSSを読み込む際は、HTMLに以下のような記述をします。
headタグ内に<link rel=”stylesheet” href=”style.css”>というCSSファイルを読み込むための記述をしました。
こちらも詳細な説明省きますが、CSSを読み込むためにこのような記述をするんだということだけ認識してもらえたらと思います。
今回は先ほど書いたHTMLの見た目を変更します。
CSSへの記述
以下の記述ではh1タグの文字とpタグの文字の色をそれぞれ赤と青に設定しています。
CSSでスタイルを指定する仕組みは以下のようになります。（）で囲った部分が上記の例でそれぞれ該当する箇所になります。
- セレクタ（h1やp）・・・スタイルを当てたいHTML要素を指定します。
- プロパティ（color）・・・スタイルの種類を表します。色の指定だけでなく、文字のサイズやウェイト、余白など様々なプロパティが存在し、それらをかけあわせてスタイルを指定します。
- 値（redやblue）・・・プロパティの値になります。どのようなスタイルにするのかをここで指定することで最終的な見た目が決定します。
図で表すと以下のようになります。
[セレクタ] {
[プロパティ]: [値];
}
今回の場合↓
h1 { ←セレクタ
color: red; ←プロパティ: 値
}
実際に上記CSSを指定した表示結果が以下になります。
それぞれ赤色と青色に変わっているかと思います。
複数プロパティを指定する場合は以下のようになります。
class属性を指定する
上記の例ではタグに直接CSSを指定してましたが、それぞれのタグにclass属性を指定することで、個別の要素ごとにCSSを指定することも可能です。属性とはHTMLのタグに補足情報を与えるもので、開始タグの中に「属性=”属性値”」という書き方をします。上記の例をもとに属性の使用方法について記載します。
pタグで囲まれた文章を1つ追加しました。先ほどのCSSをそのまま使用すると以下のように表示されます。
pタグはすべて青色で指定しているので新しく追加したpタグの文字も青色になっています。これをclass属性を指定してまた別の色にしたいと思います。
追加の文章にtextというclass属性を付与しました。
追加した文章を緑色にするためのCSSを指定します。class属性のCSSを指定する際は、セレクタにドットをつける必要があります。
実際の表示結果がこちらになります。class属性を指定したことにより、個別で色を変えることができました。
このようにclass属性を指定することで個別の要素にCSSを当てることも可能です。
逆に同じ見た目にしたい場合は、1つのCSSを設定することで複数の同じ要素を作ることもできます。
HTMLとCSSの仕組みに関しては、上記の点を押さえれば最低限理解できるかと思います。
最後に
今回はHTMLとCSSの仕組みについて非常に初歩的な内容になりますが紹介させていただきました。
今回の一例では複雑なCSSは使用せずに色の変更だけを行いましたが、実際に1つのページやサイトを作るとなると、HTMLの記述はより複雑になり、CSSも様々なプロパティを使用して作り上げていきます。
また、一目見ただけではどのように再現するのかわからないようなデザインが来ることもあります。
これらを踏まえると、1から学習をしてHTMLやCSSのスキルを習得し、1つのサイトを作れるようになるまでにはそれなりの苦労を伴うかと思います。
ただ、HTMLやCSSはフロントエンドにしても、バックエンドにしても必ず使用する言語ですので、エンジニアを目指す上で習得は必須です。
ただ、習得の難易度が最も低いのもHTMLやCSSだと思われるので、まずここから学習してみるのも良いのではないでしょうか。
