ウェブサイト制作をするために必要な知識の1つとして、HTMLとCSSがあります。

サイト制作を行いたいと考えている方は耳にしたことがあると思いますが、使い方や仕組みなどはご存じでしょうか？

専門用語となるため、初めて見た時には難しいと感じた方もいるかもしれません。

しかし、仕組みを覚えることで簡単にサイト制作へ生かすことが可能です。

今回は、これからウェブサイト制作を行いたいと考えている方向けに、HTMLとCSSの基礎知識をご紹介します。

ウェブサイトの仕組み

HTMLとCSSを知るためには、まずウェブサイトがどのような仕組みで成り立っているかを理解する必要があります。

ウェブサイトは、インターネット上で閲覧ができる文章や画像を使った情報の集まりを指します。

インターネットがあれば見ることができるため、会社のパンフレットや名刺の代わりに使用したり、個人で日記を書くことも可能です。

サイトに掲載されている文章や画像は、サーバーと呼ばれるコンピューターに保管されており、ドメインという住所のようなものを使って表示させています。

そのため、ウェブサイトはコンピューターが理解できる言語を使って作成する必要があります。

そこで利用されるのが、HTMLとCSSです。

HTMLとは？

HTMLは、「Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)」という言葉の略称で、文章や画像がどのように構成されているかを伝えるためのコンピューター言語です。

コンピューターは、人間が使用している言語を読むことができたとしても、意味を理解することはできません。

そこで、その文章や画像にはどういった意味があるのか、他の文章や画像との関係性はどうなっているのか、といった情報をコンピューターに教えるために、HTMLが使用されます。

CSSとは？

CSSは「Cascading Style Sheets(カスケーディング・スタイル・シート)」という言葉の略称で、こちらは文章や画像の装飾やデザインを伝えるためのコンピューター言語です。

HTMLを使用すると、文章や画像の意味と構成をコンピューターに伝えることができます。

しかし、それだけではただ文章と画像が並ぶだけになり、読みやすく見やすいウェブサイトにはなりません。

そこで、装飾やデザインの説明書を用意することで、文章と画像を見やすい装飾付きで表示させているのです。

この装飾やデザインの説明に使われる言語がCSSとなっています。

HTMLとCSSの基本的な使い方

コンピューター用の言語であるHTMLとCSSは、どのようにして書くのでしょうか？

HTMLとCSSの基本的な書き方をご紹介します。

HTMLの書き方

HTMLは、タグと呼ばれるまとまりを使って構成を書いていきます。

タグにはそれぞれ意味があり、コンピューターはこのタグ部分を読み取ってサイトの内容を理解しています。

タグは「<>(半角不等号)」で区切られており、その中に書かれている情報がコンピューターの読み取る内容です。

例えば、ページのタイトルを伝える場合は、以下のような書き方をします。

<title>これはタイトルです。</title>

このように、文章や画像をタグでまとめていき、どういった意味があるかを記載していきます。

タイトル以外にも、見出しや段落、改行といったさまざまな意味を持つタグが用意されているため、ウェブサイトに掲載する文章や画像はタグを使って構成することが可能です。

CSSの書き方

CSSはHTMLのまとまりごとに装飾を指定する方法で書いていきます。

装飾をつけるまとまりのことをセレクタ、どのような装飾に対する指示か明記する部分をプロパティ、実際の装飾指示を値と呼び、これらは3つセットで使用する必要があります。

下記は、HTMLで見出しの意味を持つh1のまとまりの色を変更する場合の例です。

h1｛ color : red ; }

h1がセレクタ、colorがプロパティ、redが値となっており、見出し(h1)の色を赤色にしますという内容になります。

コンピューターが読み取りやすいように、セレクタは「{}(半角のなみカッコ)」でまとめ、プロパティと値を「:(半角のコロン)」で区切り、指示の終わりは「;(半角のセミコロン)」で示す必要があります。

ウェブサイトを表示させてみる

HTMLは、パソコンで使えるテキストエディターなどを使って書くことが可能です。

ただし、HTMLで書かれていることを示す必要があるため、ファイルの拡張子は「.html」とします。

使用しているエディターによって異なりますが、一般的にテキストエディターを使ってファイルを作成すると、拡張子は「.txt」になります。

HTMLで書いたファイルを保存したあと、この拡張子部分を「.html」と書き換えるだけで問題ありません。

このように作成したHTMLファイルを、インターネットに接続したサーバーにアップロードすることで、ウェブサイトを表示させることが可能です。

ウェブサイトとして表示させるためには他にも設定が必要ですが、基本的な仕組みとしては変わりありません。

ウェブサイトにデザインを適用する

HTMLとCSSは書き方や目的が違うため、別のファイルで用意をしなければなりません。

そのため、先述のHTMLファイルとは別でCSSファイルを作成します。

こちらも同様に、テキストエディターなどを利用してCSSを書き、拡張子を「.css」と変更するだけで作成可能です。

作成したCSSファイルは、HTMLファイルがあるサーバーと同じサーバーにアップロードします。

しかし、アップロードしただけではまだデザインは適用されません。

このままだと、どのHTMLファイルの装飾を指示したCSSファイルなのかわからないからです。

HTMLファイルとCSSファイルを紐づけるためには、HTMLファイル側でどのCSSでデザインするか指示を書き込む必要があります。

こうしてそれぞれのファイルを紐づけることで、初めてデザインが適用されます。

HTMLとCSSでできること・できないこと

ウェブサイトの構成とデザインを作成できるHTMLとCSSですが、役割が決まっているためそれぞれにできることとできないことがあります。

HTMLとCSSでできること

HTMLはウェブサイトの構成を伝え、CSSは装飾を伝えることができます。

これらを組み合わせることで、サイト全体をデザインしてコンテンツを自在に配置することが可能です。

また、CSSには簡単な動きを表現する方法も用意されているため、スクロールした時のアクションやマウス操作によるアニメーションなども付けることができます。

HTMLとCSSは現在もバージョンアップしているため、できることは今後増えていくかもしれません。

HTMLとCSSでできないこと

CSSで簡単な動きが表現できるとお伝えしましたが、用意されていない動きなどももちろんあります。

また、HTMLは用意された文章と画像を表示する役割しかないため、場合によって表示を切り替えたり、相手によって見せ方を変えるといった動的なページは作成できません。

そのため、日記のように同じ項目で別の内容を追加する、といった同じことを繰り返す場合も都度ファイルを変更しなければいけないため、管理にも手間がかかってしまいます。

ただし、HTMLとCSSでできないことは、他のシステムやプログラムによって補助が可能です。

より見やすいサイトを作成したり、管理の手間を省くためには、HTMLとCSS以外の言語を利用しています。

HTMLとCSSのまとめ

ウェブサイトの基本となるHTMLとCSSは、サイトの構成とデザインをまとめる指示書のような役割を持っています。

HTMLとCSSを組み合わせることで、見やすく読みやすいサイトを作成することが可能です。

細かいルールを覚える必要はありますが、テキストエディターでも作成できるため、基本の書き方がわかれば自分のパソコンなどで簡単に始めることができます。

ウェブサイト制作をしてみたいと思っている方は、ぜひHTMLファイルとCSSファイルを作成してみるところから始めてみてはいかがでしょうか。