1.学習内容

実習内容

学習と以上の内容

reset.css

初期化操作のたびに、事前に作成された初期化操作を含むコードがあります。

名前の通りcssを初期化するためのコードを含むcssファイル

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

htmlタグを作成すると、そのタグに対応するcssコードがデバッガに呼び出されます。

このcssコードはブラウザによってやや異なります

resetはすべてのブラウザで同じようにすべて初期化されます

<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4>
<h5>Hello World</h5>
<h6>Hello World</h6>

リセットの適用

順序(カスケード関連)

ファイルをリンク順に読み込む

順序が重要だ

まずブラウザのデフォルトcssを読み込み、reset cssを読み込み、styleを読み込みます。最終的にcssを適用する

以降のコード優先

<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

h1 {
	color: blue;
}

h1 {
	color: red;
}	

normalize css

ブラウザで作成した既存のcssコードを通常の光源で再適用しています

デフォルトでは、各ブラウザには異なるcss設計がありますが、通常の光源は、各ブラウザ間のcss設計の誤差を低減し、スタイルをエラーを低減する方向に再調整するときに使用します。

<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

reset vs normalize

resetが完全に初期化されている場合、通常の光源は既存の設計のわずかな加工です(ブラウザ間の設計誤差を減らすために使用されます)。

二つの中でどれを使いますか。開発者の方向性

css変数

最近css言語に変数の概念が現れ始めた。

箱があります。りんごを箱に入れます。箱は変数で、りんごは値かデータです。

ボックスの内容を値、データ、値と呼びます

これらのデータを格納するボックスを変数と呼びます

これらの変数は私たちが望む名前で追加できます。

たとえば、アップルボックスという変数を作成すると、アップルボックス自体が変数になります。アップルボックスという名前は変数名と呼ばれます。

クローズアップファイルを使用すると、プロパティ情報がよく表示されます。

これを変数と見なすことができます

注意点

プロッタではあまり使われていません

変数を作りましょう。

rootで定義されている変数

--black、--紫のようなものが変数です

その後の属性値はデータ

:root {
	--black: #18181a;
	--purple: #9147ff;
	--font-size-40: 40px;
	--brand-color: yellow;
}

h1 {
	background-color: var(--black);
	font-size: var(--font-size-40);
	color: var(--purple);
}

h2 {
	color: var(--brand-color);
}

cssコードに表示される内容はtwitter capicatを使用する場合と同じです

マウスを置いてこそ、正確な数値が得られます。

変数を使用する理由

たとえば、ブランドの色が変化すると、ツイッターの位置が紫色になり、黄色になると変数の値が黄色に変わり、残りの変数の値も同時に変化します。

すなわち,バッチ修正を行う場合,変数の使用が非常に便利である.

さらにbrandcolorを変数名とすると、#9147 ffよりも分かりやすい。

変数の別の定義方法

rootという名前の領域に変数を入れると、任意の領域にインポートし、使用可能な変数として使用できます。

変数の使用範囲を制限するには、cssセレクタを使用して指定します。

<header id="intro">
	<p>Header P</p>
</header>

<footer id="footer">
	<p>Footer P</p>
</footer>

#intro {
	--font-color: blue;
	--font-size: 50px;
}

この変数はintroという名前の領域でのみ使用できます。

#intro p {
	font-size: var(--font-size);
	color: var(--font-color);
}

#footer p {
	font-size: var(--font-size);
	color: var(--font-color);
}

変数はタイトルのpにのみ適用されます

フッターには適用されません

cssセレクタを使用して、現在使用している変数が影響を及ぼす範囲を指定できます。

さぎょうぶつ

2.難点

3.解決方法

4.感想

JavaScriptで学んだ変数を温めるような感じだったので、もっと良かったのですが、cssでも変数が使われるとは思いませんでした。やはり勉強しなければならないことがたくさんあります。