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;
}

HTMLタグについての補足

サンプルのHTMLに見られる、<div><header><nav><main><footer>というタグは、それぞれグループを作るタグです。

  • <div>：一般的なグループ（特に特定の役割を持たない）
  • <header>：ヘッダー要素（タイトル、ロゴなど）
  • <nav>：ナビゲーション要素（メニューなど）
  • <main>：メイン要素（ページ内の主要コンテンツ）
  • <footer>：フッター要素（copyrightなど）

すべてdivで作ることも可能ですが、タグを使い分けることで、それぞれの役割がはっきりして、より見やすいコードになります

CSSの書式

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

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

１つのセレクタに複数のプロパティと値を宣言可能…という部分についての補足です。複数を列挙すると、下記のような書き方になります。

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

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

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

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

CSSにおける色の指定方法

colorやbackground-colorと言った、プロパティでは色を指定します。CSSで色を指定するときは、標準的な色名（red、whiteなど）や、RGB値を16 進数文字（#FFFFFF、#000000など）を使います（web制作に関する基本用語・技術参照）。

そのほか、CSS 関数の rgb()や、hsl()を使う指定方法もあります。

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

コメントアウト

/*と*/で囲むと、コメント扱いになり、設定を無効にできます

/*   color: red; */

セレクタの種類

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

  • タグ…特定のタグに対してCSSを記述します
  • ID、class…HTML側で任意のIDやclassを指定した上で、CSSを記述します

（IDについては、１つのファイル内で１回しか使えないという規則があります）

※今は３種類の書き方があるという程度に留めます。使い分けについては、これから、サンプルの制作を通して、ある程度慣れてからで大丈夫です

参考リンク

() Category: 資料 Tags: