1限目
学科 HTML/CSS基礎③
テキストの意味と画像について
L2.7.1 a 要素（リンク）
<a href=”リンク先URL” target=”リンク先を開く環境” rel=”リンク先との関係”> リンクコンテンツ </a>
L2.7.2 em 要素（強調） 主張や力説というニュアンスを含む
L2.7.3 strong 要素（重要情報）文章の中で重要性、重大性、緊急性が高い文字列
L2.7.4 small 要素（付帯注釈） 免責事項や著作権表記、注意事項、警告文など (税込み)
L2.7.11 time 要素（日付・時刻）
L2.7.18 i 要素（慣用句・特定用語） 慣用句や特定用語などで前後の言葉と区別したい用語
L2.7.19 b 要素（太字） 文章の中で意味的な重要性を与えずに注目してほしい箇所
L2.7.22 ruby 要素（ルビ文字の範囲） ルビを振る対象の文字列 子ども向けサイトなど
L2.7.27 span 要素（インライン要素の範囲） 汎用的なインラインレベルのコンテナ。意味はない
特定の範囲をまとめてスタイルシート（CSS）を適用したい場合などに使用
L2.7.28 br 要素（改行） 文章の中の改行位置・一つの段落の中で改行を行いたい場合に使用
L2.7.29 wbr 要素（改行可能位置）文章の中の改行して良い位置
要素の幅が足りている時は改行しないで、足りなくなった時に改行する位置
L2.8.1 ins 要素（追加部分）文章の中で新たに追加された範囲
L2.8.2 del 要素（削除部分）
L2.9.2 img 要素（画像）src=”画像ファイルのパス” 表示する画像ファイルのパスを指定
alt=”代替テキスト” 表示する画像ファイルの代替テキスト
width=”横方向ピクセル値” 画像の横方向の単位なしのピクセル値
height=”縦方向ピクセル値” 画像の縦方向の単位なしのピクセル値
＊画像でサイズ確認して書いておけばよい
L2.9.3 iframe 要素（インラインフレーム） 表示しているページの中に別のページを埋め込むための
機能
L2.9.13 svg 要素（SVG レンダリング） スケーラブルベクターグラフィックス（SVG）
SVG を使用で拡大・縮小しても画像品質を損なうことなく表示
L2.10 テーブル エクセルみたいな表作成ができる
L2.11 フォーム 問い合わせフォーム
2限目
学科 HTML/CSS基礎③
CSSの基本構造について
Lesson-3 CSS でデザインを始める前に
CSS は、Web ページのスタイル（見栄え）を定義するもの
<link href=”CSS ファイルのパス名” rel=”stylesheet” type=”text/css”>
セレクタ｛ スタイル対象 どこに
プロパティ：値； スタイル種別：スタイル値 何を
｝
/＊コメント*/ コメント
.class-1 何か所にも指定できる
#id-1 1か所のみ指定
L3.2.2 CSS の構造（HTML ファイル内に記述する場合）
L3.2.3 CSS の構造（HTML タグにインラインで記述する場合）＊おすすめしない
HTMLのタグにstyle属性で記入
<div style=”width:600px;height:400px;”>
L3.2.4 注意事項
× p { font-size: 140%; font-weight: bold; color: red; }
〇 p {
font-size: 140%;
font-weight: bold;
color: red;
}
L3.3.1 ボックスモデルの構造
Web ページのレイアウトを作るためには領域定義が必要
領域の定義にはボックスモデルが適用
コンテンツ（content）、パディング（padding）、ボーダー（border）、
マージン（margin）を組み合わせて領域が定義される。
padding、border、margin は上下左右を独立して指定することもでき、
それぞれのプロパティに
上（-top）、下（-bottom）、右（-right）、左（-left）」を付与。
ボックスのサイズ計算式
「ボックスサイズ = content + padding + border + margin」
width プロパティ、height プロパティの指定値は、
box-sizing プロパティの指定値により意味が異なります。
box-sizing: content-box;（初期値）
width プロパティ・height プロパティの指定値 = content 領域の値
今の主流 box-sizing: border-box;
width プロパティ・height プロパティの指定値 = content + padding + border 領域の
合計値
L3.3.2 ボックスモデルの表示ルール
インライン（display: inline;）
インラインブロック（display: inline-block;）
ブロック（display:block;)
L3.4 セレクタの記載方法
L3.4.1 全称セレクタ（*）
＊L3.4.2 型セレクタ HTML の要素名（タグ名）を指定すると、その要素名に合致する
要素に使用するスタイルを指定
L3.4.3 id セレクタ（#）
＊L3.4.4 class セレクタ（.） ピリオド（.）を付けて class 名を指定すると、その class 名に合致す
要素に適用するスタイルを指定
＊L3.4.5 子孫結合子セレクタ
L3.4.6 子結合子セレクタ （>）セレクタを大なり（>）で区切って指定すると、
ある要素の直下にある要素にスタイルを指定
L3.4.8 一般兄弟結合子セレクタ（~）
L3.5 幅・高さの単位
L3.5.2 %（要素の割合（百分率）） 親要素のサイズに対する割合を百分率（%）で指定
L3.5.3 em（要素の割合） 親要素のサイズに対する割合（1em = 100%）を指定
em は、フォントサイズの単位
L3.5.4 rem（ルート要素の割合） ルート（html タグ）のサイズに対する割合を指定
ルートのフォントサイズの初期値は、16px に設定されている
L3.5.5 vw（画面の表示幅の割合） 画面の表示幅に対する割合（10vw = 画面幅の10%）を指定
width: 100vw;」と指定すると画面幅（スクロールバーを含む
と同じ大きさの領域が定義
L3.5.6 vh（画面の高さの割合） 画面の高さに対する割合（10vh = 画面の高さの10%）を指定
「height: 100vh;」と指定すると画面の高さ（スクロールバーを
を含む）と同じ大きさの領域が定義
3限目
学科 HTML/CSS基礎③
CSSの基本構造について
L3.6 色の指定方法
L3.6.2 カラーネーム カラーネーム指定
L3.6.3 #rgb（ハッシュ（#）で始まる 16 進数 3 桁）
L3.6.4 #rrggbb（ハッシュ（#）で始まる 16 進数 6 桁）
L3.6.5 #rrggbbaa（ハッシュ（#）で始まる 16 進数 8 桁） 最後の2桁が透明度
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 関数） 色相（Hue）、s が彩度（Saturation）、l が輝度（Lightness
L3.6.9 hsla(h,s,l,a)（hsla 関数）
L3.6.10 線形グラデーション（linear-gradient 関数）
＊webサイトに画像を上げる時
（付録（Appendi）Appendix-2 画像型式と品質・サイズ 参照）
GIF（ジフ） 拡張子 : gif
256 色までの色が使用
可逆圧縮型式の保存形式
背景の透過やアニメーション画像を使用
JPEG（ジェイペグ） 拡張子 : jpg または jpeg
フルカラー（1677 万色）圧縮率を指定可能
PNG-8 PNG（ピング）
拡張子 : png
256 色までの色が使用・GIF と同様の仕様
PNG-24 フルカラー（1677 万色）の可逆圧縮型式を採用
画像の劣化なし。背景の透過設定も使用することができる。
単に PNG というと、こちらを保存形式を示す。
・アニメーションを使用する場合は、GIF を選択します。
・背景を透過にする場合は、PNG-24 か PNG-8 か GIF を選択します。
・色数が少ないイラスト画像は、PNG-8 か GIF か PNG-24 を選択します。
・色数が多いグラデーション画像は、JPEG（画質優先）を選択します。
・写真は、JPEG（適切な圧縮率）を選択します。
・画質を優先する場合は、PNG-24 を選択します。但し、色数が多い場合は、
ファイルサイズが大きくなるので注意が必要です。
・ファイルサイズを優先する場合は、JPEG（サイズ優先）を選択します。
但し、画質劣化が発生しますので、必ず、元画像を保管しておいてください。
4限目
学科 HTML/CSS基礎③
Webページ制作実践
5限目
学科 HTML/CSS基礎③
本日の講義のまとめ