この記事の目的
今やビジネスにおいてコンピュータ・情報・通信などを中心とする「IT用語」に対する知識は欠かせません。
あまり馴染みがない各分野のIT用語を、なるべく専門用語を使わずに解説していきます。
この記事の対象読者
Web制作を始めたばかりの人。
自社のWebマーケティングを任された人。
専門用語についていろいろ知りたい人。
Webマーケティングを行なっているが、言葉の定義を再確認したい人。
など、Webに限らずDXに携わるすべての方に。
CSSとは
CSS(Cascading Style Sheets)は、Webページの見た目を記述するためのスタイルシート言語です。HTMLによって文書の構造が記述され、CSSによってそれらの見た目が記述されます。
CSSには、色、フォント、サイズ、配置など、様々なスタイルのプロパティが用意されており、これらのプロパティを使用して、HTMLのタグに対してスタイルを適用することができます。
CSSによって、複数のWebページで共通のスタイルを適用したり、スタイルを変更したりすることができるため、HTMLの記述と分離してスタイルを記述することができ、Webページの見た目を効率的に管理することができます。
CSSは、HTMLとは別に記述し、HTMLに埋め込むことも、別ファイルに分けて読み込むこともできます。
CSSの特徴
CSSの特徴は以下のようになります。
HTMLとは分離されている
HTMLによって文書の構造が記述され、CSSによってそれらの見た目が記述されるため、HTMLとCSSは分離され、それぞれ独立して記述することができます。
セレクタとプロパティで適用範囲を設定する
CSSは、セレクタを使用してHTMLの要素を選択し、プロパティを使用してその要素にスタイルを適用することができます。
スタイルの継承
CSSで設定したスタイルは、親要素から子要素に継承されます。
優先度を指定して複数のスタイルの適用できる
複数のスタイルを適用することができ、優先順位が設定できます。
スマホ対応ができる
メディアクエリを使用することで、画面サイズやデバイスに応じてスタイルを切り替えることができます。
簡単なアニメーションや動きを表現できる
CSSにはアニメーションやトランジションもサポートされており、Webページに動きやインタラクションを加えることができます。
CSSの使い方
CSSの主な使い方は以下のようになります。
スタイルシートの記述方法
CSSは、HTMLとは別のファイルに記述し、それをHTMLと結びつけることで使用します。スタイルシートは、拡張子が.cssのテキストファイルに記述します。
スタイルの適用方法
CSSでは、HTMLのタグに対してスタイルを適用することができます。それには、次のように記述します。
- インラインスタイル
HTMLのタグにstyle属性を追加し、CSSのスタイルを記述します。
<div style=”color: red;”>この文字は赤色です。</div>
- 内部スタイルシート
HTMLのhead要素内にstyle要素を追加し、CSSのスタイルを記述します。
<head>
<style>
div {
color: red;
}
</style>
</head>
- 外部スタイルシート
HTMLのhead要素内にlink要素を追加し、外部のCSSファイルを読み込むように指定します。
<head>
<link rel=”stylesheet” href=”styles.css”>
</head>
CSSの記述方法
CSSは、セレクタとプロパティ・値の組み合わせで記述します。セレクタは、HTMLのタグ名やクラス名などを指定し、それに対してプロパティ・値の組み合わせでスタイルを指定します。
div {
color: red;
font-size: 16px;
}
これにより、divタグに対して、文字色を赤色、フォントサイズを16pxに指定します。
以上が一般的な使い方です。 CSSは複雑になるにつれて、選択した要素に対してより細かいスタイルを適用するために、継承や優先度、置換などの機能があります。
