CSSって何？初心者でも分かるHTML

2024.03.11

SEO

#CSS #webサイト

HTMLで作成されるwebサイトにレイアウトを適用する際は、スタイルシートのうちの一つであるCSSが使われます。CSSとはスタイルシート(別名：カスケーディング・スタイルシート)と呼ばれ、webサイトのレイアウトを指定するための言語です。 HTMLがwebサイト内の構造を定義するのに対してCSSは画面に表示される際の文字の色や背景の色、大きさなどを指定します。このように、CSSはHTMLと共にwebサイトの見た目を整える言語として用いられ、これら2つは切っても切り離せないものです。

AI要約

ChatGPT4で要約生成中

なぜCSSが必要なのか

先述の通りCSSは、HTMLによって構造化されたwebページのレイアウトを整える役割を担います。HTMLからでもwebページのレイアウトを整えることは可能ですが、一般的にこのような使い方はしません。そして、通常これらのファイルは別々に記述されます。

ではなぜHTMLとCSSは別のファイルに記述されるのか？なぜなら、HTMLは検索順位を決定付ける要素だからです。レイアウトを整えるためにHTMLを使ってしまうとwebページの情報が検索エンジンに正しく伝わりにくくなってしまいます。そして、webページ内の重要な情報が検索エンジンに認識されにくくなってしまい、webサイトとしての評価が低下してしまうからです。

CSSの働きについて紹介
CSSの書き方は非常に簡単です。まず、サイト内のレイアウトを変えたい部分を指定し、プロパティと値を入力します。プロパティは各要素の文字や色などの状態を指します。そして入力したプロパティに対して任意の値を入力していきます。この値によってwebページのレイアウトが変わっていきます。

HTMLだけでは味気ないレイアウトになってしまいます。
<p>CSSについて</p>

CSSを付け加えると下のように、色が変わったりします。

<p>CSSについて</p>

次に、書き方のルールに関して少し説明しておきます。レイアウトを指定したい要素をクラス指定し、下のように記述を行います。.content{
font-size:14px;
border-radius:50%;
}
ここで指定したい要素に“.(ドット)”もしくは“#(シャープ)”を付けます。上の例では“.(ドット)”となっていますが、これはclass指定をする際に使われます。idで要素を指定する際は“#(シャープ)”を付けます。font-sizeやcolorなどのプロパティ名前は覚えるしかありません。しかも、使われるプロパティは大体決まっているので、すぐ覚えられると思います。

一応、よく使われるプロパティに関して下に載せておきます。
background（背景）
border（枠線)
color（文字の色)
font-size（文字サイズ）
font-weight（文字の太さ）
height（縦幅）
line-height（行間）
margin（外側の余白）
padding（内側の余白）
text-align（左/中央/右揃え）
width（横幅）

基本的に、プログラミング言語とは異なり前後の関係性などを考える必要がない“マークアップ言語”と呼ばれるものです。一対一対応なので全然難しいものではありません。
クラス指定に関してはidとclassがありますが、idは各要素に一回しか使えないのでclass指定の方が無難です。