CSSとは

CSSとは「Cascading Style Sheets」の頭文字をとった略称で「スタイルシート」ともいわれます。CSSはWebページの情報構造を定義するHTMLと組み合わせて使用され、Webページの見た目(スタイル)の装飾を指定する言語です。

具体的には、Webページ全体のレイアウト(配置やサイズ等)や色合い・ボタンの形状・マウスカーソルを合わせた際の背景色などを指定できます。

CSSが必要な理由は、コンピューターや検索エンジンに対して、HTMLとの役割を分けて情報を伝えるためです。HTMLでもWebページの装飾に関する指示を与えられますが、HTMLは本来的には情報構造を指示するための言語です。

また、装飾の指示をHTMLに書き込むと、検索エンジンに情報が正しく理解されない恐れがあります。HTMLのソースコードが長くなると、検索エンジンがWebページ内の文章やワードを拾いにくくなります。つまり、SEO(検索エンジン最適化)に悪影響をもたらすのです。

よって、Webページの装飾に関してはCSSファイルに記述する、というのが、SEO対策上、Webページを作成する際の注意点となっています。

CSSをWebページに反映させるには、HTMLファイルの<head></head>部分に「<link rel=”stylesheet” href=”style.css”>」と書き込みます(CSSファイルが「style.css」の場合)。これで、CSSファイルとHTMLファイルを紐づけることができます。

CSSでは「セレクタ」「プロパティ」「値」の3つの要素を主に用います。「セレクタ」はどのHTMLタグに対して見た目を指定するか、「プロパティ」はどんな見た目の変更を指示するか、「値」は指示の度合いを意味すると考えてください。

h1{font-size:15px;]

例えば上記CSSの場合、セレクタに「h1」を指定し、プロパティに「font-size」を指定、そして値に「15px」を指定しています。意味としては、「HTMLファイルのh1タグのフォントサイズを15pxにする」という意味です。

また、プロパティと値は「{}」で囲って、プロパティと値の間は「:」、値の末には「;」を記述する必要があります。基本的には、このような文法にのっとりCSSファイルに記述していくことで、HTMLファイルの情報と紐付き、Webページの見た目(スタイル)を整えることが可能になる、という仕組みです。