学科 HTML/CSS基礎⑤
CSSの記述・検証ツールの活用
L3.8.1 セレクタ得点表
L3.9 Chrome 検証ツール
webサイトを作るときは検証ツールをうまく使う
サイトはChromeで作ることが多い
Chrome 検証ツール
表示画面 上 HMTL
下 CSS
□↖ クリック サイト上おかしいところを左クリックで右画面HTMLで表示
「□ スマホ画面表示
上部 機種選択 サイズ ↻▯↶（縦・横方向での見え方）
▼ サイト全画面スクショ
L6.2 バックグランド系プロパティ
background-color: 背景色;
L6.2.3 background-image プロパティ（背景画像のファイル）
L6.2.5 background プロパティ（背景の一括指定）
background-color プロパティ、background-attachment プロパティ、
background-image プロパティ、background-repeat プロパティの値を一括して指定
ショートハンド
背景色・背景画像の位置・背景画像ファイル・背景画像の繰り返し」を
順不同でスペースで区切って指定
L5.2 テキスト系プロパティ
color: 文字色;
L5.2.2 opacity プロパティ（透明度） サンプル画像あり
opacity: 透明度;
半透明 背景も文字も半透明になる
＊background: rgba(255,255,255,0.5);
border: 1px #ccc solid;
背景半透明・文字くっきりの場合
2限目
学科 HTML/CSS基礎⑤
CSSのプロパティについて
L5.2.3 text-align プロパティ（文字の配置）
L5.2.4 text-decoration-color プロパティ（文字飾りの色）
L5.2.5 text-decoration-line プロパティ（文字飾りの表示位置）
L5.2.8 text-decoration プロパティ（文字の飾りの一括指定）
safariブラウザは注意
L5.3 フォント系プロパティ
font-family: フォントファミリィ;
＊最近はグーグルフォント使用が多い
P11.3.1 Google Fonts-1
L5.3.2 font-size プロパティ（フォントのサイズ）
L5.3.3 font-weight プロパティ（フォントの太さ）
L5.3.4 font-style プロパティ（フォントのスタイル）
L5.3.5 line-height プロパティ（行の高さ） 行間
行の高さとフォントの高さの差分の半分がフォントの上下に均等に割り当てられる。
L5.3.7 white-space プロパティ（空白・改行の表示方法）
改行 空白スペースの表示の仕方
L5.4 リスト系プロパティ
箇条書きリスト種類
L5.4.2 list-style-image プロパティ（リストマーカーの画像）
レ 点の時に使用
L4.2 レイアウト系プロパティ
L4.2.1 width プロパティ（内容の幅）横幅
width: 内容の幅;
L4.2.2 max-width プロパティ（幅の最大値）
max-width: 幅の最大値;
幅の最大値を指定 指定値より大きくならない 初期値は「none」
L4.2.3 min-width プロパティ（幅の最小値）
min-width: 幅の最小値;
幅の最小値を指定
L4.2.4 height プロパティ（内容の高さ）
height: 内容の高さ;
要素の内容の高さを指定。正方形の場合に使用。
初期値は「auto」でボックスモデルの表示ルールの初期サイズが採用。
L4.2.7 float/clear プロパティ（回り込み／回り込み解除）
float: 回り込みの方向;
箱を横並びにする 最近はフレックスレイアウト使用
＊参照 Lesson-8 フレックスレイアウト
L4.2.10 display プロパティ（要素の表示方法）
display: 要素の表示方法;
blockブロック属性（p,div,ul,h1～h6 タグなどの初期値）を指定します。
inlineインライン属性（a,strong,span タグなどの初期値）を指定します。
inline-blockインラインブロック属性（img タグなどの初期値）を指定します。
none非表示の属性を指定します。
3限目
学科 HTML/CSS基礎⑤
CSSのプロパティについて
L4.2.11 overflow プロパティ（ボックスからあふれた内容の処理方法）
overflow: ボックスからあふれた内容の処理方法;
・overflow: visible; 初期値
・overflow: hidden; 内容がボックスに収まらない場合は、はみだした部分は非表示
・overflow: scroll; あまり使わない
・overflow: auto; 内容がボックスに収まらない時だけスクロールバーを
表示して全体を参照できる
L4.3.1 border-style プロパティ（ボーダースタイル）
border-style: ボーダーのスタイル;
時計回りに指定
L4.3.2 border-color プロパティ（ボーダー色）
border-color: ボーダーの色;
L4.3.3 border-width プロパティ（ボーダー幅）
border-width: ボーダーの幅;
L4.3.4 border プロパティ（ボーダー一括指定）
border: ボーダー一括指定;
L4.3.5 border-top/-bottom/-left/-right プロパティ（ボーダー上下左右一括指定）
border-top: 上のボーダー一括指定;
border-bottom: 下のボーダー一括指定;
border-left: 左のボーダー一括指定;
border-right: 右のボーダー一括指定;
L4.4 パディング系プロパティ 枠線
L4.4.1 padding-top/-bottom/-left/-right プロパティ（パディング上下左右
padding-top: 上のパディング幅;
padding-bottom: 下のパディング幅;
padding-left: 左のパディング幅;
padding-right: 右のパディング幅;
L4.4.2 padding プロパティ（パディング一括指定）
padding: パディング幅;
L4.5 マージン系プロパティ
margin: マージン幅;
margin-top: 上のマージン幅;
margin-bottom: 下のマージン幅;
margin-left: 左のマージン幅;
margin-right: 右のマージン幅;
L4.5.1 margin-top/-bottom/-left/-right プロパティ（マージン上下左右）
1つ指定「上下左右」のすべての指定になります。
2つ指定「上下」と「左右」の順で指定します。
3つ指定「上」と「左右」と「下」の順で指定します。
4つ指定「上」と「右」と「下」と「左」の順で指定します。
L4.5.2 margin プロパティ（マージン一括措定）L4.5.3 margin の補足事項
3) ボックスの中央配置
width プロパティでボックスの幅を指定した状態で左右のマージンを「auto」に設定
（例えば「margin: 0 auto;」）するとボックスを親要素の中央に配置することができます。
4限目
学科 HTML/CSS基礎⑤
Webページ制作実践
5限目
学科 HTML/CSS基礎⑤
本日の講義のまとめ