ウェブデザイン技能検定（国家資格）４（Webデザイン技術）ｃｓｓ

重要な事は重複して記載致します

CSS

CSSとは
３級学科試験CSSの出題傾向

CSSとは

HTMLで作ったページにデザイン（色や文字など）を付ける仕組みを言う、HTMLは構造CSSは見た目

プロパティ名	読み方	内容
color	カラー	文字の色
background-color	バックグラウンドカラー	背景色
font-size	フォントサイズ	文字の大きさ
text-align	テキストアライン	文字の位置
width	ウィズ	幅
height	ハイト	高さ
margin	マージン	外側の余白
padding	パディング	内側の余白
border	ボーダー	枠線

W3Cとは

Webのルールを決めている団体（基本的な考え方の基準になって居る）HTMLやCSSを決めている団体

CSSによる統一的な管理

cssの書き方の種類

方法	説明	書く場所	使用例
インラインcss（インラインスタイル）	HTMLタグに直接	<pstyle=”color:red;”>	小規模向け
内部css（内部スタイル）	<head>内に書く	<style>p{…}/style>	単ーページ向け
外部css(外部スタイルシート）	別ファイルに書く	<linnkrel=”stylesheet”href=style.css”>	大規模サイト

ｃｓｓの仕組み

cssはカスケーディングススタイルシートと言います、カスケードはスタイルは上書き優先順位で決まる

カスケーディングスの意味は、重なり合うスタイルの内どれを採用するかを決める仕組みを言う

優先順位の順

①インラインスタイル（HTMLに直接指定）例<p style=”color:red;”>,（最も重要視される）

②idセレクタ（ユニークなIDに適用）例#main{ coler:blue; }

③classセレクター（グループに適用）例.box{ color:green;}

④タグセレクタ（要素に一括適用）例p{ color:black;}

⑤ブラウザのデフォルト（指定が無い場合の標準スタイル）

最後に入力した色などになる

継承（ケイショウ）

親要素のスタイルが子要素に自動的に引き継がれる事

継承される（color,font-suze,font-family,等）

継承されない（marginn,paddinng,border,等）

継承させたい場合は、inheritを使う

休憩画像

カスケーディング

重なり合った複数のスタイルの中で最終的にどれを適用するか決める仕組み

強い順位

インラインスタイル（style=””）→IDセレクタ#id→クラス.class→タグセレクタdiv

important（すべてに勝つ）

W3C

Webの技術を決めている国際的な団体

スタイルシートの読み込み

名称	記号	意味
link	例<linnk rel=”stylesheet”type	HTMLファイルに外部スタイルシートを読み込むための一般的な方法（HTML内で使う）
rel	stylesheet(スタイルシート）	関係
type	text/css	ファイルの種類（MIMEタイプ）
href	style.css	参照先ファイルの場所
@import	古い形式	CSS内に書くもの、他のcssファイルを読み込むために使う

メディアタイプの指定

メディアタイプとは

cssを使って画面用と印刷用などの表示環境に応じたスタイルを分ける事が出来る（画面の時と印刷の時でサイズを変えるや印刷ではボタンを表示しないなど）

HTMLの<link>タグで、どの画像にcssを適応するかをmedia属性で指定する

例　media=”print”→印刷時このｃｓｓを使う

値	説明
all	全てのメディア
screen（スクリーン）	パソコン、スマホ等の画面表示用
print	印刷のプレビュー
speech	音声読み上げソフト用

メディアクリエ

画面サイズに応じてcssのスタイルを切り替える仕組み（レスポンシブデザイン）

@media→メディアクリエの始まり

スタイルの指定方法

cssのスタイル指定方法は３種類

方法名	特徴	書く場所	使用場面
外部スタイルシート	外のファイルにまとめる（HTMLとCSSを別々のファイルに分ける方法）保持しやすい	別ファイル(.css)	複数ページで共有したい時
内部スタイルシート	HTML内にまとめる（１ページ内で手軽に纏められる）	<hesd>内の<style>タグ	ページ単位で使いたい時
インラインスタイル	要素ごとに直接書く（一時的に個別変更時に使う）	HTMLタグ内	一部だけ個別に変えたい時

ボックスモデル

４つの層で出来ているコンテント、パディング、ボーダー、マージン

widthとheightはコンテントのサイズを表します

box-sizing:border-boxは、paddingとborderを含んだサイズです

コメントとは

人間には見えるけど、ブラウザには無視される説明文、メモに役立ちます

cssコメント→/*で始まり*/で終わる

HTMLの場合→<!– –>と書く

セレクタ、プロパティ、値

用語	説明	主な記号
セレクタ	どのHTML要素にスタイルを当てるかを指定する	<p> <h1>
プロパティ	どんな見た目にしたいかを決める項目	color font-size
値	プロパティに設定する内容	red 16px等

css3とは

CSSの最新バージョン次の表現が出来る、グラデーション、アニメーション、柔軟な色指定、メディクリエなど

hsl()とは

色の指定方法、h（色相）３６０まで、s（彩度）％、l（明度）％

opacityとは

透明度、０は完全に透明、１は完全に不透明

疑似クラス

特定の状態の時に適用するクラス風の指定

例　hover（マウスが乗った時）、active（クリック中）、focus（入力中など）

疑似要素

要素の一部にスタイルを当てる時に使う（::before）要素の前に追加される内容など

セレクタの詳細度（優先順位）

CSSのどれを優先して適用するかを決めるルール

例　インライン（１０００点）<p style=”color:red”>、ID（１００点）#title

子セレクタ（>記号）

直下の子要素だけに適用される

子孫セレクタ（スペース）

子や孫などすべての下位要素に適用されるdivの中にある全てのp要素が対象になります

休憩画像

３級学科試験CSSの出題傾向

単語	読み	説明
!important	インポータント	CSSでの優先順位を１番最優先される
inherit	インヘリット	親要素からの継承を強制する指定、子要素が親と同じ値になる
:nth-child()	エヌスチャイルド	何番目の子要素かを指定してスタイルを適用できる疑似クラス
odd/even	奇数・偶数	表の交互行の背景に使用される
proportional font	プロポーシャナルフォント	文字ごとに幅の異なるフォント
lower camel case（Java Script用）	ローワーキャメルケース	単語をつなぐとき２語目以降の先頭を大文字にする書き方(kebeb-case)