【CSS】基本的な書き方

2023年1月12日2023年1月12日

【CSS】書き方のルール

CSS(Cascading Style Sheets)は、HTMLやXMLドキュメントの見た目を指定するために使用されるスタイルシート言語です。基本的な書き方のルールには以下のようなものがあります。

・スタイルは、セレクタで選択された要素に適用されます。セレクタは、タグ名、クラス名、ID名などを指定します。

/*タグ名セレクタ*/
p {
  color: blue;
}
/*クラスセレクタ*/
.warning {
  background-color: yellow;
}
/*IDセレクタ*/
#important {
  font-weight: bold;
}

・スタイルは、プロパティと値の組み合わせで指定します。プロパティは、背景色、フォントサイズ、位置など、スタイルを指定するための属性名です。値は、それぞれのプロパティに対して適用する設定値です。

/*複数のプロパティを同時に指定することも可能です。*/
p {
  color: blue;
  font-size: 16px;
  line-height: 1.5;
}

・CSSファイルは、HTMLやXMLドキュメントから参照します。HTMLやXMLドキュメントには、linkタグやstyleタグを使用してCSSファイルを参照します。

<!--linkタグでCSSファイルを参照する場合-->
<link rel="stylesheet" href="styles.css">

<!--styleタグでCSSを埋め込む場合-->
<style>
  /*CSSのスタイルを記述*/
</style>

・CSSは、スタイルの記述順序によって優先順位が決まります。記述順序が後になるほど優先順位が高くなります。

・CSSは、カンマで複数のセレクタを組み合わせることができます。

/*複数のセレクタを組み合わせる場合*/
p, .warning, #important {
  font-weight: bold;
}

これらは、CSSの基本的な書き方のルールです。これらのルールを理解し、適切に使用することで、HTMLやXMLドキュメントの見た目を細かく調整することができます。

さらに, CSSには多様な書き方の方法があり、 CSS3以降には新しい書き方のルールが追加され、より複雑なスタイルを設定することができるようになりました。

例えば、 flexboxやgridなどの新しいレイアウトメソッド、animationやtransitionなどのアニメーションに関するプロパティなどがあります。

また、CSS preprocessors(SASSやLESS)を使用することで、CSSの記述をより効率的にすることができます。

これらもCSSの基本的な書き方のルールとして覚えておきましょう。

【CSS】html内の書き方

HTML内にCSSを記述する方法には、以下のようなものがあります。

styleタグを使用して、HTML内にCSSを埋め込む方法: styleタグを使用し、CSSのスタイルをHTMLドキュメント内に直接記述します。head要素内にstyleタグを追加することで、HTMLドキュメント全体に適用されるスタイルを設定することができます。

<head>
  <style>
    /* CSSのスタイルを記述 */
    p {
      color: blue;
}
</style>
</head>
<body>
  <p>これは赤い文字です。</p>
</body>

各要素に直接style属性を使用して、CSSを埋め込む方法: HTMLの要素に直接style属性を使用し、CSSのスタイルを埋め込みます。この方法は、特定の要素にだけスタイルを適用したい場合に使用します。

<p style="color: blue;">これは青い文字です。</p>

上記の方法は、HTML内にCSSを記述する方法です。しかし、HTMLドキュメントが複雑になるとCSSの記述も複雑になり、メンテナンスが困難になる可能性があります。

そのため、HTMLドキュメントとCSSを分離し、CSSファイルを別途用意し、HTMLドキュメントから参照することが一般的です。

【CSS】外部ファイルの書き方

CSSは、HTMLやXMLドキュメントの見た目を指定するためのスタイルシート言語です。外部ファイルとして記述することで、HTMLドキュメントとCSSを分離し、メンテナンスが容易になります。

外部ファイルの書き方には以下のようなものがあります。

別のファイルにCSSを記述し、HTMLから参照する方法

CSSは別のファイルに記述し、HTMLから参照します。HTMLにlinkタグを使用し、CSSファイルを参照します。

<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>これは外部ファイルから参照されるスタイルです。</p>
</body>

別のファイルにSASSやLESSといったCSS preprocessorを使用する場合

CSS preprocessor(SASS, LESS)といったものを使用することで、CSSをより効率的に記述することができます。

これらのツールを使用すると、CSSに変数やミックスインなどの機能を追加し、コードをよりスマートに書くことができます。

その後に、これらのCSS preprocessorsから生成されたCSSファイルをHTMLから参照します。

/* SCSS */
$main-color: #4d4d4d;

body {
  color: $main-color;
}

<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>これは外部ファイルから参照されるスタイルです。</p>
</body>

外部ファイルの書き方はこれらが代表的なものです。CSSとHTMLを分離することで、スタイルの変更や追加が容易になり、メンテナンス性が向上します。

また、CSS preprocessorを使用することで、より効率的なCSSの記述ができるようになります。

【CSS】プロパティの書き方の順番

CSSでは、要素にスタイルを適用するために、プロパティと値の組み合わせで指定します。

スタイルを適用する際、プロパティをどの順番で記述するのが望ましいかは明確に定められていませんが、一般的には以下の順番が推奨されています。

ボックスモデルプロパティ(width、height、padding、margin、border)
レイアウトプロパティ(display、position、float、clear)
背景と色のプロパティ(background、color)
フォントプロパティ(font-size、font-family、line-height、text-align、text-decoration)
その他のプロパティ(transition、animation、transform、box-shadow、border-radiusなど)

この順番によって、スタイルを適用した際に発生する予期しない結果を避けることができ、スタイルの適用がより明確になります。

ただし、要素やデザインによっては、上記の順番に沿ってプロパティを記述する必要はありません。

それはどのようなデザインにも適用されるわけではなく、柔軟に対応することが必要です。

それでも、上記のような順番に沿って記述することで、スタイルを適用した際に発生する予期しない結果を最小限に抑え、スタイルの適用がより明確になります。

また、大量に記述する場合には、順番に沿って記述することで、プロパティがどのように適用されているのかが一目で分かり、管理しやすくなります。

しかし、最終的には、プロパティの順番は開発者によって変わることがある、です。そのため、組織やチームで共通のルールを設けることで、スタイルの適用や管理がよりスムーズになるでしょう。

【CSS】classの書き方

CSSでは、HTMLの要素にスタイルを適用するために、classというセレクタを使用します。 classセレクタは、HTMLの要素にclass属性を追加し、その属性値をCSSのセレクタとして使用します。

classの書き方には以下のようなものがあります。

単一のclassを適用

class属性にclass名を追加し、その値をCSSのセレクタとして使用します。

<div class="container">...</div>

.container {
  width: 100%;
  margin: 0 auto;
}

複数のclassを適用

要素に複数のclassを適用する場合は、class属性にスペースで区切って追加します。

<div class="container box-shadow">...</div>

.container {
  width: 100%;
  margin: 0 auto;
}
.box-shadow {
  box-shadow: 0px 2px 3px rgba(0,0,0,0.3);
}

このように、classセレクタを使用することで、HTMLの要素に対して複数のスタイルを適用することができます。また、複数のclassを適用することで、スタイルを組み合わせることができます。

また、classの名前には識別性の高い命名規則に従うことが望ましいです。例えば、BEM（Block Element Modifier）という命名規則があります。これに従うことで、スタイルを適用した要素を一目で特定できるようになります。

ちなみに、classは一つの要素に複数指定することができ、classのセレクタは複数指定することができます。

また、idセレクタも似たようなセレクタの一種ですが、要素に対してユニークなid属性を指定することで、スタイルを適用することができます。

【CSS】セレクタの書き方

CSSでは、HTMLの要素にスタイルを適用するために、セレクタを使用します。セレクタには複数の種類があり、それぞれ異なる方法でスタイルを適用することができます。

主に使用されるセレクタには以下のようなものがあります。

タグ名セレクタ

HTMLのタグ名を指定し、そのタグのすべての要素にスタイルを適用します。

p {
  color: blue;
}

classセレクタ

HTMLの要素にclass属性を追加し、その値をCSSのセレクタとして使用します。

<div class="container">...</div>

.container {
  width: 100%;
  margin: 0 auto;
}

idセレクタ

HTMLの要素にid属性を追加し、その値をCSSのセレクタとして使用します。

<div id="header">...</div>

#header {
  background-color: #f5f5f5;
  padding: 20px;
}

疑似クラスセレクタ

HTMLの要素の状態や状態に応じて、スタイルを適用するセレクタです。疑似クラスは、特定の条件に当てはまる要素にスタイルを適用するために使用されます。

a:hover {
  text-decoration: underline;
}

疑似要素セレクタ

HTMLの要素の部分にスタイルを適用するセレクタです。疑似要素は、特定の部分にスタイルを適用するために使用されます。

p::first-line {
  font-weight: bold;
}

属性セレクタ

HTMLの要素の属性を指定し、その属性を持っている要素にスタイルを適用します。

input[type="text"] {
  padding: 10px;
  border-radius: 5px;
}

これらは一般的に使用されるセレクタですが、それぞれには独自の特徴があり、適切なセレクタを使用することで、より簡潔かつ効果的なスタイルを適用することができます。

上記のように複雑になってきた場合には、上述のセレクタを組み合わせることで更に複雑なスタイルを指定することができます。

【CSS】idの書き方

CSSでは、HTMLの要素にスタイルを適用するために、idセレクタを使用します。 idセレクタは、HTMLの要素にid属性を追加し、その属性値をCSSのセレクタとして使用します。

idの書き方には以下のようなものがあります。

単一のidを適用

id属性にid名を追加し、その値をCSSのセレクタとして使用します。

<div id="header">...</div>

#header {
  background-color: #f5f5f5;
  padding: 20px;
}

idを指定する場合

idを指定する際には、id名には先頭に#をつけます。

id名は必ずユニークである必要があります。その点を除いて、classセレクタと同じように使用できます。

idセレクタは、classセレクタよりも優先度が高いため、同じ要素に対してidとclassが両方適用された場合には、idのスタイルが優先されます。

しかし、idセレクタは、同じ要素に対して重複したidが使用された場合には、指定したスタイルは適用されず、HTMLに構文エラーが出る可能性があります。その点に配慮して、idを使用する場面を適切に選ぶようにしましょう。

また、idは一つの要素に対して1つだけ使用することができ、その要素に対して他のidは使用できません。これは、idはHTML内でユニークである必要があるためです。

idは、特定の要素にスタイルを適用したい場合に使用します。ただし、classと違い、idはあくまで特定の要素に対してのみ使用することが推奨されている点に注意してください。

【CSS】複数のセレクタを指定する方法

CSSでは、複数のセレクタを指定することで、異なる要素に対して同じスタイルを適用することができます。

複数のセレクタを指定する方法には以下のようなものがあります。

カンマ区切り

p, a {
  color: blue;
}

この例では、pタグとaタグに対して、同じスタイル（文字色を青色に）を適用します。

空白区切り

複数のセレクタを空白で区切って指定します。

#header p {
  font-weight: bold;
}

この例では、id属性が”header”の要素内部にあるpタグに対して、スタイル（フォントを太字に）を適用します。

複数のセレクタを指定することで、より簡潔かつ効果的な

スタイルを適用することができます。また、同じスタイルを適用したい複数の要素に対して、1つの記述で適用することができるため、スタイルの記述量を減らすことができます。

また、複数のセレクタを組み合わせることで、より複雑なスタイルを適用することも可能です。

ただし、組み合わせるセレクタの数が多くなってきた場合には、どのセレクタが優先されるか、どのような影響を与えるかを考慮しながら書くことが必要です。