HTML/CSSって何？

2019年12月23日

Webサイトが作るためにプログラミングを勉強したいけど、どの言語を勉強したらいいのかわからない。そんなあなたはぜひHTMLとCSSを勉強してみましょう。

HTMLとCSSはWebサイトを構成する基本となる言語です。

Web系のプログラミング言語といえばPHP、Rubyが有名ですが、実はこれらの言語だけでWebサイトを作ることはできません。

基本的にWebサイトはユーザーが閲覧するクライアントサイドと、データベースから情報を取得して応答したり、データベース自体を書き換えるなどの裏方の作業をするサーバサイドの2層構造になっています。

プログラミング言語が動いているのはこのうちサーバサイドで、クライアントサイドはプログラミング言語でHTMLを生成することで作っているので、結局すべてのwebサイトはHTMLで構成されているのです。

HTMLとは？

Hyper Text Markup Languageの略です。マークアップ言語とは、タグを用いて文章の構造を表す言語です。HTMLはwebページの構造を記述するのに用いられています。
例えばHTMLで用いられるタグとしては以下のものがあります。

タイトルを表すタグです。平文とは区別して大きめの太い文字で表示されます。

プレーンテキスト。つまり平文を表すタグです。

画像を埋め込むためのタグです。このタグが付いたものは画像として表示することができます。

リンクを表すタグです。クリックすると違うページにジャンプする単語や文章があると思いますが、それらすべてにこのタグが付いています。

HTMLの構造としてひとまとまりのブロックであることを示すタグです。

HTMLの構造として文字コードなどのメタ情報を記述するヘッダー部分であることを示すタグです。

HTMLの構造としてユーザーが実際に閲覧する部分であることを示すタグです。

また、最新のHTML5ではさらにheaderやfooterなど構造を表すタグが充実しています。
HTMLで書かれた構造をもとにコンピューターはwebページを表示しています。

一言でいうとwebサイトの見映えをよくするのがCSSです。

HTMLだけで作ったサイトはすべての要素が左寄せ、明朝体、画像の大きさは固定、文字色は青というそっけないものです。

綺麗なサイトを作るにはHTMLという骨格に装飾を加えたり、構造を整えて見映えをよくするCSSが不可欠です。

見映えをよくするといっても、どんなことができるのか具体的な例をご紹介します。

フォント、文字の大きさ、文字の色だけでなくイタリックや太字など文字に装飾をすることができます。

デフォルトでは文字も画像もすべて左寄せの縦一列で表示されますが、CSSで横並びに写真を並べたり、画像の大きさを変えたり、タイトルだけ中央寄せにしたりできます。

背景色をつけることができます。

背景色を1秒ごとに変えたり、背景を動かしたり、クリックしたボタンの色を変えたりといった簡単なアニメーションはCSSだけで実装できちゃいます。

すべてのwebサイトはHTMLから作られており、CSSはHTMLを装飾することでサイトの見た目を綺麗にするものです。基本的にすべてのWebサイトでHTML/CSSは使われています。

どちらもWebサイトの基礎となる技術ですので、HTML/CSSの知識はプログラミング言語を勉強する上でも役に立ちます。