CSSは何から学んだらいいの？

TOPHTMLの知識CSSは何から学んだらいいの？

CSSの基礎

CSSはHTMLにスタイルを追加し、ウェブページをデザインするために不可欠な言語です。
普段から見ているサイトもCSSを使用して装飾がされています。
それではCSSの基本構文とスタイルの適用方法から見ていきましょう

CSSの基本構文とスタイルの適用方法

CSSの基本構文

CSSはセレクタとプロパティの組み合わせで構成されます。セレクタはHTMLの要素を指定し、プロパティはその要素に適用するスタイルを指定します。例を交えて基本構文を解説します。

selector {
  property: value;
}

スタイルの適用方法

CSSのスタイルをHTMLに適用する方法について説明します。

外部スタイルシート: 別々のCSSファイルを作成し、HTMLファイルでそれをリンクする方法。

<link rel="stylesheet" type="text/css" href="styles.css">

htmlファイルの<head></head>内に記述してCSSを読み込みます。
ファイル名の拡張子を「.css」にすることでcssと認識させます。

内部スタイルシート: HTMLファイル内でCSSを定義する方法。

<style>
  /* CSS rules here */
</style>

htmlファイルの<head></head>内に記述してCSSを読み込みます。

インラインスタイル: 直接HTML要素にスタイルを適用する方法。

<p style="color: red;">赤い文字になります。</p>

こちらはあまり使いませんが、限定的な個所に対応する場合のみ使用することもあります。

ちょっと豆知識「外部、内部、インライン」の優先順位について

外部スタイルシート

外部スタイルシートの利点:
スタイルを一元管理でき、複数のページで同じスタイルを再利用できます。
優先順位:
外部スタイルシートは内部スタイルシートやインラインスタイルよりも低い優先順位です。
ただし、後で読み込まれたスタイルが前に読み込まれたスタイルを上書きします。順序が重要です。

<style>
  /* 内部CSS */
</style>
<!-- 外部CSS -->
<link rel="stylesheet" type="text/css" href="styles.css">

この場合、外部CSSが優先されます。

内部スタイルシート

内部スタイルシートの利点:
特定のページにスタイルを適用でき、外部スタイルシートよりも柔軟です。
優先順位:
外部スタイルシートよりも高い優先順位を持ちます。
インラインスタイルよりも低い優先順位です。

インラインスタイル

インラインスタイルの利点:
特定の要素に直接スタイルを適用できます。
優先順位:
内部スタイルシートよりも高い優先順位を持ちます。
IDセレクタなどよりも低い優先順位です。

<p id="red" style="color: green">赤くなる</p>

外部スタイルシートや内部スタイルシートで#redを指定していた場合外部、内部が優先されます。

#red {
  color: red;
}

優先順位の基本ルール

セレクタの特定性:
セレクタの特定性が高いほど、そのスタイルが優先されます。
IDセレクタの特定性がクラスセレクタよりも高く、要素セレクタよりも高いです。
スタイルの適用順序:
後に適用されたスタイルが前に適用されたスタイルを上書きします。
インラインスタイル > 内部スタイルシート > 外部スタイルシート
重要度:
!importantが付与されたスタイルは他のスタイルを上書きします。
ただし、!importantの過剰な使用は避け、正確な優先順位を理解することが重要です。

p {
  color: red !important;
}

どうしても上書きしたい内容がある場合はこちらを使用します。

セレクタの種類

要素セレクタ、クラスセレクタ、IDセレクタなど、さまざまな種類のセレクタについて解説します。

/* 要素セレクタ */
p {
  color: blue;
}

/* クラスセレクタ */
.highlight {
  background-color: yellow;
}

/* IDセレクタ */
#header {
  font-size: 20px;
}

セレクタは、CSSで要素にスタイルを適用するために使用されるパターンです。以下に、いくつかの主要なセレクタの種類について解説します。

1. 要素セレクタ (Element Selector):

p {
  /* このスタイルはすべての <p> 要素に適用される */
  color: blue;
}

2. クラスセレクタ (Class Selector):

.button {
  /* このスタイルは class="button" を持つ要素に適用される */
  background-color: #f00;
}

<button class="button">Click me</button>

3. IDセレクタ (ID Selector):

#header {
  /* このスタイルは id="header" を持つ要素に適用される */
  font-size: 24px;
}

<div id="header">This is a header</div>

4. 子孫セレクタ (Descendant Selector):

article p {
  /* このスタイルは <article> 要素内のすべての <p> 要素に適用される */
  margin-bottom: 10px;
}

<article>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</article>

5. 直接子セレクタ (Child Selector):

nav > ul {
  /* このスタイルは <nav> 直下の <ul> にのみ適用される */
  list-style-type: none;
}

<nav>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</nav>

6. 疑似クラス (Pseudo-class):

a:hover {
  /* このスタイルはリンクがホバーされたときに適用される */
  color: red;
}

7. 疑似要素 (Pseudo-element):

p::first-line {
  /* このスタイルは <p> 要素の最初の行に適用される */
  font-weight: bold;
}

これらのセレクタを組み合わせることで、特定の要素や要素のグループに対してスタイルを効果的に指定できます。セレクタの組み合わせは非常に柔軟で、ページの構造に応じて適切なスタイルを定義するのに役立ちます。

プロパティと値

よく使用されるいくつかのCSSプロパティとそれに関連する値についての解説です。
これらのプロパティは、ウェブデザインにおいて一般的に使われるものであり、ページのスタイルやレイアウトを制御するのに役立ちます。

p {
  color: #333;
  font-family: 'Arial', sans-serif;
  margin-bottom: 10px;
  padding: 20px;
  border: 1px solid #ccc;
}

1. 色 (Color):

p {
  color: #ff0000; /* テキストの色を赤に指定 */
}

値の例: #ff0000 (16進数のRGB表記)、red、rgb(255, 0, 0)
16進数のRGB表記をメインに使うことが多いです。

2. フォント (Font):

body {
  font-family: 'Arial', sans-serif; /* フォントファミリーを指定 */
  font-size: 16px; /* フォントサイズを指定 */
  font-weight: bold; /* フォントの太さを指定 */
}

値の例: 'Arial', sans-serif (フォントファミリー)
16px (フォントサイズ)
bold (フォントの太さ)

3. マージン (Margin):

div {
  margin-top: 10px; /* 上側のマージンを指定 */
  margin-right: 20px; /* 右側のマージンを指定 */
  margin-bottom: 30px; /* 下側のマージンを指定 */
  margin-left: 40px; /* 左側のマージンを指定 */
}

値の例: 10px、20%、auto
margin: 10px 20px 30px 40px;と、ひとまとめにすることも可能です。
margin: top right bottom left;値は上から順に時計回りに適用されます。
要素の外側の余白を取りたいときに使います。

4. パディング (Padding):

div {
  padding-top: 10px; /* 上側のパディングを指定 */
  padding-right: 20px; /* 右側のパディングを指定 */
  padding-bottom: 10px; /* 下側のパディングを指定 */
  padding-left: 20px; /* 左側のパディングを指定 */
}

値の例: 10px、20%、auto
padding: 10px 20px 30px 40px;と、ひとまとめにすることも可能です。
padding: top right bottom left;値は上から順に時計回りに適用されます。
要素の内側の余白を取りたいときに使います。

5. ボーダー (Border):

div {
  border-width: 2px; /* ボーダーの幅を指定 */
  border-style: solid; /* ボーダーのスタイルを指定 */
  border-color: #000; /* ボーダーの色を指定 */
}

値の例: 2px (ボーダーの幅)、solid (ボーダーのスタイル)、#000 (ボーダーの色)
border: 2px solid #000;といったようにひとまとめにすることも可能です。
また、次のように上下左右それぞれ個別にborderを付けることも可能です。
border-top: 2px solid #000;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
border-left: 2px solid #000;

まとめ

CSSの基本構文とスタイルの適用方法を理解することで、ウェブページの見た目を効果的に制御することができます。
今回は基本的な考え方を説明しましたが、サイト制作においてデザインからHTML、CSSを起こすには適切なセレクタやプロパティを使用し、スタイルを一貫性のあるものにすることが大切です。

HTMLフォームのエラーチェックと送信と：初心者向けガイド

Gulp-ejsを使用してHTMLを効率化する