改めて、CSSとは（Cascading Style Sheets)

拡張子 .css (CSSを適用させる方法は３つ有ります。）

HTMLだけでの作成は、背景が白、文字が黒にしかなりません、これを装飾するのがCSSになります。

CSSは、HTMLとは別のファイルに記述します。
HTMLで用意した要素に対して、CSSを用いて「どこの」「何を」「どうする」かを指定することができます。
図の例では、「h1要素の」「color（色）を」「red（赤）」にしています。
（このときの対象(要素名)をセレクタ、変更項目をプロパティと言います）
プロゲートより

2024.02.05 (60)

CSSファイルを読み込んで適用させる（1番一般的な方法です）

(.css)の拡張子がついたCSSファイルを作成し、それをHTMLファイルに読み込ませ適用させる。一括で管理が出来、修正する場合も１つのCSSファイルを変更するだけなので簡単です。

適用方法

HTMLファイルの<head>内に<link>タグを使ってCSSファイルを指定します。rel属性に（stylesheet),href属性にCSSファイルを指定すれば、CSSファイルに書かれた装飾を適用できます。

例

<!doctype html>

<head>

<title>柴犬の生活</title>

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

</head>

<body>

<p>ひたすら散歩</p>

</body>

</html>

rel属性にstylesheet,href属性にstyle.cssのファイル指定した。

HTMLファイルの<head>内に<style>タグで指定する。

２番目はHTMLファイルの<head>内にCSSを書き込む、CSSを記述したHTMLのみに適用されます、前回の様に他のHTMLには反映されません。（特定ページ用）

適用方法

HTMLファイルの<head>内に<style>タグを追加し、その中にCSSを書いて行きます。

例

<!doctype html>

<head>

<style>

h1 {color: #f00; }

p { font-size:18px; }

</style>

</head>

<body>

<p>ひたすら散歩</p>

</html>

</style>

</head>

</html>

2024.02.08 (60)

HTMLタグの中にstyle属性を指定する。

HTMLタグに直接CSSを書き込む方法、マイナス面は、１つ、1つのタグに指定するので手間がかかり、メンテナンスも難しくなります。プラス面はCSSを上書きしたい時や一部のデザインだけ変更したい時は便利です。

適用方法

タグ内にCSSを書く時は、各タグの中にstyle属性を指定する。

例

<!doctype html>

</head>

<body>

</body>

</html>

結果

柴犬の１日

ひたすら散歩

柴犬の１日

ひたすら散歩犬の一日

犬の一日

HTMLのタグ内に直接CSSを書き込む

一般には（CSSファイルを読み込んで適用させる方法を使う）

2024.02.10 (180)

テキストエディターを起動→ＣＳＳコードを書く→ＣＳＳファイルを保存→HTMLファイルの<head>内からCSSファイルを読み込ませる。

例

<!doctype html>

<head>

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

CSSのファイル名のルール

日本語やスペースや記号（一部）は使えません、ファイルには（.css）と言う拡張子を付ける

CSSの文法
CSSを書くルール
色の指定方法は３つ有ります。
色の効果
色のイメージ

CSSの文法

名前	例	内容
セレクター	h1,｛　｝	どの部分を装飾するかを指定する。｛～｝内
プロバティー	color　、：	セレクターで指定された部分の何を変えるか（色、サイズ、背景　等）を書く、プロバティーに続けて、値との間には：（コロン）を書いて区切る
値	white　、；	外観をどのように変えるかを書きます。（白、赤、どの画像、どういうサイズ）値の最後に；（セミコロン）を書く

例

h1｛color:white:}

CSSを書くルール

半角英数字で書く、出来れば小文字で統一する、同じ装飾を指定する時は、カンマ(,)で区切る（数や順番は関係ない）、どの行にもセミコロン（；）を付ける様にする（訂正時エラーにならない為）

例

h1 {color:white;font-size:20px;}

単位を指定する

単位	読み	説明
px	ピクセル	画面上の最小単位（１ピクセル）を基準とした単位
%	パーセント	親要素のサイズを基準に割合で指定した単位
rem	レム	ルート要素（HTML要素）に指定されたサイズを基準とした単位

単位	読み	説明
px	ピクセル	絶対値、指定したサイズから変動する事は無い
%	パーセント	相対値、要素のサイズによって変動する
rem	レム	相対値、要素のサイズによって変動する

例

h1｛font-size:20px;｝

要素の中の要素に指定する

複数のセレクター（下記に意味を纏めます）を半角スペースで区切ると、指定した要素の中にある要素に装飾指定出来ます。例えば<div>タグの中にある<p>タグがあるとき、セレクターを（div p)というように半角スペースで区切って（<div>タグの中の<p>タグ）と指定できる。

セレクター	内容
タグ名セレクタ	タグ名をそのまま書く事で特定のHIML要素にスタイルを適用できます。例えば<p>は全ての段落要素に対してスタイルを指定します。
IDセレクタ	#を使って特定のIDに対してスタイルを指定します。#my-elementはIDがmy-elementの要素に適用します。
クラスセレクタ	. を使て特定のクラスに対してスタイルを指示します。例えば　.my-classはクラスがmy-classの要素にスタイルを適用します。
子孫セレクタ	要素の中に別の要素が入る場合、子　要素を選択する為に半角スペースを使います、例えば、　．Parent　．child　は親要素内の子要素にスタイルを適用します。
疑似クラスセレクタ	特定の状態にある要素を選択する為に使用されます。例えば　:hoverはマウスが要素上にあるときにスタイルを適用します。

下記の様にHTMLに<div>タグで囲まれた<p>タグと囲まれていない<p>タグが有った場合CSSで（div p)に対しての装飾が書かれると、<div>タグで囲まれていない方の<p>タグの文字色が変わりません。

例

HTML

<div>

<p>チャチャ柴犬</p>

</div>

CSS

div p {color:red;}

結果

チャチャ柴犬のみ色が赤になる。

2024.02.11 (180)

文字の大きさを変える（font-size）

font-sizeプロバティは文字のサイズを指定します。大きさは主に　px,rem,%（数値）を使います。

キーワード　xx-small,x-amall,small,medium,large,x-large,xx-large（mediumが標準サイズ）

ページの基準となる<html>タグに（font-size:100%;）を指定するとブラウザーのデフォルトの文字サイズ、またはユーザーがブラウザーの環境設定により調整したサイズを基準に相対値を設定出来ます。それに対して（px)で指定したサイズは、基準サイズと関係なく絶対値として設定されます。

例

HTML

<body>

<h2>ひらすら寝ています</h2>

<p>

猫は毎日12〜16時間は睡眠をとると言われています。

ただし、熟睡している時間は意外と少なく、ほとんどが浅い眠りです。

物音がするとすぐ目を覚ますのはそのせいなんですね。

</p>

</body>

</html>

CSS

@charset “UTF-8”;

html {

font-size: 100%;

}

h1 {

font-size: 2rem;

}

h2 {

font-size: 20px;

}

結果

猫の一日

ひたすら寝ています。

猫は毎日12〜16時間は睡眠をとると言われています。ただし、熟睡している時間は意外と少なく、ほとんどが浅い眠りです。物音がするとすぐ目を覚ますのはそのせいなんですね。

適切な文字サイズは

文字サイズは小さい程　読みにくくなります。一般的には（１４ｐｘ～１８ｐｘ）が良いですが　高齢者が対象で有れば大きめの文字にしましょう。文字サイズの種類は5種類以下が望ましい

見出しとジャンプ率

ジャンプ率とは、見出しと本文の文字の大きさの差をいい、ジャンプ率が高いと躍動的な雰囲気になり、低いと上品で落ち着いた雰囲気になります。

フォントの種類（font-familyプロバティ）

font-familyプロバティを使ってフォントの種類を指定します。指定したフォントをユーザーがインストールしていない場合は、ブラウザーで設定しているデフォルトのフォントで表示されます。CSSの設定では複数のフォントを指定でき、フォントの種類を（　, （カンマ））で区切って先に指定した物から順に適用されます。ブラウザによっては、日本語のフォント名を識別できない為、英語表記のフォント名も同時に指定する。

フォント名

フォントの名前を記述、日本語名やフォント名にスペースが含まれている場合は、フォント名を（　’　）シングルコーテーションまたは、（　”　）ダブルクォーテーションで囲って指定する。

キーワード

sans-serif（ゴシック系）、serif（明朝系）、cursive(筆記体）、fantasy（装飾系）、monospace（等幅）から指定する。

例

@charset “UTF-8”;

h1 {

font-family: serif;

}

h2 {

font-family: “游ゴシック体”, “Yu Gothic”, YuGothic, sans-serif;

}

font-family: “ヒラギノ丸ゴ Pro W4“,”Hiragino Maru Gothic Pro“, sans-serif;

}

結果

猫の一日

ひたすら寝ています。

分析

serif;（serif（明朝系））のフォントの指定、sans-serif;（複数のフォントを指定している）

ヒラギノ丸ゴ Pro W4、Hiragino Maru Gothic Pro　日本語名、フォント名にスペースが含まれているので（　”　）で囲む

フォントの種類

名前	解説
明朝体	文字的には縦が太く、横が細く、丁寧でかしこまった印象になり和風で長い文章に適して居ます。
ゴシック体	縦横の線が同じ太さで文字として読み易く万能です。見出しやタイトルに多く離れたところからでも認識しやすい。
装飾系フォント	装飾目的の為、見せるが目的です。本文に使わないで見出しなどに留める。

本文のフォントはシンプルな物にする。

文字の太さを変える（font-weightプロバティ）

font-weightプロバティでフォントの太さを指定します。１～１０００の任意が可能です。通常は normal　や　bold 　のキーワードで指定するのが一般です。

キーワード

nomal(標準), bold(太字), lighter(1段階細く), bolder(1段階太く)

数値　1～１０００の任意の数値

例

@charset “UTF-8”;

font-weight: bold;

}

結果

通常の太さのテキスト

太字にしたテキスト

長文に太字は使わない。（字がつぶれて見づらい）

行の高さを変える（line-heightプロバティ）

行間を指定する時はline-heightプロバティを使う、文字サイズより大きくする。オススメ数値は　１．５～１．９の間です。

指定方法

normal　ブラウザーが判断した高さ

数値（単位無し）　フォントサイズとの比率で指定　（一般的）

数値（単位有り）　px,em,%等の単位で数値を指定

文章を揃える（text-align)

left(左揃え),right(右揃え),center(中央揃え),justify(両端揃え)一般的。

Webフォント

フォントファイルがWebサーバー上にある為、インストールして居ないフォントも表示できる。

例

Google Fonts( https://googlefonts.github.io/japanese/ )

手順

１　Google Fontsにアクセス（使いたいフォントを探す。）

２　フォントを選択する（フォントリストをクリック）

３　HTMLファイルに取り込む（Embedタブをクリックしてコードを取得<link>部分に書かれてコードをHTMLのhead内に記述する。

4　CSSファイルにスタイルを指定（CSS rules to specify families）に書かれたコードをCSSファイルのフォントに適用させたい要素に対して記述します。

例

h1{

font-family: ‘M PLUS Rounded 1c’,sans-serif;

}

2024.02.12(120)

色の指定方法は３つ有ります。

方法	内容
カラーコードで指定する（6桁の英数字で）	＃（0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f)6桁のうち左２つが赤、真ん中2つが緑、右２つが青の度合いを表しています。０に近い程　色は暗くなります。ｆに近い程　色は明るくなります。例　#ffffffは白、#000000は黒。または次の書き方でも可能です。（３桁に省略可能）白　#fff,　赤　#f00。
RGB値で指定する	RGBの数値を組み合わせて指定する方法、RBGとは赤（red),緑（green),青（blue）CSSの記述方法は、RGBの数値となります。数値は０（黒）～２５５（白）まであり、白{rgb(255,255,255)},黒{rgb(0,0,0)}さらに　この指定法は透明度を表すAlpha値も指定できます。透明度は（０は透明、０．５は半透明、１は不透明）。白の半透明指定の場合｛rgb(255,255,255,0.5)}となります。Web上のカラーピッカーを使えば、カラーコードは左に表示されます。
色の名前で指定する	色の名前で指定します。赤（red)　青（blue)　ただし細かい色調整は出来ない。例 pink,tomato,orange,gold,plum,等

文字に色を付ける（colorプロバティ）

指定方法	説明
カラーコード	#（ハッシュ）で始まる3桁または６桁のカラーコードを指定
色の名前	red,blueなど決められた色の名前
RBG値	rgbから書き始め（,カンマで区切って指定）透明度を含める場合はrgbaから始め（，カンマで区切って指定）０～１の間で記述する。

例

@charset “UTF-8”;

h1 {

color: #0bd;

}

h2 {

color: navy;

}

p {

color: rgba(10, 130, 165, .5);

}

背景に色を付ける（background-colorプロバティ)

背景に色を付ける場合は、background-colorを使います、ページ全体に色を付ける場合<body>タグに対して指定する。

例

@charset “UTF-8”;

body {

background-color: #fee;

}

h1 {

background-color: #faa;

}

無彩色は 9a9a9a,646464,等（赤緑青の２つの組み合わせが同じで有れば）直ぐに無彩色になる。

色の効果

色	効果
色相	色を円状に並べた物を色相環といい、対面色を補色、隣の色を類似色相と言う。
明度	明るさの度合い、高い程　白に近付き爽やかなイメージになり、低い程　黒に近付き落ちついたイメージになる。
彩度	色の鮮やかさを表し、高いと華やかなイメージに低いと大人ぽいイメージになります。
暖色	赤が中心で、暖かく高揚させるイメージ。
寒色	青が中心で、見た目に涼しいく真面目なイメージ。
中性色	緑が中心で、温度を感じない色相。
無彩色	白、黒で調和がとり易くスタイリッシュな印象。

色のイメージ

色	主なイメージ
赤	熱い、強い、警告
オレンジ	親近感、喜び、ビタミン
黄色	好奇心、幸福、希望
緑	自然、調和、リラックス
青	冷たさ、誠実、知性
紫	高貴、不吉、神秘
ピンク	可愛い、柔らかい、幻想
茶色	安定、伝統、地味
白	潔白、平和、無機質
黒	高級、硬い、恐怖

トーン（明度と彩度を組み合わせた概念）とは

トーン	明度	彩度	内容	イメージ
ペールトーン	高	低	薄い	可愛い、女性的
ライトトーン	高	中	浅い	柔らかい、爽やか
ブライト　トーン	高	高	明るい	楽しい、健康的
ストロングトーン	中	高	強い	信頼的、存在感
ディープトーン	低	高	濃い	深み、伝統
ビビット　トーン	中	高	鮮やかな	派手、華やか
ライトグレイッシュ　トーン	高	低	明るい灰	上品、落ち着いた
ソフト　トーン	高	中	柔らかい	和み、上品
グレイッシュ　トーン	中	低	灰	地味、都会的
ダルトーン	中	中	鈍い	濁った、エレガント
ダークトーン	低	中	暗い	男性的、丈夫
ダークグレイッシュトーン	低	低	暗い灰	重い、陰気