“シリーズHTMLを学ぶ”第三回 | ウェブクリエイター

CSSの移り変わり

1996

CSS1

1998

CSS2

2011

CSS2.1

2012

Media Queries (CSS3)

2013

Media Queries Level 4（CSS4）草案

2016

CSS2.2草案

2020

Media Queries Level 5（CSS5）草案

CSSとは

CSSはCascading Style Sheets(カスケーディングスタイルシート)の略で、HTML要素にスタイルを適用して見た目やレイアウトを設定するための言語です。以下に、基本的なCSSの使い方について解説します。

セレクタ

CSSでは、スタイルを適用するHTML要素を選択するためにセレクタを使用します。セレクタは要素の種類、class、IDなどによって指定します。

要素名セレクタ: 要素のタグ名を指定します。（例: p, h1, div）
classセレクタ: 要素にクラス属性を追加し、クラスセレクタと組み合わせて使用します。（例: .class-name）
IDセレクタ: 要素にID属性を追加し、IDセレクタと組み合わせて使用します。（例: ♯id-name）

プロパティと値

CSSでは、プロパティと値のペアを使用してスタイルを設定します。プロパティは要素の特定の特性（例: 色、フォントサイズ、余白）を表し、値はそのプロパティに適用される具体的な設定値を指定します。

プロパティ: 値;

カスケーディング

カスケーディングとは、複数のスタイルが同じ要素に適用された場合に優先順位に基づいてスタイルが適用される仕組みです。

同じセレクタのスタイル: 後に指定されたスタイルが優先されます。
より具体的なセレクタ: セレクタの特定性が高いほど、優先度が高くなります。
!important修飾子: スタイル宣言に!importantを付けます。

ただし、!importantは使用に慎重を要する必要があります。適切に使用しないと、スタイルの管理や保守性が低下する可能性があります。通常は!importantを使用する前に、セレクタの詳細度を調整したり、スタイルの再設計を検討することをお勧めします。!importantは最終手段として使用し、特定の状況でのみ使用するようにしましょう。

宣言ブロック

宣言ブロックは、対象のセレクタの、スタイルの内容を指定します。宣言ブロックは、波括弧{ }で囲みます。

宣言ブロックの中に、プロパティと値という2つの要素でスタイルを指定します。プロパティは、スタイルの種類を指定します。値は、プロパティの具体的な設定値を指定します。プロパティと値はコロン「:」で区切ります。また、複数のプロパティと値を書く場合は、セミコロン「;」で区切ります。まとめると、基本的に以下のように記述していきます。

セレクタ {
プロパティ: 値;
プロパティ: 値;
}

例えば、以下のように書くと、すべてのタグに対して、文字色を赤にし、文字サイズを20pxにします。

p {
  color: red;
  font-size: 20px;
}

レイアウトとボックスモデル

CSSを使用して要素のレイアウトやボックスモデル（要素の幅、高さ、余白、パディング）を制御することができます。

幅と高さ: width、heightプロパティを使用して要素の幅と高さを指定します。
余白とパディング: margin、paddingプロパティを使用して要素の外側の余白や内側の余白（パディング）を指定します。

クラスとID

クラスとIDはHTML要素に追加される属性であり、CSSで要素を選択してスタイルを適用する際に使用します。

クラス: 複数の要素に同じスタイルを適用するために使用します。（例: <div class=”container”>）
ID: 唯一の要素に対して特定のスタイルを適用するために使用します。（例: <h1 id=”title”>）

スタイルの適用方法

CSSはHTML内に直接記述するか、外部のCSSファイルとして分離して使用することができます。

直接HTML内に記述する場合は、<style>タグ内にCSSコードを書きます。
外部のCSSファイルを使用する場合は、<link>タグを使用してHTMLファイルとCSSファイルを関連付けます。

この選択が業務で行う際に大切な要素になってくると思います。サイト制作を行うと構築することに重きをおいてしまい、後で、変更や更新することを視野に入れていないことがあります。分離した外部のCSSファイルを最初から分けておく方法を強くお勧めいたします。

リセット/ノーマライズスタイルシート:ブラウザ間のスタイルの差異をリセットし、基本的なスタイルを統一するためのスタイルシートです。

グローバルスタイルシート:サイト全体の基本的なスタイルを管理します。ヘッダ、フッタ、ナビゲーションなどの共通要素のスタイルを定義します。

テーマスタイルシート:各ページの独自のスタイルを管理します。特定のページに関連するスタイルや要素の位置調整などを行います。

レイアウトスタイルシート:ページのレイアウトに関するスタイルを管理します。グリッドシステム、カラムレイアウト、セクションの配置など、ページ全体の構造を制御するスタイルを定義します。

コンポーネントスタイルシート:再利用可能なコンポーネントのスタイルを管理します。ボタン、モーダル、フォームなどの個別のコンポーネントに関連するスタイルを定義します。

ページスタイルシート:サイトのテーマに関連するスタイルを管理します。異なるテーマの色、フォント、アイコンなどを定義し、簡単に切り替えることができます。

以下に参考のコードを記します。ノーマライズは実用的なCSSを提供しておられるものを利用させてもらうことで、後日リンク先だけを変更することで、最新の環境に対応させていく事が出来ます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  
  <!-- 1. リセット/ノーマライズスタイルシート -->
  <link rel="stylesheet" href="https://exsample.com/reset.css">
  <link rel="stylesheet" href="https://sample.com/normalize.css">
  <!-- 2. グローバルスタイルシート -->
  <link rel="stylesheet" href="global.css">
  <!-- 3. テーマスタイルシート -->
  <link rel="stylesheet" href="テーマ名.css">
  <!-- 4. レイアウトスタイルシート -->
  <link rel="stylesheet" href="layout.css">
  <!-- 5. コンポーネントスタイルシート -->
  <link rel="stylesheet" href="コンポーネント名.css">
  <!-- 6. ページスタイルシート -->
  <link rel="stylesheet" href="ページ名.css">

</head>
<body>
  <!-- ここにHTMLコンテンツが入ります -->
</body>
</html>

このようにスタイルシートを分類することで、役割ごとにファイルが整理され、後で調整する際に特定のスタイルを素早く見つけることができます。ファイル名は、プロジェクトの要件や好みに応じて変更することもできます。

実際には、目次などを書いた、空のファイルだけを準備しておき、直接HTML内に書いたものや、style.cssなどの代表的なファイルに記述していき、適宜、整理しながら構築すると良いかなと思います。

コメントアウトを使った目次

「/*」と「*/」の間は、ソースコードとして認識されず、無効化されます。このルールを利用して、目次を作っておくと便利です。著作権、著作者、更新日付なども書いておくと後日参考になります。

/*
*	※Licence: CC3.0 
*	http://creativecommons.org/licenses/by/3.0/deed.ja
*
*	Title: 4.レイアウトスタイルシート
*	URI: https://example.com/
*	Last Modified: 2023-07-02
*	Author: Yoshiya Etoh
*
*	4-1.container
*	4-2.[Sngle column]
*		4-2-1.div#utilities
*	4-3.[Double column]
*		4-3-1.div#main
*		4-3-2.div#utilities
*/

/*======================================

	4-1.Container Layout
	
=======================================*/

body {
	margin: 1em 25px; /* 左右余白 */
	text-align: center;
}

CSSテンプレート

このCSSのように基本のスタイルをベースにしてテンプレート化しておき、変更点を確認しながら学習していくようにしましょう。コメント行に詳しく説明を書き込むようにしておくと、後日、分かりやすいと思います。業務でウェブサイトの更新をするような場合、制作から時間が経つと、構造が分からなくなるので、後で分かるようにコメントアウトに記述しておきましょう。

テンプレートをコピーして、テキストエディタに貼り付け、「style.css」と名前を付けて保存します。“シリーズHTMLを学ぶ”第二回で、「テンプレートの使い方」7番目で、準備したCSSフォルダの中に、保存してください。その後、index.htmlを開いてみてください。スタイルが適用されているのが確認できると思います。

/* Reset CSS: ブラウザの既定のスタイルをリセットします */
body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, ol, ul, li {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* ページ全体の背景色とフォント設定を指定します */
body {
  background-color: #ddd;
  font-family: Arial, sans-serif;
} 

/* Wrapperの幅設定を指定します */
/** Wrapper */
.wrapper {
  max-width: 960px;
  margin: 0 auto;
}

/* ヘッダーのスタイル */
header {
  background-color: #6D7993;
  color: #f1f1f1;
  padding: 20px;
  position: relative; /* 位置の基準を指定するために相対位置を設定します */
  }
  
/* タイトル画像のスタイル */
header .title-image {
  width: 960px; /* タイトル画像の幅を指定します */
  height: 100px; /* タイトル画像の高さを指定します */
  position: absolute; /* タイトル画像を絶対位置で配置するために絶対位置を設定します */
  top: 50%; /* 上端を基準に中央に配置するために、上端を50%に設定します */
  left: 50%; /* 左端を基準に中央に配置するために、左端を50%に設定します */
  transform: translate(-50%, -50%); /* タイトル画像の中心を基準にして、水平・垂直方向に中央に配置するために、50%移動します */
  }

/* Containerのレイアウトを指定します */
.container {
  display: flex;
}

/* メインコンテンツのスタイル */
.main {
  background: ghostwhite;
  width: 70%;
  padding: 20px;
}

/* サイドコンテンツのスタイル */
.side {
  background: #A7A9AC;
  width: 30%;
  padding: 20px;
}

/* ナビゲーションメニューのスタイル */
nav {
  background-color: #f1f1f1;
  padding: 10px;
}

nav ul {
  list-style-type: none;
}

nav ul li {
  display: inline;
  margin-right: 10px;
}

nav ul li a {
  text-decoration: none;
  color: #333;
}

/* フッターのスタイル */
footer {
  background: #3E4C59;
  padding: 20px;
  text-align: center;
}

/* article要素のスタイル */
article {
  margin-bottom: 20px; /* 記事の下側のマージンを設定します */
}
  
/* section要素のスタイル */
section {
  margin-bottom: 20px; /* セクションの下側のマージンを設定します */
}
  
/* aside要素のスタイル */
aside {
  width: 300px; /* サイドバーの幅を設定します */
  padding: 20px; /* サイドバーの内側の余白を設定します */
  background-color: #f1f1f1; /* サイドバーの背景色を設定します */
  float: right; /* サイドバーを右側にフロートさせます */
}
  
/* address要素のスタイル */
address {
  font-style: italic; /* アドレスのテキストをイタリック体に設定します */
  margin-bottom: 10px; /* アドレスの下側のマージンを設定します */
}
  
/* hgroup要素のスタイル */
hgroup {
  margin-bottom: 20px; /* hgroup要素の下側のマージンを設定します */
}

/* 見出しのスタイル */
h1 {
  font-size: 36px; /* 最上位の見出し（H1）のフォントサイズを設定します */
}
  
h2 {
  font-size: 30px; /* H2のフォントサイズを設定します */
}
  
h3 {
  font-size: 24px; /* H3のフォントサイズを設定します */
}
  
h4 {
  font-size: 20px; /* H4のフォントサイズを設定します */
}
  
h5 {
  font-size: 18px; /* H5のフォントサイズを設定します */
}
  
h6 {
  font-size: 16px; /* 最下位の見出し（H6）のフォントサイズを設定します */
}

/* P要素のスタイル */
p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 10px;
}

テンプレートの適用確認

See the Pen
HTML Living Standard Template for Basic by webcreator365 (@webcreator365)
on CodePen.