- 前回の復習
- 本日の訓練内容
- L3.4 セレクタの記載方法
- L3.5 px（ピクセル値）
- L3.5.2 %（要素の割合（百分率））
- L3.6 色の指定方法
- L3.6.1 色とグラデーション
- L3.6.2 カラーネーム
- L3.6.3 #rgb（ハッシュ（#）で始まる16進数3桁）
- L3.6.4 #rrggbb（ハッシュ（#）で始まる16進数6桁）
- L3.6.5 #rrggbbaa（ハッシュ（#）で始まる16進数8桁）
- L3.6.6 rgb(r,g,b )（rgb関数）
- L3.6.7 rgba(r,g,b,a)（rgba関数）
- L3.6.8 hsl(h,s,l）（hsl関数）
- L3.6.9 hsla(h,s,l,a)（hsla関数）
- L3.6.10 線形グラデーション（liner-gragdarion）
- L3.6.11 放射グラデーション（radial-gtadient）
- L3.7 リセットCSS
- L3.8 セレクタの得点
- Chromeの検証ツールをエディターとして使う
- 練習課題
- メモ
前回の復習
- CSSの基本のプロパティの種類
- CSSを書く場所（外部ファイル、HTMLのhead内、HTMLのstyle属性）
- ボックスモデルの構造
本日の訓練内容
L3.4 セレクタの記載方法
3.4.1 全称セレクタ（*）
* { プロパティ: 値; }* { プロパティ: 値; }アスタリスク（*）を指定すると、すべての要素に適用するスタイルを指定できる。
* { color: red; }
p * { color: red; }L3.4.2 型セレクタ
要素名 { プロパティ: 値; }
h1 { font-size: 140% }
p {color: red; }HTMLの要素名（タグ名）を指定すると、その要素名に合致する要素に適用するスタイルを指定できる。
L3.4.3 idセレクタ
#id名 { プロパティ: 値;}
#box1 { font-size: 140%;}
div#box2 { color: red; }L3.4.4 classセレクタ（.）
.class名 { プロパティ: 値; }
.text { font size; 140%; }
p.text2 { color: red; }L3.4.5 子孫結合子セレクタ
セレクタ セレクタ { プロパティ: 値: }<div class="selector1">親
<div class="class="c1">子１
<p class="g1"> 孫1
</div>L3.4.6 子接合セレクタ（>）
L3.7.7 隣接兄弟結合子セレクタ（+）
L3.4.8 一般兄弟結合子セレクタ（~）
L3.5 px（ピクセル値）
L3.5.2 %（要素の割合（百分率））
L3.5.3 em（要素の割合）
親要素のサイズに対する割合（1em=100%）を指定する。
L3.5.4 rem（ルート要素の割合）
ルート（htmlタグ）のサイズに対する割合を指定する。
remはフォントサイズの単位として使用される。ルートのフォントサイズの初期値は16pxに指定されている。
L3.5.5 vw（画面の表示幅の割合）
画面の表示幅（10vw = 画面幅の10%）に対する割合を指定する。
ウィンドウサイズを変更するとそれに応じて対象サイズが変更される。
L3.5.6 vh（画面の高さの割合）
画面の表示高さに対する割合（10vh = 画面の高さの10%）を指定する。「height: 100vh;」と指定すると画面の高さ（スクロールバーを含む）と同じ大きさの領域が定義できる。
L3.5.7 calc関数（値の計算）
値を四則演算で計算する。
L3.6 色の指定方法
L3.6.1 色とグラデーション
色及びグラデーションの指定方法
- カラーネーム
- #rgb（ハッシュ（#）で始まる16進数3桁）
L3.6.2 カラーネーム
カラーネーム指定は、 black、red、lime、blueなどのカラーネームで指定する。
L3.6.3 #rgb（ハッシュ（#）で始まる16進数3桁）
#rgb指定はrが赤、gが緑、bが青を示す。それぞれの色の強さは16進数（0~f）で指定する。
6桁での指定よりも表現色数が少ない（#05f = #0055ff）
L3.6.4 #rrggbb（ハッシュ（#）で始まる16進数6桁）
L3.6.5 #rrggbbaa（ハッシュ（#）で始まる16進数8桁）
6桁表現に加えて aaが不透明度を示す。00は完全に透明、ffは完全に不透明となる。
L3.6.6 rgb(r,g,b )（rgb関数）
L3.6.7 rgba(r,g,b,a)（rgba関数）
L3.6.8 hsl(h,s,l）（hsl関数）
hが色相、sが彩度、lが輝度を示す。
L3.6.9 hsla(h,s,l,a)（hsla関数）
L3.6.10 線形グラデーション（liner-gragdarion）
L3.6.11 放射グラデーション（radial-gtadient）
L3.7 リセットCSS
L3.7.1 リセットCSSとは
ブラウザは初期状態でタグ単位のデフォルトのスタイルシートを持っている。このデフォルトスタイルシートの内容はブラウザによって異なるため、意図しない表示がなされることがある。このような現象を防ぐために使用するのがリセットCSSである。
リセットCSSは、ブラウザが持っているスタイルシートをリセットするためのスタイルシートだが、スタイルシートがリセットする範囲はコーディングスタイルに依存するため、これが正解というリセットCSSは存在しない。
L3.8 セレクタの得点
L3.8.1 セレクタ得点表
セレクタには優先順位があり。点数計算をして高得点のものが採用される。
同得点の場合は後ろに書いてあるものが採用される。
Chromeの検証ツールをエディターとして使う
- CSSのセレクタ指定、プロパティと値が空欄のファイルを作成し、HTMLとリンクさせる。
- HTMLをChromeで開き、検証ツールを表示する。
- 検証ツールでページデザインを編集する。
- 【ソース】タブから編集済みCSSをコピーし、該当CSSファイルにペーストして更新する。
練習課題
- HTMLページの記述
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" content="サイトの説明文">
<meta name="keywords" content="キーワード">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML/CSSサンプル</title>
<link href="reset.css" rel="stylesheet" type="text/css">
<link href="style1.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>HTML/CSSサンプル</h1>
</header>
<main>
<h2 class="heading1">見出し1</h2>
<p class="text1">見出し1の文章です。</p>
<h2 class="heading2">見出し2</h2>
<p class="text2">見出し2の文章です。</p>
<h2 class="heading3">見出し3</h2>
<p class="text3">見出し3の文章です。</p>
<h2 class="heading1">見出し4</h2>
<p class="text1">見出し4の文章です。</p>
<h2 class="heading2">見出し5</h2>
<p class="text2">見出し5の文章です。</p>
<h2 class="heading3">見出し6</h2>
<p class="text3">見出し6の文章です。</p>
<h2 class="heading1">見出し7</h2>
<p class="text1">見出し7の文章です。</p>
<h2 class="heading2">見出し8</h2>
<p class="text2">見出し8の文章です。</p>
<h2 class="heading3">見出し9</h2>
<p class="text3">見出し9の文章です。</p>
</main>
<footer>
<p><small>©2022 ○○○○.</small></p>
</footer>
</body>
</html>
- リセットCSSを適用
- style CSSを作成、適用
@charset "utf-8";
header {
}
header h1 {
font-size: 3rem;
text-align: center;
background: blue;
color: #ffffff99;
}
main {
}
main h2 {
font-size: 1.7rem;
font-weight: bold;
color: aqua;
padding-left: 10px;
}
main h2.heading1{
font-size: 3rem;
}
main h2.heading2{
color: violet;
}
main p {
font-size: 1.4rem;
padding-left: 20px;
}
main p.text1{
color: #ffd988;
}
footer{
background-color: blue;
text-align: center;
}
footer small {
font-size: 0.8rem;
color: #ffffff;
}
メモ
-本日のアジェンダ-
1限目
学科 CSS基礎②
セレクタ記載方法とセレクタ得点について
2限目
学科 CSS基礎②
幅・高さの単位と色の指定方法について
3限目
学科 CSS基礎②
リセットCSSについて
4限目
学科 CSS基礎②
CSSのまとめ
5限目
学科 CSS基礎②
過去の訓練の復習
本日のテーマ
セレクタを使いこなしましょう
セレクタの記載方法について
CSSでスタイルを適用する箇所を指定するセレクタは、色々な記述方法があります。HTMLの特定のタグを指定する場合でも厳密に書くこともできますし、あいまいに書くこともできます。HTMLの記述状況によって適切なセレクタの書き方ができるようになりましょう。
参考サイト
セレクタの得点について
セレクタの記述方法によって点数計算が実施され高い点数を獲得したセレクタに設定されているスタイルが有効になります。同一のプロパティが複数記述されている場合は、点数計算の結果が同じ場合は、後ろに書いてあるプロパティが有効になりますが、前に書いてある方が点数が高い場合は、前に記述したプロパティが有効になりますので注意してください。
参考サイト
幅・高さの単位について
CSSで幅や高さを指定する場合の単位は、複数の指定方法があります。思い通りのレイアウトデザインを構築するためには、適切な幅や高さの記述が必要です。それぞれの指定方法の特徴を理解して適切な単位を使用できるようになりましょう。
参考サイト
色の指定方法について
色の指定には、カラーネーム、16進数、RGB値、HSL値などの指定方法があります。保守性も考慮して適切な指定方法を使えるようになりましょう。また、グラデーション指定を使うことでデザインの幅を広げることもできます。
参考サイト
リセットCSSについて
ブラウザが持っているデフォルトのスタイルを打ち消すCSSをリセットCSSといいます。リセットCSSを使用することでブラウザが持っているスタイルに依存することなく、Webページを自由にデザインすることが可能になります。リセットCSSには、正解のリセットCSSというものはありません。自分のコーディングスタイルに合わせてリセットCSSも成長させてください。
参考サイト
本日の課題①
WordPressサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。
本日の課題②
過去の訓練の復習として訓練内容を「投稿ページ」にまとめてください。
投稿日は、該当する訓練の日時にしてください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。
