スタイルシート(CSS)入門編その1|ゼロからのWeb制作 Vol.4

こんにちは、鈴木です。
前回、最後に次回はHTMLタグについてと書くと言いましたが、今回からはスタイルシートについて書いてこうと思います。

というのもHTML/CSSを学んでいて、自分はあまりCSSについて理解していないと思ったので
これから何回かに分けてCSSについてアウトプットをしていこうと思います。

 

目次

  1. CSSとは
  2. CSSのメリット
  3. CSSの書き方
  4. HTMLにCSSを適用させる

 

1. CSSとは

「スタイルシート (Style Sheet)」とは、HTMLやXHTMLに代表されるWeb文書の表示やレイアウト、デザインなどを行う技術です。
「CSS(Cascading Style Sheets)」とは、スタイルシートの技術の一つです。
CSSは、「デザイン」と「文書構造」が切り離されることが最大のメリットです。スタイルシートのおかげで、HTML文書に手を加えなくても後で自由にデザインを修正・変更できるようになり、Webページ製作・維持管理が非常に楽になりました。

 

2. CSSのメリット

文書構造を保ったままスタイルの指定ができる

HTMLで文書のスタイルを制御しようとすると、文書の内容とは異なるタグを使用するため、文章構造が分かりにくくなります。
CSSを使用することで文書構造に影響を与えずにスタイルを制御することができます。

 

メンテナンス性の向上

HTMLでスタイルを指定すると、見出しタグが使用されている箇所すべてを変更する必要があります。
CSSでは、スタイルを一括で管理することができ、複数の文書でスタイルを共有できるため、メンテナンス性が向上します。

 

SEO効果、アクセシビリティの向上

HTMLによるスタイルの制御をやめ、情報を適切にマークアップすることで検索エンジンに正しく認識されるウェブページになります。
CSSでスタイルを指定することで、文書から余分なマークアップをなくすことでウェブページの計量化ができます。
CSSを使用することで、SEO効果やアクセスビリティの向上が期待できます。

 

3.CSSの書き方

CSSの基本書式は(セレクタ、プロパティ、値)になります。

例えば、

h1{font-size: 40px;}

は、タグh1の範囲の文字の大きさを40pxにします。

ここでh1はセレクタ、font-sizeはプロパティ40pxはプロパティの値になります。

セレクタはスタイルシートを適用する対象のことです。 上記の例ではh要素が指定されていますが、
セレクタの種類を使い分けることで様々な対象にスタイルを適用することが可能です。

プロパティは適用するスタイルの種類のことです。 上記の例では文字の大きさを指定するfont-sizeプロパティの値に40pxを指定しています。

また、

h1{font-size: 40px;color: blue;}

このようにスタイル宣言をセミコロン(;)で区切ることで複数のスタイルを適用させることができます。

上記のスタイルを

h1{
font-size: 40px;
color: blue;
}

に改行や半角スペースをしてもスタイルに影響しません。

 

4. HTMLにCSSを適用させる

HTMLにCSSを適用させる方法は大きく分けて以下の3つがあります。

要素にstyle属性を追加して適用する

要素にstyle属性を追加して、HTMLソース中に直接スタイル指定を記述します。

<!DOVCTYPE html>
<html lang="ja">
<head>
<meta name="Content-Style-Type" content="text/css">
</head>
<body>
<h1 style=" font-size: 40px;color: blue;"> ゼロからのWeb制作 Vol.1|制作の流れ</h1>
</body>
</html>

style属性によるスタイル指定は、部分的にスタイルを優先指定する際などには便利ですが、 HTMLソースが複雑になってスタイル管理が大変です。効率の良いスタイル管理する場合には、 CSS部分を外部ファイル化するのが一般的です。

<style>要素で文書単位に適用する

HTML文書の<head>要素内に<style>要素を記述して、文書単位にスタイルシートを設定します。 適用されるスタイルがCSSによるものであることをブラウザなどに知らせるために<style>要素のtype属性の値にはtext/cssを指定します。

<!DOCTYPE html>
<html lang="ja">
<head>
<style type="text/css">
<!--
h1{ " font-size: 40px;color: blue;"}
-->
</style>
</head>
<body>
<h1>ゼロからのWeb制作 Vol.1|制作の流れ </h1>
</body>
</html>

<link>要素で外部CSSファイルを呼び出して適用する

スタイルシートを記述したCSSファイルをHTMLファイルとは別に作成して、HTMLファイル内から呼び出します。 呼び出しには、HTML文書の<head>要素内に<link>要素を記述して、外部CSSファイルを指定します。 適用されるスタイルがCSSによるものであることをブラウザなどに知らせるために、<link>要素のtype属性の値にはtext/cssを指定します。

<!DOCTYPE html>
<html lang="ja">
<html>
<head>
<link rel="stylesheet" type="text/css" href="xxx.css">
</head>
<body>
<h1>ゼロからのWeb制作 Vol.1|制作の流れ </h1>
</body>
</html>

次回もCSSについて書いていこうと思います。