position・float
ボックスの配置を指定する時に使うコード
「position」
「float」
【position】
4種類ある
⑴static
＞デフォルトの状態
⑵absolute
＞ボックス全体が移動。指定したボックスは上に重なる
⑶relative
＞元の要素のボックス領域は残ったまま。指定したボックスが移動
⑷fixed
＞スクロールしても画面から消えない。（うざい広告系）
【float】
・「left」か「right」で指定
・ブロックを横に並べる（ブロックレベル要素でも横に並べられる）
margin・padding
ボックスの周囲の境界（余白）を指定
「margin」・・・ボックスの“外側”の余白指定
「padding」・・・ボックスの“内側”の余白指定
※インライン要素は指定不可（上下余白指定できない）
＞インライン要素「imgタグ」は縦のmarginを指定できないので、cssでブロックレベル要素に変更する必要がある
インライン要素をブロックレベル要素に変更
（例）
a{
display: block;
}
=====================
ブロック要素をインライン要素に変更
（例）
li{
display: inline;
}
=====================
ブロックレベル要素・インライン要素
スタイルがズレてる場合は、
「ブロックレベル要素」
「インライン要素」
を確認する
【ブロックレベル要素】
一行全てのボックス
（例）p<h1>~<h6><ul><table><div>
【インライン要素】
文字の装飾で使用
（例）<a><img><br><span>
※インライン要素の中にブロックレベル要素は入れることができない
スタイルの優先順位
【スタイル指定方法の優先順位】
⑴「!important」
⇨p{color: red; !important}
⑵<p style="color: red;"></p>
⇨html内に記述する
⑶p#title{color: red;}
⇨要素指定したid属性（この場合、pタグのid属性title）
⑷p.button{color: red;}
⇨要素指定したclass属性（この場合、pタグのclass属性button）
⑸書いた順番
⇨最後に書いたものが適用
指定したスタイルと違うスタイルが適用された場合には、スタイルの優先度を確認する
※要素の特定が高いほど優先度が高くなる
【セレクタの種類】
・*
全適用⇨*{color: red;}
・要素X
指定X要素に適用⇨p{color: red;}
・#id属性
指定id属性名の付いた要素に適用⇨#title{color: red;}
・class属性
指定class属性名に付いた要素に適用⇨.button{color: red;}
・要素X 要素Y
要素Xの中にある要素Yに適用→p a{ color:red; }
・要素X＞要素Y
要素Xの直下にある要素Yに適用→p > a{ color:red; }
・要素X.class
指定class名がついた要素Xに適用→p.button{ color:red; }
・要素X#id
指定id名がついた要素Xに適用→p#title{ color:red; }
・要素X:hover
要素Xにマウスが乗った時に適用⇨a:hover{color: red;}
スタイルを指定する（id・class属性）
htmlファイル
==============
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ホームページのタイトル</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 id="title">ホームページの見出し</h1>
<p class="bg-color1">これは段落です</p>
<h2 class="bg-color1">これは2番目の見出しです</h2>
</body>
</html>
==============
cssファイル
==============
#title{
background: #333;
padding: 15px;
color: white;
}
.bg-color1{
background: #f6f5f5;
}
p.bg-color1{
color: red;
}
==============
解説
・id属性、class属性を指定することでタグに名前を持たせられる。
＞タグに名前を持たせることで、細かくスタイル指定ができる
・id属性 or class属性をつける場合
htmlファイルでは指定のタグに「id or class="名前"」
cssファイルでは「#名前{プロパティ名: 値;}」を入力
・id属性とclass属性の違い
id属性
⇨同ファイル内で重複した名前を指定できない
class属性
⇨同ファイル内で重複した名前を指定できる
cssファイル
==============
#title{
background: #f6f5f5;
}
⇨id属性「title」がついたタグの背景色を指定色に変更し、
余白を15pxに設定し、文字色を白に設定
==============
p.bg-color1{
color: red;
}
⇨class属性「bg-color1」がついたpタグを赤色に指定
※bg=background(背景)の略
==============
補足
例えば下記htmlファイルで「B」だけ赤文字にしたい場合
==============
<p>A</p>
<p>B</p>
<p>C</p>
==============
cssファイルでは以下のように入力すると・・
p{color: red;}
==============
pタグ全てにスタイル適用されてしまうので
結果下記のようになる
A
B
C
==============
なので、スタイルを適用したい箇所に「class="bg-color1"」を付ける
<p>A</p>
<p class="bg-color1">B</p>
<p>C</p>
==============
cssファイルにも「.color1（class属性＋名前）」を指定することで・・
.color1{color: red;}
⇨「class="color1"」が付いた「B」だけが赤文字となる
A
B
C
==============
Cだけを青くしたい場合も、同じくclass属性をつける（※名前は変える）
<p>A</p>
<p class="color1">B</p>
<p class="color2">C</p>
cssファイルも同じようにclass属性「color2」を指定することで・・
.color1{color: red;}
.color2{color: blue;}
⇨Cだけを青文字に指定できる
==============
A
B
C
==============
CSSの書き方
htmlファイル
==============
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ホームページのタイトル</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>ホームページの見出し</h1>
<p>青い文字になるよ</p>
<p>ここも青い文字になるよ</p>
</body>
</html>
==============
・titleタグ直下に「<link rel="stylesheet" type="text/css" href="cssのファイル名">」を入れることで、指定したCSSファイルが読み込まれる
cssファイル
==============
p{
color: blue;
font-size: 20px;
}
==============
「セレクタ{プロパティ名: 値;}」と入力することで
⑴どのセレクタ（要素）に
⑵どういうプロパティ（設定）を
⑶どういう値（形）で
⇨適用するかを指定できる
↑上記で例えると
⑴セレクタ：p要素に対して
⑵プロパティ：文字色を・文字サイズを
⑶値：青色に・20pxに
⇨指定して適用
※補足
改行は無視されるので自己流（見やすい形）でOK
==============
p{color: blue; font-size: 20px;}
↓
p{
color: blue;
font-size: 20px;
}
==============
