HTMLを魅力的に装飾するスタイルシートって何？

ひなドリ

スタイルシートって何？

わかドリ

スタイルシートはHTMLを装飾して魅力的にするためのものだよ。最近のWebページはほとんどの場合HTMLとセットで作成するね。

この記事でわかること

スタイルシートとは

前回のゼロわかはこちら▼

Contents

スタイルシートとは？HTMLを装飾するもの
スタイルシートがないとどうなる？
CSSの基本構造
簡単なサンプル
このページではこれだけ覚える！
- スタイルシートはHTMLを装飾する
今回のゼロわか

スタイルシートとは？HTMLを装飾するもの

スタイルシートはHTMLを装飾するためのプログラミング言語のひとつです。これがあることで、サイト全体に同じデザインを適用したり、レイアウトをそろえたりすることが出来ます。

スタイルシートには、主に以下の3種類があります。

インラインスタイルシート
内部スタイルシート
外部スタイルシート

インラインスタイルシート

インラインスタイルシート HTMLの要素のstyle属性に直接スタイルを記述する方法です。例えば、<p style=”color: red;”>テキスト</p>のように、タグの中に直接スタイルを記述します。

最近のサイトでは、外部CSSファイルを読み込んで統一感を出すことが主流のため、あまり使うことはないでしょう。

また、一つ一つの要素に書かなければならず、修正が大変なこともデメリットとして挙げられます。

内部スタイルシート

内部スタイルシート HTMLのhead要素内に<style>タグを追加してスタイルを記述する方法です。例えば、<style> p { color: red; } </style>のように、HTMLファイル内でスタイルを定義します。

こちらも、頻繁に使うことはないでしょう。

ただし、特殊なページのみデザインを変える時などに使われる可能性はあります。

外部スタイルシート

HTMLファイルとは別のCSSファイルを作成し、HTMLのhead要素内に<link>タグを追加してCSSファイルを読み込む方法です。例えば、<link rel=”stylesheet” type=”text/css” href=”style.css”>のように、HTMLファイル内で外部スタイルシートを指定します。

ほとんどの場合、スタイルシート（CSS）と言えばこちらを指します。

これらのスタイルシートを使用することで、HTMLの要素にスタイルを適用し、ウェブページをより魅力的なものにすることができます。

スタイルシートがないとどうなる？

スタイルシートがない場合、Webページは基本的にHTMLのマークアップのみで表示され、非常にシンプルな見た目になります。レイアウトが崩れたり、やたらと空白が目立ったり、画像がちゃんと表示されなかったり場合もあるでしょう。

Webブラウザはデフォルトのスタイルを持っており、スタイルシートがない場合はこれが適用され、結果として想定していないページの見た目や機能になったりします。

また、マウスを特定の場所に乗せたときのホバーアクションやアニメーションを追加することが難しかったりします。

つまり、スタイルシートがないと想定外の動きや見た目になってしまい、わかりにくいWebページになってしまう可能性が高いということが言えます。

このように、スタイルシートは今やWebページにおいてなくてはならない存在になっていると言えるでしょう。

CSSの基本構造

セレクタ

スタイルを適用する要素を指定する部分をセレクタと言います。セレクタには、要素名、クラス名、ID名などが使われます。

プロパティ

プロパティはどんな装飾をするかを定義したもので、色、フォント、背景、余白などがあります。

値

プロパティに対する値を設定する箇所です。プロパティが色の場合、赤、青などを指定することが出来ます。

簡単なサンプル

<!DOCTYPE html>
<html>
  <head>
    <title>サンプル</title>
    <style>h1 {
  color: blue;
  font-size: 32px;
  text-align: center;
}

p {
  color: green;
  font-size: 24px;
  line-height: 1.5;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}</style>
  </head>
  <body>
    <h1>こんにちは、CSSのサンプルです！</h1>
    <p>ここにテキストがあります。</p>
  </body>
</html>

※ページの都合上、内部スタイルシートで書いてます。