CSSとは

CSSとは

  • Cascading Style Sheets
  • 構造化された文書をどのように表現するのかを指定するための言語
  • 文字の色、文字の大きさ、余白などのレイアウトの指定
CSSの基本書式

f:id:lesson3:20170815025830j:plain

h1 { color: red; }

CSSをHTMLに適用

  1. style属性で局所的にスタイルを適用する
  2. style要素で文章単位で適用する(embed)
  3. link要素で外部CSSファイルを読み込んで適用する
style属性で局所的にスタイルを適用する
<p style="color: red;">style属性で文字色が赤になります。</p>
style要素で文章単位で適用する(embed)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページタイトル</title>
<style>
p { color: red; }
</style>
</head>
<body>
<h1>見出し</h1>
<p>style要素でCSSが適用されて文字色が赤になります。</p>
</body>
</html>
link要素で外部CSSファイルを読み込んで適用する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページタイトル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>見出し</h1>
<p>link要素で外部CSSが適用されて文字色が赤になります。</p>
</body>
</html>


《 style.css

@charset "UTF-8";

p { color: red; }

セレクタの種類

タイプセレクタ

IDセレクタ
  • 要素に対し id属性として ID名を付与した場合、「# + ID名」をセレクタ名として指定する
  • ID名の重複はできません
<p id="blue">この文字色は青になります。</p>
#blue { color: blue; }
クラスセレクタ
  • 要素に対し class属性として ID名を付与した場合、「. + ID名」をセレクタ名として指定する
  • クラス名の重複は可能で、共通する修飾に利用します
  • 要素に対し、ID名とクラス名を同時に指定することは可能です。
<p class="blue">この文字色は青になります。</p>
.blue { color: blue; }
子孫セレクタ
<div class="content">
<p>この文字色は青になります。</p>
.content p { color: blue; }
セレクタ
  • 親要素の直接の子要素のみにスタイルが適用されます
<div class="content">
<p>この文字色は青になります。</p>
.content>p { color: blue; }
複数(グループ)セレクタ
  • 複数の要素ににスタイルが適用されます
  • カンマ区切りで並べていきます
CSS内にコメント
  /* 1行コメント */
  /*
  複数行の
  コメント
  */

求職者支援訓練 フェリカテクニカルアカデミー