CSS入門：基本知識をシンプルに解説します

2023.05.27 株式会社システムインテグレータ

CSSとは？

CSS（Cascading Style Sheets：カスケーディングスタイルシート）は、ウェブページのデザインやレイアウトを制御する言語です。HTMLでマークアップされたコンテンツに対して、スタイルを適用し、見た目を整える役割があります。

ウェブページのデザインやレイアウトの制御は、HTMLでも可能です。しかし、デザインやレイアウトを統一したい場合、HTMLの場合は個別に設定しなければならず、制作するときも、修正するときも大変手間がかかります。

CSSでデザインやレイアウトを一括して制御することで、複数のHTMLにも同一の設定を適用できることから、デザインやレイアウトを簡単に統一できるため、一般的なウェブサイトではHTMLとCSSは併用して使われます。
Attractive casual woman holding laptop with exploding data and numers

CSSでできること

①レイアウトの調整
CSSを使って、ウェブページ内の要素の位置や大きさを調整できます。FlexboxやGridのような機能を使って、柔軟で効率的なレイアウトが実現できます。

②見た目のスタイリング
テキストの色やフォント、背景色、枠線などのデザイン要素を調整することができます。これにより、ウェブページのデザインを統一し、見やすくすることができます。

③アニメーションやトランジションの実装
CSSを使って、ウェブページ内の要素にアニメーションやトランジション効果（視覚効果の一種）を追加できます。これにより、ユーザーエクスペリエンスが向上します。

CSSの基本構造

基本構造を以下の例を挙げて説明します。

/* セレクタ: <h1>要素にスタイルを適用する要素セレクタ */
h1 {
/* プロパティ: color, 値: green のスタイルを指定 */
color: green;
/* プロパティ: font-size, 値: 20px のスタイルを指定 */
font-size: 20px;
}

①セレクタ
セレクタは、HTMLの要素に対してスタイルを適用するための指定子です。タグ名、クラス名、ID名などを使って特定の要素を選択できます。

②プロパティ
プロパティは、スタイルを適用する対象の属性を表します。例えば、テキストの色を変更する場合、「color」プロパティを使用します。

③値
値は、プロパティに適用する具体的な設定です。例えば、「color」プロパティに「green」という値を設定することで、テキストの色を緑に変更できます。

HTMLへの適用方法

CSSをHTMLファイルに適用するには、3通りの方法があります。

①外部スタイルシート
外部スタイルシートは、CSSを別のファイルに記述し、HTMLファイルからリンクして読み込む方法です。これにより、複数のHTMLファイルで共通のスタイルを適用でき、メンテナンスが容易になります。

②内部スタイルシート
内部スタイルシートは、HTMLファイル内の<head>タグ内に<style>タグを使用してCSSを記述する方法です。これは、特定のHTMLファイルにのみ適用されるスタイルがある場合に便利です。

③インラインスタイル
インラインスタイルは、HTMLタグの属性として直接スタイルを記述する方法です。style属性を使用して、特定の要素に直接スタイルを適用できます。ただし、この方法は、スタイルがHTMLに混在するため、メンテナンスが困難になる可能性があります。

具体例

①テキストスタイリング
以下の例では、段落(<p>)のテキスト色を赤にし、フォントサイズを16px、フォントファミリーをArialまたはsans-serifに設定しています。

p {
color: red;
font-size: 16px;
font-family: Arial, sans-serif;
}

②背景・枠線の装飾
以下の例では、<div>要素の背景色を薄い青にし、枠線を黒の2pxの太さで囲み、内側の余白（padding）を10px、外側の余白（margin）を20pxに設定しています。

div {
background-color: lightblue;
border: 2px solid black;
padding: 10px;
margin: 20px;
}

③レイアウト調整
この例では、.containerというクラス名が付与された要素に、Flexboxを適用し、子要素を水平方向（justify-content）と垂直方向（align-items）の両方で中央寄せに配置しています。

.container {
display: flex;
justify-content: center;
align-items: center;
}

CSSとJavaScriptの連携

CSSとJavaScriptを連携させることで、さらにインタラクティブなウェブページを作成することができます。JavaScriptを使用して、イベント（クリックやマウスオーバーなど）に応じてCSSのスタイルを動的に変更することができます。

注意点：Webブラウザの互換性

異なるWebブラウザやバージョンによって、CSSのサポート状況が異なります。そのため、ウェブページをクロスブラウザ対応にする際には、対応ブラウザを確認し、必要に応じてベンダープレフィックスやポリフィル（ウェブ開発においてブラウザ間の互換性を向上させるために使用される技術）を使用して互換性を向上させましょう。