読者です 読者をやめる 読者になる 読者になる

ハロートレーニングWebデザインの勉強 Webデザイン フェリカテクニカルアカデミーWebサイト制作科

初心者のためのCSS記述ルール

CSS

CSSとは

1. CSSの記述場所
  • テキスト P.011
  • 記述場所(head部内に記述する:embed)
  • style要素
<html>
<head>
<title>HTMLの練習</title>
<style>

</style>
</head>
<body>
<h1>はじめてのHTML</h1>
<p>今日はじめてHTMLを書きました。</p>
</body>
</html>
2. 見出しの色を赤くする
  • セレクタ(指定する要素)
  • プロパティ: 値; という形で記述する
<html>
<head>
<title>HTMLの練習</title>
<style>
h1 { color: red; }
</style>
</head>
<body>
<h1>はじめてのHTML</h1>
<p>今日はじめてHTMLを書きました。</p>
</body>
</html>

f:id:web-css-design:20160810134901p:plain


CSSの役割

CSSの3つの働き

設定内容 名称 役割
どこに セレクタ スタイルを設定する場所を指定するところ

どんな
スタイルを

プロパティ どのようなスタイルかを設定するところ
「色を変えたい」「大きさを変えたい」など
どれだけ バリュー(値) プロパティに対して値を指定する
「赤色にしたい」「大きくしたい・小さくしたい」など

CSSの記述ルール

CSSの宣言の数はいくつでも設定できる

セレクタの基本

CSSを記述する場所
  • テキストP.65
  • 外部ファイルに記述する
  • headタグ内にstyleタグを設定する(エンベッド)
  • HTMLタグに直接スタイルを記述する(インライン)

Webページで使われる単位

px
ピクセル
ディスプレイの表示単位のpxを使って設定する単位
em
(エム)
1文字分の高さを1emとして設定する単位
(アルファベッドの大文字 M が文字のスペースになっている)
rem
(レム)
「root」+「em」という意味で、root要素(html要素)
に対して相対的にフォントサイズを指定する単位
%
(パーセント)
基準になる数値に対して何%で表示するかを指定する相対単位
数字が
「0」のとき
単位は、記述しない

※幅の固定には「px」、幅の可変には「%」。

CSSで使われる色

  • 光には階調がある(RGBそれぞれに256階調あります)
  • 256階調を16進数で表現
  • 16進数には、6桁と3桁の表記がある

CSSの基本概念

Webページのテキスト

  • 情報を伝える文字
  • デフォルトスタイルシート(ユーザーがスタイルを指定しなくても初期設定でスタイルが設定されています)User Agent Style Sheets
文字のサイズを指定
  • font-size プロパティ
文字色を指定
  • color プロパティ
フォントの種類を指定
  • font-family プロパティ
文字の太さを指定
  • font-weight プロパティ
行の高さを指定
  • line-height プロパティ
文字の字間を指定
  • letter-spacing プロパティ
水平方向の位置を指定
  • text-align プロパティ
テキストリンクの色を指定
  • 擬似クラスを使ってテキストリンクの状態をごとに色を変える
文字に線をつける
  • text-decoration プロパティ
文章の一部だけスタイルを変更
  • span要素を使って一部の文字を変更する
一行目の字下げを指定
  • text-indent プロパティ
  • 1文字単位で「em」で設定する

注意