Loading...
5. CSSの考え方を覚えよう
CSSはCascading Style Sheets（カスケーディングスタイルシート）の略です。
CSSとは？
HTML（タグ・テキスト）の見た目を変更する言語
CSSの基本の記述方法
CSSは基本的にHTMLとは別のファイルに記述します。
HTMLでマークアップした要素に対して、
色やレイアウトなどを指定することができます。
h1
{
color
: white;
}
名前
考え方
セレクタ（h1）
どこの
プロパティ
何を（色を color）
値
どうする（しろ white）
複数指定
同じデザインを適用させたいタグやclassが複数あるときは、
まとめて変更することができます。
class名を「,」で区切って並べていきます。並べる数がはいくつでもOKです。
.about
,
.menu
{
background-color
:
#fff
;
}
セレクタの書き方
使い方・例
説明
*
全称セレクタ 全てのタグに対して
h1
直接タグに対して
（直接タグには指定せずなるべくクラスに指定するようにしましょう）
.test
class="test"に対して
#test
id="test"に対して
.test a
class="test"の中
[子要素・孫要素]のaタグに対して
<p><a href=””>test</a></p>
.test > a
class="test"の子要素を対象
.test + p
同じ階層の次の要素
[隣接兄弟]
に対して
CSSのセレクタチートシート
webliker.info
擬似クラス
使い方・例
説明
:hover
マウスがタグに乗ったとき
:first-child
親からみて最初のタグ
:last-child
親からみて最後のタグ
:nth-child(n)
親からみてn番目のタグ
Please turn on JavaScript to use Paper in all of its awesomeness. ^_^
CSSとは？
CSSの基本の記述方法
h1 { color: white;}複数指定
.about, .menu { background-color: #fff;}セレクタの書き方
擬似クラス