フロントエンド基礎（CSS）

目的

CSSの概要を理解することが目的

CSSとは

HTMLがWebページに表示される実際のテキストや画像を記述するのに対し、CSS（Cascading Style Sheet）はテキストや画像の見栄えを良くするために、文字の大きさを変えたり、表示位置を調整したり、色を設定したりする役割を持っています。

HTMLにもレイアウト用のタグが存在し、以前はそのようなタグを使ってレイアウトを記述しているHTMLファイルも多くありました。しかし、Webコンテンツの多様化により、すべてのレイアウト情報をHTMLに記述するとソースコードが複雑になり、コーディングに手間がかかります。現在ではレイアウトに関する情報はCSSにまとめて記述するケースが増え、「Webページの文書構造はHTML、デザインはCSSで指定する」ことが一般的です。

CSSのバージョン

2023年現在のCSS最新バージョンは「CSS3」です。

CSSには、CSS1、CSS2、CSS3という3つのバージョンがあります。
現在はほとんどのホームページでCSS3が使用されています。

CSSの書き方

CSSの基本書式（セレクタ・プロパティ・値）

CSSでスタイルを指定する際には、どの部分に対してどのスタイルをどのように適用するかを指定します。以下の使用例では、p要素の色を青くするスタイルを指定しています。

p {color:blue;}

それぞれの名称は、 セレクタ {プロパティ名:値;}となります。セレクタ（selector）とはスタイルシートを適用する対象のことです。上記の例ではp要素が指定されていますが、セレクタの種類を使い分けることで様々な対象にスタイルを適用することができます。

プロパティ（property）とは適用するスタイルの種類のことです。上記の例では色を指定するcolorプロパティの値（value）にblueを指定しています。 CSSでは他にも様々なプロパティが用意されているので、適用するスタイルに応じて使い分けます。

尚、{ ～ } で囲んだ全体を宣言ブロック（declaration block）、プロパティ名と値をコロン（:）でセットにした部分をスタイル宣言（declaration）と呼びます。

複数のスタイルを指定する

ひとつのセレクタに対して複数のスタイル指定する場合には、スタイル宣言をセミコロン（;）で区切って記述します。セミコロン（;）は宣言同士の区切り記号なので最後は必要ありませんが、付けても誤りではありません。後からスタイル宣言を追加したり、スタイル宣言の順序を入れ替える可能性などを考慮して付けておくのが一般的です。

/*　例：複数のスタイル宣言の適用　*/
p {color:blue; line-height:1.5;}

コメントの書き方

/*から*/で囲んだ範囲はコメントとなります。コメント部分はブラウザには無視されるので、一時的にCSSを無効にしたりCSSソース内にメモを残す際などに使用します。コメントを入れ子にすることはできません。

/* 例：CSSのコメントの書き方 */
p {color:blue; line-height:1.5;}    /* 段落を青くして行の高さを1.5倍にする */

/**
 * コメントは
 * 複数行にすることもできます。
 */

半角スペース・タブ・改行

CSSでは半角スペース・タブ・改行はスタイルに影響しません。これらを使用してCSSソースを見やすく整形しても問題ありません。

/* 例：半角スペース・タブ・改行はスタイルに影響しない */
p {
    color : blue ;
    line-height : 1.5 ;
}

大文字と小文字

HTML では要素名と属性名の大文字・小文字を区別しませんが、 XHTMLでは要素名と属性名は小文字で定義されているのですべて小文字で記述します。CSSファイル内でこれらを記述する場合、そのCSSがHTML文書に適用されるかXHTML文書に適用されるかによって、大文字・小文字が区別されるかどうかが決まります。

文書をHTMLで作成している場合でも、将来的にXHTMLへ移行する可能性を考慮して、CSSファイル内でも要素名・属性名はすべて小文字で記述したほうが良いでしょう。

CSSの記述方法について

CSSの記述方法は2種類あります。

1つはデザインを適用したいHTMLファイルの<head>要素中に<style>タグを作成し、その中に記述する方法です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS 練習中！</title>
<style>
p {
    font-size: 18px;
    font-weight: bold;
} 
</style>
</head>
<body>
 
<p>p要素にスタイルを適用するよ</p>
 
<p>ここも影響をうけるよ</p>
 
</body>
</html>

2つ目は、CSSファイルを作成して外部ファイルとして読み込む方法です。（※推奨）

CSSファイルを用意する: 読み込ませたいHTMLファイルと同じ階層に"styles.css"という名前のCSSファイルを作成します。ファイル名は変更しても問題ありません。文字エンコーディングは「utf-8」とし、以下の内容を記載します。

@charset "utf-8";
p {
     font-size: 18px;
     font-weight: bold;
} 

HTMLファイルを準備する: デザインを適用したいHTMLファイルに<link>タグを追加し、CSSを読み込ませます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>CSS 練習中！</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>

href 属性には、読み込むCSSファイルのパスを指定します。上記の例では、同じディレクトリにある "styles.css" ファイルを読み込んでいます。

目的​

CSSとは​

CSSのバージョン​

CSSの書き方​

CSSの基本書式（セレクタ・プロパティ・値）​

複数のスタイルを指定する​

コメントの書き方​

半角スペース・タブ・改行​

大文字と小文字​

CSSの記述方法について​

目的