本記事ではCSSの使用方法について解説していきます。
まずCSSとは何かから説明します。
CSS(Cascading Style Sheets)
…HTMLやXML等、webページの装飾やレイアウト調整を行うための仕様です。
文字色・背景色の変更をはじめ、ボタン位置などのオブジェクトの位置などの調整を行うこともできます。
本記事においての環境は以下になります。
・VSCode
・HTML
・CSS
CSSの基本的な記述方法
基本的な書き方は以下のようになります。
h1{
color: blue;
}
セレクタ（h1の部分）
…どのHTML要素にスタイルを適用するか指定します。
上記の例ではHTMLのh1の要素を指定しています。
プロパティ（color: の部分）
…どのスタイルを適用するか指定します。
上記の例では文字色の変更をします。
値（blueの部分）
…各プロパティによって設定できる値が異なります。
上記の例では文字色を青色（blue）に指定しています。
【注意点】
記載内容を囲っている「｛｝」中括弧、
プロパティ部分の「:」コロン、
値部分の最後の「;」セミコロンが書けるとエラーになり、CSSが適用されないので要注意です。
CSSの記載箇所
Webページを装飾するためのCSSを記載できる箇所は３つあります。
基本的にどこに記載してもCSSは反映されますが、プロジェクトによっては１ファイルに記載したコードが冗長にならないようにするためにCSSを記載する箇所を統一することがあります。
・内部参照
…HTMLを記載しているファイル内に記載。
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>例</title>
<style>
h1 {
color: red;
}
p {
color: blue;
}
</style>
</head>
<body>
<h1>あいうえお</h1>
<p>かきくけこ</p>
</body>
</html>
・外部参照
…HTMLを記載しているファイルではなく、別ファイルに独立したCSSファイルを作成して記載。
または、URLを指定してwebからCSSを取得することもできます。
<<外部参照例①>>
同一フォルダ内のCSSファイルを指定する例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>例</title>
<!--下記の箇所で使用するCSSファイルを指定します。-->
<link rel="stylesheet" href="example.css">
</head>
<body>
<h1>あいうえお</h1>
<p>かきくけこ</p>
</body>
</html>
@charset "utf-8";
h1{
color: yellow;
}
<<外部参照例②>>
同一フォルダ内のCSSファイルを指定する例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>例</title>
<!--下記の箇所で使用するCSSが配置されているURLを指定します。-->
<link rel="stylesheet" href="https://example.com/styles.css">
</head>
<body>
<h1>あいうえお</h1>
<p>かきくけこ</p>
</body>
</html>
・インライン
…HTMLの要素内に記載。
<p style="color: blue;">This is a blue paragraph.</p>
実は上記３つには参照時の優先順位があり、下記の順にCSSが優先的に適用されます。
内部参照・外部参照
（優先度低）
インライン
（優先度高）
同一要素に対して複数のスタイルが内部参照や外部参照で記載された場合、
後から記載されたスタイルが優先されます。これはCSSの「後勝ち」という原則です。
CSSのコメント方法
CSSにてコメントアウトは下記のようになります。
文字色の指定部分を無効にする場合
@charset "utf-8";
h2{
/* color: blue; */
font-weight: bold;
}
VScodeを使用している場合は
選択+「ctrl」+「/」で簡単にその選択範囲をコメントアウトすることができます。
今回はCSSの基本的な書き方についてまとめました。
次回以降の記事にて、主に使用されるプロパティについての解説していきます。