ＣＳＳ　２日目

第１０章：文字・文章のスタイルを定義

文字・文章のスタイルを定義

文字色を定義する：color

color: 色の値;

参考リンク：色番号参考

16進数 色番号

光の三原色R（Red）、G（Green）、B（blue）の強さを
00（0:暗い）～ff（255：明るい）で指定する
16進数

10進数 色番号

※半透明の場合は「rgba」「rgb」を使用する

古い表記
不透明度：0（透明）～1（不透明）で指定

今後主流になるモダン表記
不透明度：0% ～ 100%（不透明）で指定

h1 {
  color: #ff5722;
}
h2 {
  color: rgb(156 39 176 / 70%)
}

検証ツールで色番号を抽出

検証ツール上で適当な色の番号を確認できたら
番号をCSSファイルにコピペする

Can I use でブラウザの CSS対応状況を確認

画面上部の ＜Can I use ［　　］？＞ 検索部分に調べたいプロパティ名やキーワードを入力することでブラウザ対応状況が表示される。

各ブラウザのバーションが書いてあって、バージョン毎に対応しているかどうか確認ができる。赤くなっている所は対応していない。

文字サイズを定義する：font-size

font-size: 文字サイズの値;

代表的な値	解説・記述例
単位付きの数値	単位付きの数値で大きさを指定
キーワード	決められたキーワードで指定 small medium large等 ※あまり使われない

h1 {
  color: #ff5722;
  font-size: 20PX;
}

「font-size: 100%;」はそのtextが属する親の要素の文字の大きさが基準になるので
思い違いが起きやすい。
※必ず検証ツールで確認をする

検証ツール：デザインを一時的に無効化

デザイン定義の左側にある「チェックボックス」を使って一時的にデザイン定義を無効化できるので
変更前後の確認に便利

文字の太さを定義する：font-weight

font-weight: 太さの値;

代表的な値	解説・記述例
normal	標準の太さ
bold	太字
数値	細い100～900太い 100刻みの数値

基本書体で使用する数値
400：標準の太さ（normal）
700：太字（bold）

pre {
  font-weight: 700;
}

文字のスタイルを定義する：font-style

font-style: 斜体の値;

代表的な値	解説・記述例
normal	標準（斜体じゃない）
italic	斜体

pre {
  font-weight: 700;
  font-style: italic;
}

文字の装飾を定義する：text-decoration

text-decoration: 装飾の値;

代表的な値	解説・記述例
none	装飾しない
underline	下線をつける
line-through	取り消し線をつける
overline	上線をつける

pre {
  font-weight: 700;
  font-style: italic;
  text-decoration; underline;
}

●検証ツール：デザインを試してみる

行揃え定義する：text-align

text-align: 行揃えの位置;

ブロックレベル要素内の文章を、左揃え、右揃え、中央揃え、両端揃えにできる

定義した要素自体の表示位置を変更するわけではないので注意

代表的な値	解説・記述例
left	左揃え
center	右揃え
right	中央揃え
justify	最終行を除いて両端揃え

p {
  text-align: right;
}

書体を定義する：text-family

text-family: 優先度１番の書体名, 優先度２番の書体名, …, キーワード;

font-family プロパティで指定した書体が閲覧者のＰＣに存在する場合のみ適用される

body {
    font-family:
    "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}

↑ゴシック体指定時によく使う記述
　　各OSの標準書体をそれぞれ指定することが多い。

種類	書体名	キーワード
ゴシック体	メイリオ、ヒラギノ角ゴシック、Arial	sans-serif
明朝体	MS P明朝、ヒラギノ明朝、Times	serif
OS使用書体	Yu Gothic UI、Meiryo、ヒラギノ角ゴシック、 San Francisco	system-ui
等幅フォント	MS ゴシック、MS 明朝、Osaka-Mono	monospace
筆記体	Comic Sans MS など	cursive
装飾フォント	Monotype Corsiva など	fantasy

ブラウザによって表示フォントが違う

font-familyを指定することで異なるブラウザでも表示フォントを統一でき、見た目を揃えることができる。

※デザイン性の高いフォントを使いたい場合はWebフォントを利用する

実際に使用する際には「ググる」（年度の新しい情報を探す）⇒コピペ

使用しているＰＣに入っている書体が確認できる便利なサイト

「wordmark.it」

行間を定義する：line-height

line-height: 行間の値;

代表的な値	解説・記述例
nomal（初期値）	ブラウザが判断して高さを指定
単位付きの数値	単位に応じた数値で高さを指定
単位なしの数値	数値にフォントサイズを掛けた値で高さを指定

単位なし数値で文字の重なりを防ぐ

※基本的に「line-height」は「単位なし数値」で指定する

文字に影を付ける：text-shadow

text-shadow: 横方向位置 縦方向位置 ぼかし 色;
　（text-shadow: ○○px ○○px ○○px #○○○○;）

「ぼかし」「色」は省略可能

h1 {
  color: #ff5722;
  font-size: 20px;
  text-shadow: 2px 2px #ccc;
}

値に複数の設定を入れていくときに、半角空白で区切るものと「,」で区切るものがあるので注意

Webフォントの使い方：Google Fonts

メリット：必ずその書体で表示される

デメリット：インターネット環境がないと表示されない
　　　　　　表示速度が遅い　※多くても2・3書体

Google Fonts 欧文フォント（無料）
https://www.google.com/fonts

使用したいフォントを選択したら、右側のウィンドウから@importを選んで
「@import　～　;」までコピー

※CSSファイルに持っていくため、＜style＞は入れない

CSSファイルの先頭にペースト！
「@import　～　;」まで

font-familyに指定する「フォント名」をコピー

font-familyプロパティの一番優先度が高い場所にWebフォントの書体を追記する

検証ツールでCSSエラー箇所を探す

プロパティや値の記述ミス

• プロパティや値の記述ミス
  記述した定義に「！」マークと「打消し線」が表示されるので確認して修正する
• プロパティと値の間にある「：」や「；」抜け
  記述した定義に「！」マークと「打消し線」が表示されるので確認して修正する
  「；」抜けの場合には次に指定した定義も一緒に打ち消される

  　　　　　　　　color: #ff5722  font-size: 60px;　↓　

• プロパティと値の間にある「：」「；」を全角文字で記述
  テキストエディタでは見つけづらい記述ミス。

セレクタの記述ミス

セレクタ開始の「{」や終了の「}」を忘れてしまう

h1 
  color: #ff5722
  font-size: 60px;

検証ツールに自分が定義したスタイルが「セレクタごと表示されない」

※デザインが一気に消えてしまっている時には「セレクタ部分に問題がある」可能性が高い。この場合は中括弧｛｝のセットが揃っていないところがないか確認すればOK

確認のポイントは「デザインが反映サレテイナイセレクタ」もしくは「そのセレクタより上に記述されているセレクタ」の開始「{」終了「}」がセットになっているか

第１１章：背景色・背景画像のスタイルを定義

背景色・背景画像を定義

背景色を定義： background-color

background-color: 色の値;

初期値は「transparent（透明）」

body {
  background-color: #d2d2ee;
}

背景画像を定義： background-image

body {
  background-color: #d2d2ee;
  background-image: url(画像の場所);
}

絶対パス・相対パスで記述

背景画像を定義：background-repeat

body {
  background-color: #d2d2ee;
  background-image: url(画像の場所);
  background-repeat: 繰返しの値;
}

代表的な値	解説・記述例
repeat（初期値）	縦・横方向ともに繰返し表示
repeat-x	横方向（x軸方向）に繰返し表示
repeat-y	縦方向（y軸方向）に繰返し表示
no-repeat	繰返し表示させず、１枚のみ表示

背景画像の表示開始位置を定義：background-position

●キーワードで背景画像の表示開始位置を定義

background-position: キーワード キーワード;

例）background-position: right top;
　　background-position: top right;

代表的な値	解説・記述例
left（初期値）	左寄せ
right	右寄せ
top（初期値）	上寄せ
bottom	下寄せ
center	中央寄せ
単位付き数値	要素内の左上基準点からの距離 マイナス値の指定可能 ※横方向　縦方向　順に指定

●数値で要素の左上を起点に背景画像の表示開始位置を定義

background-position: 横方向数値 縦方向数値;
background-position-x: 横方向数値;
background-position-y: 横方向数値;

例）background-position: 200px 400px;

●キーワード位置を起点に数値で背景画像の表示開始位置を定義

background-position-y: キーワード 数値 キーワード 数値;

例）background-position: right 200px bottom 400px;

背景画像の固定・移動を定義：background-attachment

background-attachment: 固定・移動の値;

代表的な値	解説・記述例
scroll（初期値）	スクロールと共に背景画像も移動
fixed	背景画像が固定されスクロールしても動かない

背景画像のサイズを定義：background-size

background-size: キーワード;
background-size: 幅の数値 高さの数値;

例）background-size: 200px 400px;

代表的な値	解説・記述例
auto（初期値）	幅・高さ共にautoの場合は画像本来の数値 幅・高さのどちらかを変更している場合は縦横比を維持して自動拡大・縮小
contain	背景画像を切り取らずに表示 背景画像が表示されない箇所が発生する可能性あり できるだけ大きく表示されるよう縦横比を維持して拡大・縮小
cover	背景画像で要素のすべての領域を覆うように表示 背景画像が表示されない箇所が発生しない できるだけ大きく表示されるよう縦横比を維持して拡大・縮小 背景画像の上下または左右が切り取りされる可能性あり
単位付き数値	指定した値にサイズを変更して表示 幅・高さ両方を指定した場合は縦横比が変更される可能性あり マイナス値は指定できない 記述例）background-size: auto 100px; background-size: 100% auto; ※グラデーション指定時のautoは非推奨

背景のスタイルを一括定義：background

background:背景色 背景画像 繰返し 表示位置 固定移動;

background:背景色 背景画像 繰返し 表示位置/サイズ 固定移動;

※「background-size」を一括指定に含めるときは要注意
「background-position」を省略することができなくなり「表示位置 / サイズ」の順で指定して「/」で区切ることが必須になる。「表示位置 / サイズ」がセットになっていれば値の位置は自由。

サイズ「background-size」を一括指定に含めるとルールが複雑になるので、
サイズのみ一括指定から外して記述してもOK

※個別指定は一括指定の下に記述する

指定していない値は初期値になる

body {
/*
  background-color: #e4f3ff;
  background-image: url(../img/line01.png);
  background-repeat: repeat-x;
  background-position: top 10px center;
  background-size: auto 10px;
*/
  background: #e4f3ff url(../img/line01.png) repeat-x top 10px center/auto 10px;
  }

「position」の＜ top 10px center ＞は各値に半角空白が入るが、セットで記述する必要がある

グループにclass名を付けてデザインを指定する

＜.クラス名＞←ドット始まり！

.box {
  min-height: 300px;
}

.favorite1 {
  background-color: #fcc;
  background-image: url(../img/cat01.png);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 200px auto;
}
.favorite2 {
  background: #ffc url(../img/rabbit01.png) no-repeat right bottom;
  background-size: 200px auto;
}
.favorite3 {
  background: #ccf url(../img/frog01.png) no-repeat right 30px bottom 10px;
  background-size: 230px auto;
}

背景画像を提供するサイト

Subtle Patterns

Bg-Patterns

１つの要素に対して背景画像を複数指定

●一括指定

background:
  前面の背景画像一括指定,
  背面の背景画像一括指定 背景色;

※注意※背景色は最後の一括指定にのみ記述する
　　　　最後の一括指定以外に背景色を記述するとエラーになる

background: url(img/bg_top.png) repeat-x center top/500px auto,
  url(img/bg_bottom.png) repeat-x center bottom/auto 40px,
  #d2d2ee url(img/bg01.jpg) no-repeat center top/cover fixed;

●個別指定

background-○○○○:
  前面の個別指定の値,
  背面の個別指定の値;

  background-color: #e4f3ff;
  background-image:
    url(../img/line01.png),
    url(../img/line02.png);
  background-repeat:
    repeat-x;
    /*
    値を一つだけ指定すると
    複数画像すべてにその設定は反映される
    */
  background-position:
    top 10px center,
    bottom center;
  background-size:
    auto 10px,
    auto 30px;