CSS とは
Web ページの見た目を装飾するのが CSS (Cascading Style Sheets) です。HTML でページの骨格を作り、それに対して CSS で色、フォント、レイアウトなどを指定します。
CSS 基本構文
CSS では、HTML 要素にスタイルを適用するためのルールを記述します。
セレクタ {
プロパティ: 値;
プロパティ: 値;
}
| 用語 | 説明 | 例 |
|---|---|---|
| セレクタ | どの HTML 要素にスタイルを適用するかを指定します。 | (下記「セレクタの種類」参照) |
| プロパティ | 変更したいスタイルの種類 | color, font-size, margin |
| 値 | プロパティに設定する具体的な値 | blue, 16px, 10px 20px |
セレクタの種類
セレクタは以下の 3 種類に大別されます。(疑似要素を含めるともう少し増えます。) これらを使い分けることで、スタイル適用範囲に幅と柔軟性を持たせることができます。
| 種類 | 例 |
|---|---|
| 要素セレクタ | p { color: blue; } (すべての <p> 要素) |
| class セレクタ | .my-button { background-color: green; } (タグに class="my-button" 属性を持つ要素) |
| ID セレクタ | #header { font-size: 24px; } (タグに id="header" 属性を持つ要素) |
CSS コード例
テキスト: 色やフォントサイズ
h1 {
/* 文字色を濃いグレーに */
color: #333;
/* フォントサイズを 32 ピクセルに */
font-size: 32px;
/* テキストを中央揃えに */
text-align: center;
}
ボタン: UI 要素のスタイル
.button {
/* 背景色を青に */
background-color: #007bff;
/* 文字色を白に */
color: white;
/* 内側の余白 */
padding: 0.2em 0.4em;
/* 枠線をなくす */
border: none;
/* 角を丸くする */
border-radius: 0.2rem;
/* マウスカーソルをポインターに */
cursor: pointer;
}
レイアウト (Flexbox の基本)
.container {
/* この要素を Flexbox コンテナにする */
display: flex;
/* 子要素の水平方向: 両端に配置 */
justify-content: space-between;
/* 子要素の垂直方向: 中央に配置 */
align-items: center;
}
Vue ではスタイルをどこに書くのでしょうか。
- 一つの方法は、すでに見た単一ファイルコンポーネント (SFC) すなわち
.vueファイルの中で<style>タグに記述する方法です。そのコンポーネントに特化した CSS を記述できます。 - 共通のスタイルやユーティリティ class 定義を外部ファイル (
.css) に記述することも可能です。希望の場所で読み込んで使用します。