CSSをHTMLに読み込む方法
この記事では、CSSについて言葉の意味と役割、HTMLとの違いやHTMLに組み込む方法とSEOへの影響などを解説しています。
CSSはwebページのデザイン設定を簡単にし、見やすくしてくれるのがCSSです。
CSSとは何か
CSSは、「カスケーディングスタイルシート（Cascading Style Sheets）」の頭文字を取った言葉で、Webページのレイアウトやデザインを整えるための言語です。基本的にHTMLと組み合わせて使用します。
CSSの記述は以下のように行います。
セレクタ {
プロパティ：値
}
「セレクタ」はデザイン設定の適用先を示します。タグ名、class名、id名などを指定します。
「プロパティ」はセレクタで指定された場所の変更内容部分を示すものです。文字色変更、配置など変更部分を指定します。
「値」では、プロパティで指定された変更部分の内容を示します。プロパティで文字色変更が指定されていたら、値で色を指定することになります。
CSSの役割
CSSは、webページのレイアウトを揃えたり装飾を施したりすることで、見た目を整え分かりやすくする役割を果たします。
プロパティの値を設定することで、テキストの大小・色の変更や下線付けなどの装飾、配置を変えレイアウトを整えることが可能です。
（プロパティの一例）
「color」 文字色の設定
「border」 枠線の設定
「text-align」 文字の配置を設定
「font-family」 文字の種類を設定
「background-color」 背景色の設定
HTMLとCSS
HTMLを使ってデザインやレイアウトの変更も可能ですが、通常はHTMLのみでデザインやレイアウトの指定をすることはありません。
なぜなら、HTMLでのデザイン指定は、コードが複雑になり、デザイン変更が煩雑になってしまうためです。また、複雑化したコードはコンピュータにとっても読みにくく、結果として読み込みに時間がががる等のデメリットが生じます。
以上のことから、webページの情報についてはHTML、デザインについてはCSSと役割分担をしているのです。
HTMLにCSSを組み込む方法
HTMLにCSSを組み込みデザインを設定する方法には、大きく分けて2つあります。1つはHTMLファイル内にCSSを書き込む方法、2つ目はCSSファイルを別途用意してHTMLファイルに読み込む方法です。
1. HTMLファイル内にCSSを書き込む方法
これには2種類のやり方があります。
1-1 「Styleタグ」を用いる
HTMLの<head>内に<style>タグを入れ、その中にCSSを書き込みます。
上記の見出し部分の色を変更します。
h1{color:red;} のCSSを挿入します。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>サンプル</title>
<style>
h1{color:red;}
</style>
</head>
<body>
<h1>ここは見出しです</h1>
<p>CSSについて説明しています。</p>
</body>
</html>
見出しの色が赤になりました。
1-2 HTMLタグ中にCSSを書く（インラインに書く）
スタイルを設定したい部分のタグにstyle属性を書き込みます。
再度見出しの色を変更します。今度は青くしてみます。
この場合は、style=”color:blue”> をh1タグに加えます。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>サンプル</title>
</head>
<body>
<h1 style=”color:blue”>ここは見出しです</h1>
<p>CSSについて説明しています。</p>
</body>
</html>
2. CSSファイルを別途用意してHTMLファイルに読み込む方法
まず、CSSを記述したファイルを用意します。テキストエディタでCSSを記述し、任意のファイル名を付けます。この際、拡張子は「.css」にします。
次に、HTMLのhead内に、このCSSファイルを読み込むように記述します。
<link rel=”stylesheet” href=”style1.css”>
前項と同様に見出しの色を変えましょう。黒から紫にします。
((CSSサンプル))
h1{
color: purple;
}
ファイル名は「colour.css」としました。このCSSファイルを読み込むようにHTML内で指示します。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>サンプル</title>
<link rel=”stylesheet” href=”color.css”>
</head>
<body>
<h1>ここは見出しです</h1>
<p>CSSについて説明しています。</p>
</body>
</html>
見出しの色が変わりました。
また、CSSファイルの中で、さらに別のCSSファイルを読み込むことができます。
@import url(“ファイル名.css”);
を加えると別CSSを読み込むことが可能になります。
以上、HTMLに書き込む方法と別ファイルを作る方法を説明しました。通常は2.で説明した別ファイルを作成し読み込む方法が一般的です。
CSSを別ファイルに用意しておけば、ページごとにCSSを記述する必要がなく、どのページにも簡単に同じスタイルを適用することができるからです。またhtmlコードが増えないため、コードがスッキリし見やすくなる利点があります。
逆に、どのページにも同じスタイルが適用されるため、部分的に変更することができません。ページごとにスタイルを変えたいとき（Styleタグを使う）、ページ内の一部分だけ変えたいときはstyle属性を使うなど、場合に応じて使い分けるのが良いでしょう。
CSS読み込みの優先順位
順位は
1-2 ＞ 1-1 ＞ 2
となり、HTMLタグ中にCSSを書く方法が最優先されます。
例えば見出しの色変更をする場合、styleタグを用いて赤を指定、CSSファイルでは紫が指定してあると、結果は赤の見出しになります。（例1）また、styleタグを用いて赤を指定、HTML中にCSSを書く方法で青を指定してあると、見出しは青色になります。（例2）
（例1）
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>サンプル</title>
<link rel=”stylesheet” href=”colour.css”> → この部分は無効
<style>
h1{color:red;} → 太字の部分が優先
</style>
</head>
<body>
<h1>ここは見出しです</h1>
<p>CSSについて説明しています。</p>
</body>
</html>
（例2）
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>サンプル</title>
<style>
h1{color:red;} → この部分は無効
</style>
</head>
<body>
<h1 style=”color:blue”>ここは見出しです</h1> → 太字の部分が優先
<p>CSSについて説明しています。</p>
</body>
</html>
SEO対策とCSS
最後にCSSのSEOに対する影響について説明します。
CSSはSEOに直接の影響を与えることはない、といわれています。しかし、検索エンジンはページ全体の情報の中で、特に冒頭部分の記述を重視します。
ページ上部に、やたらとCSS情報などが書かれていると、本来すぐに文章が始まる部分にこれらが書かれていることでページ全体のキーワードの割合が減ってしまいます。よって検索エンジンに登録されにくくなってしまうことが起こります。
また、HTMLコードが長くなる分読み込み速度も遅くなり、ページの表示速度にも影響してきます。結果、ユーザーの利便性を下げることになりかねません。
これらのことから、CSSの設定が適切でないとSEOに影響が出るということが言えるでしょう。
Googleから、CSSの記述についてガイドラインが公表されています。興味のある方は参照してください。
参照Google HTML/CSS スタイル ガイドhttps://google.github.io/styleguide/htmlcssguide.html#CSS_Style_Rules
まとめ
webページのデザインを整え見やすくするために、CSSを使用します。HTMLで直接指定するよりも簡単で、HTMLコードが複雑になることを防ぐことができます。
CSSの設定には、別ファイルを作成し読み込む方法が一般的です。全ページに同様のスタイルを適用することが容易であるからです。またHTMLコードの軽量化になり、SEOにも良い影響を及ぼすことが期待できます。
CSSを上手に使って、見やすく整ったサイトを作成しましょう。
SEO対策済のWEBサービス開発を依頼するなら
エネセーブでは、SEO対策済のWebサービス開発を得意としております。
SEO対策済のWebサービスの開発をご検討の方は、是非以下よりお問い合わせ下さい。
