CSSについて学習したものをまとめる。
今後、新たに学習したものも追記すること。
■セレクタとプロパティ
CSSではHTMLの要素など変更する箇所を選択し、何をどうするかを以下のように記述する。変更する対象をセレクタ、変更内容をプロパティと言う。
以下の場合、h1がセレクタ、colorがプロパティになる。
セレクタの後は半角スペースを空け、プロパティは値を:;で指定し、{}で囲む。
プロパティはインデントも空けること。
/* /でコメントアウトも入れられる。
h1 {
/* コメントアウト/
color: blue;
}
特定の要素のみCSSで変更したい場合、HTMLでclassの属性を付けて
CSSで以下のように指定する。先頭に.(ドット)を絶対に忘れないこと。
HTML側
<ul>
<li class="CSSproperty">AAA</li>
<li>BBB</li>
<li>CCC</li>
<ul>
CSS側
.CSSproperty {
font-size: 10px
}
また特定要素内にある１つの要素のみ変更したい場合は
以下のように要素を並べて指定する。
複数の場合は,で並べて指定する。
HTML側
<ul class="CSSproperty">
<h2>AAA</h2>
<a>BBB</>
<ul>
CSS側
.CSSproperty h2{
font-size: 10px
}
⇨CSSproperty要素にあるh2要素のみ変更
.CSSproperty h2, a{
font-size: 10px
}
⇨CSSproperty要素にあるh2要素とa要素を変更
○プロパティの種類
・color
文字の色を変更できる。１６進数のカラーコードでも一般的な色の呼び方でも指定可能。
color: red;
・font-size
文字の大きさの変更。
font-size: 10px;
・font-family
文字のフォント変更。途中でスペースがある場合、""でくくる。
font-family: "Avenir Next";
・background-color
背景色の変更。指定方法はcolorと同じ。
background-color: #dddddd;
・width、height
要素の横幅と高さを変更。
width: 100px;
height: 100px;
・list-style
リストの変更。noneでリストの点を消せる。
list-style: none;
・float
要素の並び方を横並びに変更できる。
float: left;
・border
要素に枠線をつける。線の太さ、種類、色の順番で指定する。
上下左右につける場合はborder、特定方向の身につけたい場合はborder-"方向"で指定する。
.AAA {
border-bottom: 10px solid blue;
}
・padding、margin
要素の余白を調整。paddingは要素(border)の"内側"、marginは"外側"に余白を作る。
上下左右につける場合はpadding/marginのみ、特定方向のみにつけたい場合は
padding/margin-"方向"で指定する。
padding/marginで２つ指定する場合は上下と左右、４つ指定する場合は
時計回りに上、右、下、左で変更できる。
.AAA {
padding: 10px 20px 10px 20px;
}
⇨要素の上下に10px、左右に20pxの余白をつける。
■メディアクエリー
■flexbox