| この記事のランク | |
|---|---|
| 読む時間 | 3分 |
| 重要度 | |
システム業界以外でも知ってる人が多く、飲食店やサービス業などを運営されている方は、集客のためのホームページ制作などで一度は耳にしたことがあるのではないでしょうか。
この記事では、HTMLとCSSで何ができるのか？をテーマに、HTML/CSSの特徴を実際のソースコードを見ながらご紹介いたします。
ななころTwitter(@nana_korobi04)でも情報発信していますので、
フォローいただけると嬉しいです！
HTML/CSSでできること
HTML/CSSはWeb制作の現場で、主に企業のブランディングや、商品・サービスの集客のためのWebサイトの開発で利用されています。
例えば下記のものを作成することができます。
- 企業サイトの作成
- 商品販促ページ（LP）作成
- 個人ブログの作成
HTMLとCSSの違い
HTMLとCSSはWebページを作成する際に両方の知識が必要なため、セットで紹介されることが多いですが、どのような違いがあるのでしょうか。
HTMLは1989年に開発された言語ですが、その後もバージョンを繰り返し、現在は2014年に開発されたHTML5が主流となっています。
CSSは1994年に開発され、最新バージョンはCSS3となっています。
HTMLの特徴
HTMLは文字に意味を与えるタグという記号で文字を囲うことで、見出しや本文、改行など、その文字がWebページのどういった役割りであるか定義することができます。
実際にHTMLで「Hello」を表示させるとこのようなソースコードとなります。
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
</head>
<body>
Hello
</body>
</html>表示結果
この<○○○>の部分がタグと呼ばれ、例えば<head>であれば、文字コードやページのタイトルなどを記述し、Webページを閲覧するユーザーには見えないタグとなります。
サンプルコードの<meta charset=”utf-8″ />という部分はUTF8という文字コードを指定して、文字化けを防いでいます。
実際にWebページに表示される箇所は<body>から</body>の間の「Hello」という文字になります。
なお、HTMLはインタプリンタ言語といってソースコードを上から1行づつバイナリに変換してコンピューターに渡していきます。
そのため、専用の開発環境を必要とせず、Windowsのメモ帳などのエディタにソースコードを記述して実際の動作を確認することができます。
メモ帳は「○○.txt」という拡張子になりますが、拡張子を「○○.html」にファイル名を変更してファイルを開けば、既定のブラウザに記述した文字が表示されるはずです。
次に「Hello」の文字を<strong>というタグで囲ってみるとどうでしょうか？
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
</head>
<body>
<strong>
Hello
</strong>
</body>
</html>表示結果
ファイルを保存して、再度開くと「Hello」という文字が太くなって強調されたかと思います。
このようにHTMLのタグにはそれぞれ意味があり、文字の役割によってタグを使い分けることで、皆さんが普段見ているようなWebページになります。
CSSの特徴
続いて、CSSでHTMLで記述した文字に色をつけてみましょう。
実際の開発現場では、HTMLとCSSはファイルを別けてソースコードを記述することが多いのですが、今回はイメージが伝わりやすいようにHTMLのソースコードにCSSのタグを記述します。
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
</head>
<style>
body {
color: blue;
}
</style>
<body>
Hello
</body>
</html>表示結果
次のbody{ color: blue;}という部分は、「<body>タグの文字の色を青字にする」という意味です。
「color」という部分がプロパティと呼ばれ、「文字の色を変える」という動作を決定しています。
「blue」は文字通り青色ですが、これは値と呼ばれ、「変える色は○○だ」という情報をセットする部分になります。
また、「blue」の部分を「red」や「green」に変えると、その色に変更させることができます。
開発の現場では、colerプロパティの色は英語表記ではなく、カラーコードと呼ばれる16進数を記述するのが一般的です。
例えば、「blue」のカラーコードは「#0000FF」となりますので、body{ color: #0000FF;}という記述になります。
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
</head>
<style>
body {
color: #0000FF;
}
</style>
<body>
Hello
</body>
</html>表示結果
CSSはHTMLで記述された文章を、人間が視覚的に読みやすく装飾するための言語ということがお分かりいただけたかと思います。
まとめ
HTML/CSSはパソコンとブラウザがあれば、直ぐに学習を始めることができることに加え、インターネットでもサンプルコードが数多く存在しており学習ハードルが高くありません。
HTML/CSSはフロントエンドエンジニアには必須の言語となるため、Webサイトの世界に興味がある方は、これを機会にぜひ学習を始めて下さい。
