はじめてのCSS

CSS

HTMLの見栄えを変えることができる言語

まずHTMLでCSSファイルを読み込む

HTMLの\タグ内にlink:cssと入力しTabキーを押下し、下記のテンプレートを使用

<link rel="stylesheet" href="style.css">

href="style.css"の"ダブルクォートの間にはCSSのファイル名を記述する。

セレクタ

CSS命令を適用するところ。 CSSのセレクタには色々ある

1.HTMLの要素をセレクタにする

例）CSS

body { color:lightblue; }
p { color:red; }

2.HTML要素の属性に設定したクラス名をセレクタにする

HTML

<P class="test">セレクタの勉強</p>

CSS

.test {
  color:blue;
}

3.HTML要素の属性に設定したID名をセレクタにする

HTML

<p id="example">例えば</p>

CSS

#example {
  color:yellow;
}

4.HTMLの指定した親要素内の指定した子要素すべてをセレクタにする

HTML

<p><span>ｐタグの子要素のspanタグ</span></p>

CSS

p span {
  color: #FFFF00;
}

この場合はpタグに囲われたspanタグにのみ適用される。

また、下記のようにクラス名を指定することも可能。

HTML

<p><span class="example">pタグの子要素のクラス名をつけたspanタグ</span></p>

CSS

p span.example {
  color: #FFFF00;
}

pタグで囲まれていてexampleのクラス名がついているspanタグに適用される。

5.指定の親要素の一階層下の指定した子要素をセレクタにする

HTML

<div>
        <span>divタグの子要素のspanタグ</span>
        <div><p><span>divタグの孫要素のspanタグ</span></p></div>
</div>

CSS

div > span {
  color: #F80;
}

この場合はdivタグの子要素のspanタグにのみ適用される。

6.指定の要素に隣接した要素をセレクタにする

HTML

<p>pタグ</p>
<span>spanタグ</span>

CSS

p + span {
  color: #F80;
}

pタグの直後にあるspanタグに適用される。

7.複数の要素をセレクタにする

CSS

p , div , span {
  color: #F80;
}

pタグdivタグspanタグに適用される。

記述	説明	例
タグ名	複数のタグを指定する場合は , で区切る	h1{color:red;}
タグ1 タグ2	タグ1内のタグ2	div p{color:red;}
.class名	class属性の指定したclass名	div.name{color:red;}
#id名	id属性の指定したid名	p#title{color:red;}
[属性名]	指定した属性名が設定されている全てのタグ	[class]
[属性名="値"]	指定した属性名の値が指定した値と一致する全てのタグ	[target="_blank"]
[属性名^="値"]	指定した属性名の値が指定した値で始まる全てのタグ	[class^="null"]
[属性名$="値"]	指定した属性名の値が指定した値で終わる全てのタグ	[class$="null"]
[属性名*="値"]	指定した属性名の値が指定した値を含んでいる全てのタグ	[class*="null"]

背景の色を変える

background-color: 変更したい色;

で背景色を指定できる。

例）CSS

body {
  background-color: lightblue;
}

• body　→　セレクタ
• background-color(プロパティ)：lightblue(値);

CSSのプロパティと値の後にはセミコロンが必要

リスト

li {
  list-style-type: リストの種類;
  margin: 余白の大きさpx;
}

list-style-typeは リストの先頭になる記号を変更できる。

CSS	記号
none	無し
disc	●
circle	○
square	■
decimal	1.2.3...
decimal-leading-zero	01.02.03...
circled-decimal	①.②.③...
parenthesized-decimal	(1).(2).(3)...
lower-roman	i.ii.iii.iv...
upper-roman	I.II.III.IV...
lower-alpha(lower-latin)	a.b.c...
upper-alpha(upper-latin)	A.B.C...
japanese-formal	壱.弐.参...
cjk-ideographic	一.二.三...
hiragana	あ.い.う...
katakana	ア.イ.ウ...
hiragana-iroha	い.ろ.は...
katakana-iroha	イ.ロ.ハ...

marginは上下左右の余白を設定できる。 スペースで区切ることで複数の値を指定できる。

指定する値の数	指定した値が適用される場所
１つ	[上下左右]
２つ	[上下]　[左右]
３つ	[上] [左右] [下]
４つ	[上] [右] [下] [左]

文字の太さ

font-weight: 太さを指定;

ワードで文字の太さを指定

p.example1 {
  font-weight: normal;
}
p.example2 {
  font-weight: bold;
}
p.example3 {
  font-weight: lighter;
}
p.example4 {
  font-weight: bolder;
}

上記のCSSを実行した場合の文字の見え方

数値で文字の太さを指定 100,200,300,400,500,600,700,800,900で指定

9種類用意されているフォントはあまりないため数値を上下させても変化がないこともある。

文字の太さ	数値
標準	400
一般的な太字	700

疑似クラス

記述	説明	例
:link	リンク先をクリックしてない状態の時	a:link
:visited	リンク先にアクセス済みの状態の時	a:visited
:hover	カーソルをリンク上に重ねた状態の時	a:hover
:focus	カーソルをフォーカスした状態の時	a:focus
:active	カーソルでクリックしアクティブな状態の時	a:active
target	リンク先の要素に対して装飾を行う場合	a:target

CSS3で追加された疑似クラス

記述	説明	例
:first-child	最初の要素だけ対象	div :first-child
:last-child	最後の要素だけ対象	div :last-child
:nth-child(x)	最初からx番目の要素だけ対象	div :nth-child(odd)
:nth-last-child(x)	最後からx番目の要素だけ対象	div :nth-last-child(x)
::first-line	要素の最初の1行のみ対象	p::first-line
::first-letter	要素の1文字目のみ対象	p::first-letter
:enable	フォームが有効になった場合の状態
:disabled	フォームが無効になった場合の状態

x	説明
even	偶数の要素
odd	奇数の要素