【初心者向け】CSSとは？書き方や優先順位などを解説
更新日：2022年12月1日 / 投稿日：2020年07月8日
WEBページを表示するにはHTMLという言語が必要になりますが、ユーザーが見やすいようにWEBページのレイアウトを整えるためにはCSSという言語が必要となります。
今回はこのCSSについてご紹介していきたいと思います。
関連記事：CSSが適用されない原因とは？反映されないときの対処法を解説！
～ 目次 ～
HTMLとCSSのそれぞれの役割について
HTMLとCSSにはそれぞれ役割というものがあり、その役割について分かりやすくご説明していきます。
HTMLについて
HTML=Hyper Text Markup Languageの頭文字を取ったもので、マークアップ言語となります。
このHTMLファイルは「任意のファイル名.html」と最後が.htmlという名前の拡張子になります。
関連記事：WEBページの裏側、ソースコードとHTMLの簡単な説明
HTMLの特徴を分かりやすく説明すると、タグによる文章構造を示す言語となり、例えば見出しには「h1～h6」という見出しタグが用意され、それぞれ開始タグと終了タグで見出しの文章を囲い使用します。
＜例＞
<h1>これは見出しレベル1のタグになります。</h1>CSSについて
CSS＝Cascading Style Sheetsという頭文字を取ったものになります。
また、CSSはHTMLのようなマークアップ言語やプログラミング言語ではなく、スタイルシート言語と呼ばれています。
CSSファイルを作成すると「任意のファイル名.css」と最後が.cssという拡張子になります。
CSSの特徴を分かりやすく説明すると、文章の構造を示すHTMLに対して装飾などのデザインをしてユーザーにより見やすいレイアウトに整える言語となります。
関連記事：SCSS・SASSがとても便利なので基本的な使い方をご紹介します
＜例＞
例えばpというタグの文字を赤くするには、以下のようになります。
<!-- htmlの内容 -->
<p>この文字は赤くなります。<p/>/* cssの内容 */
p{
color: red;
}以下は上で記述したcssの実行結果になります。
表示結果→この文字は赤くなります。
CSSの使い方(HTMLに反映させる方法)
使い方その1：外部ファイルを読み込む
CSSはファイルを作成しただけではHTMLに反映されません。
CSSは、HTMLファイルとリンクさせる必要があり、以下のように設定します。
＜例＞
<html lang="ja">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>上のコードで解説しますとHTMLとCSSをlinkタグを使い、連結させます。
このlinkタグはheadタグの中に記述します。
そしてlinkタグのhref属性はCSSファイルまでのルート(パス)を入力します。
無事読み込まれるとHTMLとCSSがリンクされ、CSSで記述したスタイルが反映されるようになります。
使い方その2：headタグに直接書き込む
もう一つの方法は、HTMLファイルのheadタグに直接書き込む方法があります。
この場合styleタグを使い、CSSを記述していきます。
＜例＞
<html lang="ja">
<style>
h1{
font-size: 32px;
}
</style>
<body>
<h1>見出しテキスト</h1>
</body>
</html>使い方その3：タグに直接記述する
CSSはHTMLタグに直接記述する事も可能です。
※現在の制作手法ではよほどの理由がない限りは、おすすめはしないです。
＜例＞
<p style="font-size: 24px;">本文テキスト</p>CSSの書き方
CSSの書き方については、いくつかの方法があります。
ここでは、代表的なCSSの書き方について見ていきましょう。
直接タグにスタイルをあてる
上の例にもあったように、タグに対して直接スタイルを書く方法があります。
pタグ・divタグ・sectiionタグなど、そのタグに対してスタイルの値を入力していきます。
<CSSの書き方例>
div{
width: 100%;
margin: 0 auto;
}
p{
fotn-size: 24px;
font-weight: 600;
}クラス・アイディ属性を使う
HTMLのタグには、クラス属性・アイディ属性を付ける事ができます。
この2つの属性を使ってスタイルを付ける事が可能ですが、以下のような注意が必要となります。
クラス属性
1つのページの中で繰り返し使用が可能。ただし、基本の優先順位としてID属性の方が優先順位が高いため、スタイルが重複すると反映されない。
クラス属性の使用例：CSSファイル
CSSでクラス属性を定義する時はクラス名の前に「.」をつけます。
.sample{
font-size: 24px;
}
クラス属性の使用例：HTMLファイル
<p class="sample">クラス属性は何度も使用が可能。</p>アイディ属性
1つのページで1回のみ使用が可能。スタイルがクラス属性と重複する場合、アイディ属性の方が優先して反映される。
アイディ属性の使用例：CSSファイル
CSSでクラス属性を定義する時はクラス名の前に「#」をつけます。
#sample{
font-size: 24px;
}アイディ属性の使用例：HTMLファイル
<p id="sample">アイディ属性は1つのページにつき1つだけ可能。</p>※アイディ属性の補足
アイディ属性は1つのページにつき、1つのみ使用が可能と説明しましたが、同一のアイディ属性に限り、そのルールが適応されます。
アイディ属性の使用例：良い例
1つのページに異なる名前のアイディ属性なので問題ありません。
<section id="box">
<h1 id="title">見出しテキスト</h1>
<p>本文テキスト</p>
</section>アイディ属性の使用例：悪い例
1つのページにアイディ属性は2回使う事は出来ません。
<section id="sample">
<h1 id="sample">見出しテキスト</h1>
<p>本文テキスト</p>
</section>CSSのスタイルが適応される優先順位
実際にCSSを記述して表示を確認した時に、何故か反映されず、プロパティを確認してもキャッシュを削除しても変化が無い時は、以下の事に注意してみて下さい。
CSSのスタイルには優先順位あがり、このルールを無視した形でスタイリングを行うと、うまく反映されません。
スタイルが優先される順番
スタイルが適応される順番は上から順に優先されていきます。
- !important
- 要素に直書き(例：<p style=”color: #f00;”>テキストは赤になる</p>)
- IDセレクタ
- クラスセレクタ、属性セレクタ
- 要素セレクタ
- ユニバーサルセレクタ(*)
CSSについてのまとめ
以上、CSSについて簡単にご紹介させて頂きましたが、いかがだったでしょうか？
ちなみに、CSSは現在ではバージョン3となっていて使えるプロパティもどんどん増え、ますます使いやすさも上がっています。
今回は基本的な事を、分かりやすくご紹介いたしましたが、また機会があれば、もう少し詳しくCSSについてご紹介していきたいと思います。
この記事を書いた人
KNOWLEDGE BASEの中の人
2013年よりWEB制作会社に入社し、デザイン・コーディングからディレクションと幅広く従事。
その他の関連記事はこちら
【初心者向け】WEBサイトのURLを決めよう！ ドメインの種類や選び方を解説します
Photoshopで画像の書き出し時に作成されるimagesフォルダを作成させない方法
WordPressの旧エディタに戻すプラグイン「Classic Editor」の使い方やサポート期限についてご紹介
WordPressでヘッダーを任意のヘッダーに変更する方法
WordPressの管理画面を日本語に変更する方法
【簡単】Googleフォントの使い方と注意点や、おすすめGoogleフォント5選！
使い勝手抜群！WordPressでよく使う便利なプラグイン7選をご紹介
