Nagashima Laboratory

CSSの基本

CSSとは

  • カスケーディング・スタイルシート（Cascading Style Sheets）。一般にスタイルシートと呼ばれます
  • ウェブページの視覚表現を制御するための言語です
  • HTMLで書かれた内容に、視覚的な価値を付与し、全体としての価値を高めます
  • 色、文字、線、背景の設定や、位置（レイアウト）の設定など、装飾に関わる設定を行います

CSSの記述場所

以下の３つの書き方がありますが、３番目の方法を推奨します。

  1. HTMLタグ内に記述
  2. <head>内に記述
  3. 独立したファイル（拡張子.css）に記述【←推奨】

1.HTMLタグ内に記述

<p style="color: red;">赤い文字として表示</p>

特定の場所だけに効果が及びます

2.<head>内に記述

<head>
  <style>
    p {
      color:red;
    }
  </style>
</head>
<body>
…

上記の例では、このページ内の、p（段落）全ての文字色が赤になる <head>内に書くため、そのファイル内にだけ効果が及び、他のファイルに対しては改めて記述する必要があります。

3.独立したファイル（拡張子.css）に記述

  • HTMLでは、文書の構造（見だし、箇条書きなど）を定義します
  • CSSでは、色、文字、線、背景の設定や、位置（レイアウト）の設定など、装飾を定義します
  • HTMLからCSSをリンクします
  • すべてのHTMLページを原則一つのCSSで制御します
    （すべてのHTMLに共通の要素については、一つのCSSで制御します。特定のページにのみ関係する内容の場合は、別のファイルとして作成することもあります。ファイルが複数に増えると管理が煩雑になります）

HTML側では、<head>内に、CSSを関連づける記述をします

▼style.cssというファイルをリンクする場合

<link rel="stylesheet" href="style.css">

CSS側では、設定を記述し、拡張子 .css のファイルとして保存します

▼ページ全体の背景色を灰色（gray）に、h1の文字色を赤にする設定

body {
  background-color: gray;
}
 
h1 {
  color: red;
}

CSSの記述体験

CSSを使うとHTMLがどのように変化するのかを体験します。

  1. css_sample_01という名前のフォルダを作成します。
  2. index.htmlを作成し、ブラウザで表示を確認します（HTMLファイルしかないときにどのように見えるのかを確認します）。
  3. 同じフォルダの中ににstyle.cssを作成し、index.htmlをブラウザで確認します。

▼index.html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>サイトのタイトル</title>
</head>

<body>
  <div id="wrap">
    <header> 
      <p>ヘッダー要素（ページ見出しやロゴ）が入ります </p>
    </header> 
    <nav> 
      <p>ナビゲーションが入ります</p> 
    </nav> 
    <main> 
      <p>メイン要素（見出し、本文、画像などの主要な内容）が入ります</p>
    </main> 
    <footer> 
      <p>フッター要素（コピーライトなど）が入ります</p>
    </footer> 
  </div>
</body>

</html>

▼style.css

@charset "UTF-8";
body {
  background-color: gray;
}
 
#wrap {
  width: 960px;
  margin: auto;
  background-color: white;
}
 
header {
  padding: 40px;
  height: 80px;
}
 
nav {
  padding: 8px 40px;
  background-color: black;
  color: white;
}
 
main {
  padding: 40px;
  height : 400px;
}
 
footer {
  padding: 40px;
  height: 40px;
  background-color : black;
  color: white;
}

CSSの書式

CSSでは「どの部分の、何を、どうするか」の順に記述します

下記の例では、body（ページ全体）のbackground-color（背景色）をwhite（白色）にするという意味になります

  • セレクタ：何に対して（body）
  • プロパティ：どの部分（background-color）
  • 値：どのように（white）

１つのセレクタに複数のプロパティと値を宣言可能です。中括弧 { }の間に複数列挙して記述します。

▼bodyの背景色を白色、bodyに含まれるテキストの色を赤色にする設定

body {
  background-color: white;
  color: red;
}

サンプルコードの中で使用しているプロパティ

上述のサンプルコードでは、次のようなプロパティを使用しています。

CSSにおける色の指定方法

colorやbackground-colorと言った、プロパティでは色を指定します。CSSで色を指定するときは、標準的には、RGB値を16 進数で表現したカラーコード（#FFFFFF、#000000など）を使います（web制作に関する基本用語・技術参照）。blue, red など、一部の色はカラーキーワードが使えますが、ブラウザによって、微妙に色が異なる場合があります。

そのほか、CSS 関数の rgb()やrgba()、hsl()を使う指定方法もあります。思いに、rgbaは透明度を扱うときに使用されます。

【参考】CSS を使った HTML の要素への色の適用

コメントアウト

  • /*と*/で囲んだ場所は、コメントとして処理されます
  • Visual Studio Codeでは、⌘/（スラッシュ）で当該行をコメントアウトします
  • 一時的に効果を無効にしたい場合にも使えます

▼使用例①コメントを書く

body {
  background-color: white; /*背景を白に設定する*/
}

▼使用例②記述内容を無効にする

/* color: red; */

セレクタの種類

タグ、ID、classの３つの書き方があります。

タグセレクタ

  • 特定のタグを対象にします

▼CSS

body {
  background-color: white; /*背景色を白に*/
}

IDセレクタ

  • HTMLに設定した任意のIDを対象にします
  • １つのファイル内で同じID名は１回しか使えません
  • CSS側でID名を参照するときは、#（ハッシュ）を冒頭につけます

▼HTML

<div id="wrapper">
・・・
</div>

▼CSS

#wrapper {
  width: 1200px; /*幅の設定*/
}

classセレクタ

  • HTMLに設定した任意のclassを対象にします
  • 1つのファイル内で、同じclass名を繰り返し使用することができます
    （同じ設定を適用することができる）
  • CSS側でclass名を参照するときは、.（ドット）を冒頭につけます

▼HTML

<p class="page-text">テキストが入ります</p>

▼CSS

.page-text {
  color: blue; /*文字色を青に*/
}

参考

() Category: 資料 Tags: