2021/02/22

CSSって何?CSSの特徴をHTMLとの違いや構造から解説!

プログラム

いざWebサイトを作ってみたいと思ったときに、HTMLとCSSって一体何なの?と疑問におもいませんでしたか。僕は正直、最初CSSとHTMLの違いが分かんなくて頭の中が混乱しました。

今回の記事では、CSSの特徴やHTMLとの違いを説明していて、これからWebサイトを作ってみたいっていう人やそもそも何故文章のデザインをCSSを使う必要があるのかよく分かんないっていう人に分かりやすく解説したいと思います。

CSSって何？

そもそもWebサイトを作る上で文章がないと、何のサイトか分かんないですよね。

その文章を作るために必要となるのがHTMLで、その文章にデザインをするのに必要となるのがCSSなんです。

CSSとは、Cascading Style Sheets(カスケーディングスタイルシート)の略で、その頭文字をとったものです。

HTMLとは

Webサイトの基本的な文章を形作るもの

CSSとは

CSSはHTMLのタグなど(要素)に対してどのような装飾をするのかを指定する

サイズ
色

基本的には、HTMLなどで作成されるウェブページにスタイルを適用する場合に、CSSを利用するのが一般的です。

HTMLとCSSの役割分担

CSSはどういうものかわかりましたか？

今度は具体的な使い方が分からないので、それぞれの分担について説明していきます。

ウェブページを作成する言語として、HTMLなどの言語で作成するというのは説明しましたよね。

HTMLの役割

HTMLはウェブページ内の各要素の意味や情報構造を定義するのに使いますが、
HTMLでは様々なタグを使用することで、ウェブページの装飾をすることも可能です。

装飾する

<center>や<font>タグ等

レイアウトをまとめる

<table>タグ等

しかし、文章を作る目的とウェブページの見た目を装飾する目的が混在していて扱いづらいかったため、この問題を解決するためにCSSがあります。

CSSの役割

CSSは、HTMLと組み合わせて使用します。
CSSは、ウェブページ用に作られたドキュメントが、画面に表示される際に、
各要素ごとにどのように修飾・表示させるかを指定することが可能です。

文字色をかえる

#example1 {
  color: green;
}

太字にする

p {
  font-weight: bold;
}

CSSのメリット

HTMLとCSSの関係が分かったら、CSSのメリットって何があるのってなりますよね。

そこで、CSSを使用することで、どのようなメリットがあるのかを紹介します。

① HTMLの文章構造を正しく記述できる。

HTMLで文章のスタイルを作成しようとすると、情報構造が複雑なコードになり、文章構造が分かりにくい問題が発生します。
また、複数人と共有しながらウェブページを作成する場合にも分かりにくくなってしまうという問題も発生します。

そこで、CSSを使用することによって、文章の構造に影響を与えずに、わかりやすいスタイルを作成することができます。
また、HTMLだけでは難しかったデザインもCSSを使うことにより難しいデザインも可能になりました。

② メンテナンス性の向上

HTMLとCSSを併用することにより、HTMLだけの場合だと見出しの色や文字のサイズを変更しようとすると、
その該当箇所すべての箇所を変更する必要があります。
CSSを使用することによりこのような該当箇所をすべて変更するということではなく、
対応する要素だけ修正すればよいので、管理しやすくなります。

1つのファイルでスタイルを変更、管理するのではなく、複数のファイルで外部スタイルシートを作成、
リンクさせることによりメンテナンス性の向上だけでなく、作業効率もあがります。

また、HTMLからCSSを使用することにより、スタイルをHTMLから分けることができた分HTMLで記載していたコードの量を減らすことができます。

③ コーディングが正しく記述されることによるSEO対策

上記でも触れましたが、HTMLとCSSをそれざれ役割分担することにより、HTMLの文章を記述する際に文章を正しく記述できるという点です。

正しく記述するということは、HTMLの要素を意味に沿ったコーディングができ、文章構造が分かりやすくなるというメリットがあります。

また、検索エンジンにもわかりやすくなり、検索エンジンは収集したWebサイトの文章構造を解釈して、その解釈によって各々の要素の優先順位を付けて蓄積します。

検索エンジンにとって分かりやすい文章構成は、Webサイトの優先順位に繋がりSEO対策になります。

④ HTMLページの軽量化

HTMLとCSSをそれぞれの役割に分けることによって、HTMLの文章を軽量化することができます。
そうすることで、ページの表示時間を短縮することができます。

検索エンジンの評価には、ページの表示時間の短さも含まれていて、上記に挙げたメリットによって、
メンテナンス性やHTMLページの軽量化をもたらすことができます。

まとめ

今回はCSSの基礎や構造、HTMLとの関連性を紹介しました。CSSの記述にはルールが多くありそれを習得するのは大変ですが、経験を積むことによって覚えていき作業がスムーズになっていきます。

また、CSSの登場により現在はHTMLとCSSの役割分担がされており、そのことにより様々なデザインが出来るようになりCSSを覚えることで難しいデザインを作成することが出来ます。

おさらいです。

CSSは各要素ごとに文章を修飾・表示を指定できるもの
HTMLの文章構造を正しく記述できる
ソースコードのメンテナンス性を向上することができる
SEO対策にもなる
ページの表示時間を短縮できる

今回紹介したことは基礎的な知識なので、今回の記事では紹介できなかった機能やプロパティがあるので、基礎を覚えてから、様々な方法に挑戦してみてください。