CSSとは？初心者でも理解できるようにわかりやすく解説！

HTML&CSS

CSSとは

CSSとは、WEBページの文字の色や大きさ、背景画像の大きさや配置、枠線や余白などを定義するための言語です。

CSSはWEBページを作成するには欠かせない言語で、「Cascading Style Sheets（カスケーディング・スタイル・シート）」を略してCSSと呼ばれています。

また、CSSはスタイルシート言語に分類され、厳密にはプログラミングとは異なる扱いを受けます。

CSSとHTMLの関係性

一般的にWEBページはHTMLで記述されていて、それに対して見た目を整えるのがCSSの役割です。

HTMLのタグで定義されたHTML要素に対して、CSSを記述することでWEBページの見た目を調整します。

HTMLのみで記述されたWEBページは単調な見た目をしていますが、CSSを使用することでユーザー目線で見やすく華やかなWEBページを作成することができます。

CSSの基本

CSSでは、セレクタで対象となる要素を定義し、プロパティとその値を記述することで見た目を調整していきます。

セレクタ

CSSのセレクタでは、どの要素に対してCSSを記述するのかを定義します。

基本的には要素のclass名セレクタとしてCSSを記述していくことが推奨されていますが、要素のタグ名やid属性など他のものをセレクタとして扱うことも可能です。

セレクタを記述する際には、class属性やid属性、タグ名のどれをセレクタにしているのかを判別するために、それぞれの名前の前に記号を記述します。

セレクタ記号例
タグ名（なし）img { ~ }
p { ~ }
class属性..sample { ~ }
.text { ~ }
id属性##sample { ~ }
#text { ~ }

ボタンやテキストなど、複数個の要素に対して同じ見た目を設定したい場合、それぞれのHTMLタグに同じclass属性を指定し、そのclass属性に対してCSSを記述することで実現することが可能です。

<!-- HTML -->
<p class="main-text">テキスト1</p>
<p class="main-text">テキスト2</p>
<p class="sub-text">テキスト2</p>

/* CSS */
.main-text {
  color: red; /* テキスト1とテキスト2が赤色になる */
}

また、一つのセレクタに複数のタグや属性を記述することで、要素の親子関係について指定することができたり、複数のセレクタに対して同じCSSを設定することもできます。

<!-- HTML -->
<div class="parent">
  <p class="child">テキスト1</p>
<div>
<p class="child">テキスト2</p>

/* CSS */
.parent .child { /* class="parent"の子要素の、class="child"の要素を指定 */
  color: red; /* テキスト1のみ赤色になる */
}

プロパティと値

CSSのプロパティでは、セレクタで指定した要素に対して「どの見た目を調整するのか？（色か？幅か？など）」を定義します。

「プロパティ: 値;」の形で記述し、一つの要素に対して複数のプロパティの値を設定することもできます。

<!-- HTML -->
<p class="sample-text">サンプルテキスト</p>

/* CSS */
.sample-text {
  color: red; /* 赤色にする */
  font-weight: bold; /* 太字にする */
  text-align: center; /* テキストを中央寄せにする */
}

CSSのプロパティは種類がたくさんあり、全てを覚える必要はありません。よく使うプロパティだけ覚えて、その他のプロパティについては使う時に調べて使えれば大丈夫です。

記事の最後によく使うCSSプロパティをまとめていますので、そちらを参考にしてください。

また、複数のプロパティを1つにまとめて記述する方法（ショートハンド）もあるため、CSSに慣れてきたら試してみると良いでしょう。

CSSを実際に書いてみる

CSSファイルを作成する

まずはCSSを記述するために、CSSファイルを作成しましょう。

ファイルの拡張子を「.css」とすることで、CSSファイルを作成することができます。

作成したCSSファイルをHTMLに読み込ませる

CSSファイルは作成しただけではHTMLに反映されません。

CSSファイルに記述したCSSをHTMLに反映させるには、HTML側でCSSファイルを読み込む必要があります。

<link rel="stylesheet" href="{ファイル名}">

ファイル名については、ディレクトリのファイル構成に合わせて相対パスで記述しましょう。（絶対パスでも問題ないですが、相対パス推奨です。）

セレクタでHTML要素を指定してCSSを記述する

HTML側でCSSファイルを読み込んだら、CSSを記述していきましょう。

CSSを書き始める前に、文字コードを指定します。

@charset "utf-8"; // 文字コードをUTF-8に設定する。（初心者のうちはあまり深く考えず、とりあえず記述しておけばOKです。）

最初から目的のものを書き始めるのではなく、ちゃんとCSSが反映されるか仮テキストなどで確認すると良いでしょう。

<!-- HTMLファイル -->
<html>
  <head>
    ~
    <!-- CSSファイルを読み込む -->
    <link rel="stylesheet" href="style.css">
    ~
  </head>
  <body>
    <p>CSSが反映されているか確認する。</p>
  </body>
</html>

/* CSSファイル */
@charset "utf-8";

p {
  color: red; /* テキストが赤色になればOK!! */
}

ちゃんと反映されていることを確認できたら、CSSを記述していきましょう！

CSSセレクタと詳細度

同じ要素の同じプロパティに対して異なる値を指定する場合、CSSのセレクタの指定の仕方によってどのCSSの記述を優先するかが変わってきます。（CSSの詳細度）

また、!importantキーワードをプロパティの値の後に記述することで、最優先に扱うことができます。

もし、セレクタの詳細度が同じであれば下に記述した方が優先されます。

保守性の高いCSSコードを書くために、最低限として以下2点を気をつけると良いでしょう。

  • !important は極力使用しない
  • 可能な限りclass属性のみをセレクタとする

CSSの詳細度について、優先順位については以下のようになっています。

優先順位セレクタ等説明
1!important極力使用しない
2HTMLのstyle属性基本的にHTMLタグのstyle属性には記述しない
（CSSファイルを用意する）
3id属性–
4class属性可能な限りclass属性をセレクタとする
5HTMLタグ–

よく使用するCSSプロパティまとめ

参考までに、実際にCSSコードを書く時によく使うCSSプロパティについて以下にまとめました。

プロパティ名役割
display配置（レイアウト）を調整します。
fontフォント（大きさや幅など）を調整します。
margin / padding余白を調整します。
background背景（色や画像など）を調整します。
width / height要素の幅/高さを調整します。
border線（色や太さ）を調整します。
border-radius角丸を調整します
z-index要素の重なり順を調整します。
text-alignテキストの揃え位置を調整します。
line-height行の高さを調整します。

コメント

タイトルとURLをコピーしました