CSS入門
CSSはとても簡単で、視覚で効果がわかるのでとっつきやすい言語です。このページを読めば今日からCSSが書けます。
このページでは、はてなブログなどHTMLが完成されていてCSSだけを書きたい人を対象にしています。なのでHTMLの知識がなくても大丈夫です。
CSSとは
CSSとは、簡単にいえばウェブサイトの見た目を設定する言語です。
Cascading Style Sheets (CSS)とは、HTML や XML （XHTML・SVGなどを含む）で記述された文書の体裁や見栄えを表現するために用いられるスタイルシート言語です。CSSは、要素が画面上で（あるいは紙や音声といった別のメディア上で）どのように表現されるのかを定義します。
現在多くのウェブサイトでは、文書構造はHTML、見た目（スタイルといいます）はCSS、動的なコンテンツ（外部データの読み込みや自動で文書構造を変える）はJavaScriptというように役割ごとに言語が使われています。
CSSの根本的な理解にはHTMLの知識が必要ですが、それはむしろCSSを扱っていくうちにだんだんわかってくるでしょう。このページでは必要なHTML知識もその場で簡単に説明しています。
CSSの基本
CSSは、HTMLで書かれた文書の任意の箇所の見た目を指定するものです。
たとえば、このようなHTMLがあります。
HTML
<p>こんにちは</p>
Webページの表示
こんにちは
この文字を赤くしてみましょう。
HTML
<p>こんにちは</p>
CSS
p { color: red }
Webページの表示
こんにちは
これがCSSです。どうなっているのか説明していきます。
基本の文法
CSSの文法はとてもシンプルです。どんな場合でもこのように記述します。
スタイル対象 { スタイル内容 }
これをスタイルしたい箇所の数だけひたすら並べていくだけです。
スタイル対象 { スタイル内容 } スタイル対象 { スタイル内容 } スタイル対象 { スタイル内容 }
一般的なプログラミング言語のように変数があったり分岐があったり...という複雑な文法は一切なし。すべてこれだけです。簡単そうでしょう？
それでは具体的に「対象」と「スタイル内容」の書き方に進みます。いよいよCSSを実際に書けるようになります。
スタイル対象の指定の仕方
タグの種類で指定する
CSSではHTML内の要素に対してスタイルを設定します。要素とは< >〜〜</ >で囲ってある部分のことです。この< >を「タグ」といいます。タグはその中身（<p>、<div>など）によって、それぞれpタグ、divタグなどといった種類に分かれています。
先ほどの例を見てみましょう。
HTML
<p>こんにちは</p>
CSS
p { color: red }
Webページの表示
こんにちは
ここでは、pタグで挟まれた要素（p要素と一般的に呼びます）を対象に指定しています。
下のサンプルではタグの種類ごとに違うスタイルを適用しています。
HTML
<p>こんにちは</p> <div>こんばんは</div> <span>さようなら</span>
CSS
p { color: red } div { color: blue } span{ color: green }
Webページの表示
こんにちは
こんばんは
さようなら
要素が入れ子になっている場合、親要素にスタイルを適用すると、中の要素全てにスタイルが適用されます。
HTML
<section> <p>こんにちは</p> <div>こんばんは</div> </section> <span>さようなら</span>
CSS
section { color: red }
Webページの表示
こんにちは
こんばんは
さようなら
クラス／idで指定する
それではこのように同じタグの要素が複数ある場合はどうでしょうか
HTML
<p>こんにちは</p> <p>こんばんは</p> <p>さようなら</p>
CSS
p { color: red }
Webページの表示
こんにちは
こんばんは
さようなら
タグで指定すると、同じタグの要素全てに適用されてしまいます。
同じタグの要素について別々にスタイルをしたいときは、「クラス」か「id」を使います。
「クラス」「id」とはどちらもHTML内の要素に個別につける名前のことです。
違いは「クラス」は同じ名前を複数の箇所につけられるのに対し、「id」は同じ名前は１箇所にしか使えないということです。
どちらもCSSにおいてはそんなに扱いは変わりません。
HTMLのタグ（< >）内には、タグ名に続けてクラス名やid名を指定できます。
<div class="クラス名" id=" id名">~~~~</div>
一般的なウェブサイトではほとんど全ての要素にクラス名もしくはid名が付いているので、クラスやidによって対象を指定すればピンポイントでスタイルを適用できます。
HTML
<p class="morning">こんにちは</p> <p class="evening">こんばんは</p> <p id="bye">さようなら</p>
CSS
p.morning { color: red } p.evening { color: blue } p#bye { color: green }
Webページの表示
こんにちは
こんばんは
さようなら
p.morningとは「クラスがmorningのp要素」、
p#byeは「idがbyeのp要素」という意味になります。
上ですこし触れた通りクラスは同じ名前を複数の箇所につけられるので、クラスで指定した場合は複数の箇所を一気にスタイルできます。
HTML
<p class="greeting">こんにちは</p> <div class="greeting">こんばんは</div>
CSS
.greeting { color: red }
Webページの表示
こんにちは
こんばんは
.greetingは「クラスがgreetingの要素」という意味です。このようにタグの種類を指定しないでクラスのみで指定すると、同じクラスを持つすべての種類の要素にスタイルを適用します。
idは同じ名前は１箇所しかないので、これはあてはまりませんね。つまり、p#byeと書いても#byeと書いても同じことです。
どこの部分がどういうクラス名やid名なのかは自分で作ったHTMLならわかっていますが、はてなブログのように最初からHTMLが作られている場合は調べないとわかりません。
はてなブログについてはこのページにまとまっています。
theme-plain.hatenablog.com
基本的な対象の指定方法はこれでOKです。次はスタイル内容の書き方をみていきましょう。
スタイル内容の書き方
ここまででスタイル対象の指定方法を覚えました。スタイル内容は、そのスタイル対象に具体的にどういうスタイル（色を赤くする、サイズを大きくする...など）を適用するかを書く部分です。このスタイル内容のことを「プロパティ」といいます。
具体的な書き方はこうなります
プロパティ名 : 値
プロパティの種類はたくさんあります。これはCSSを書いていくうちにだんだん覚えてくるので大丈夫です。あとでいくつかよく使うプロパティを載せておくので、最初はそれを見ながらすこしずついろいろなプロパティを使ってみるといいです。
たとえば下の例では、colorがプロパティ名でredが値です。
p { color: red }
これでCSSのひと単位がまるまる書けるようになりました。あとはこれをひたすら並べるだけです。
p { color: red } div.myname { font-size: 100% } #blog-title { background-color : orange }
といった具合ですね。
ちなみにCSSではスペースや改行は無視されます（実はスペースを使った文法もあるのですが、今は考えなくていいです）。
なので、下のような書き方でもOKです。ぜんぶちゃんと動作します。
p { color: red } p { color : red } p{color:red} p { color : red }
ところで、ひとつの対象に複数のプロパティを指定したいときもあります。
p { color: red } p { font-size: 100% }
上の書き方でダメなわけではないですが、冗長です。こういうときは下のようにまとめられます。
p { color: red ; font-size: 100% }
;で区切ればいいんですね。このセミコロンですが、プロパティ同士の間にしか書いてはいけないわけではありません。下のように書いてもOKです。
p { color: red ; font-size: 100% ; } p { color: red ; }
実は僕はプロパティがひとつだけのときも必ずこのセミコロンは付けています。あとでプロパティを追加するときにセミコロンを忘れてエラーを起こさないためです。
代表的なプロパティの種類
よく使うプロパティを紹介します。なお、プロパティ一覧はこちらのウェブサイトが便利です。
www.htmq.com
色に関するプロパティ
CSSでは色は下のいずれかの書き方で表現します。
・カラーネーム（例：red）
・16進数カラーコード（例：#ff0000）
・rgbカラーコード（例：rgb ( 255, 0 ,0 )）
ちなみにこの３つの例の色は全てこの色を指しています。
カラーコードは馴染みがないと思うので、最初はこちらのサイトからコピペでいいでしょう。
www.htmq.com
color
colorは文字の色を指定するプロパティです。なので文字が入っていない要素に対して指定してもなにも起こりません。
HTML
<p>こんにちは</p>
CSS
p { color: red }
Webページの表示
こんにちは
background-color
background-colorは背景の色を指定するプロパティです。
HTML
<p>こんにちは</p>
CSS
p { background-color: red }
Webページの表示
こんにちは
長さや大きさに関するプロパティ
長さや大きさを指定するには、「単位」が必要になります。ぼくらだって「1cm」とか「1マイル」とか「１尺」とか言ってくれないとわかりませんよね。
長さや大きさの単位はいくつか種類があるのですが、よく使うものを紹介しておきます。
・
px...基本の単位です。画面上の１ピクセルという意味で、「絶対単位（どんなときも同じ長さ／大きさになる）」です。（といっても本当にディスプレイの１画素ということではないです。いまぼくらが見ているような高精細ディスプレイの１画素ならめちゃくちゃ小さい点のはずですが、１ピクセルはもうちょっと大きい点です。）
・
em...フォントサイズの大きさを１とする「相対単位（場合によって長さ／大きさが変わる）」です。個人的にとても直感的で便利な単位です。相対単位なのでフォントサイズの異なる箇所では長さ／大きさが変わります。レイアウトに使う際などは注意が必要です。絶対単位にしたい場合は「
rem」という単位を使います（厳密には相対単位ですが実質的に絶対単位のように使えます）。・
%...親要素の同じプロパティの値を100%とした長さや大きさになります。レイアウトには必須の単位ですが、
box-sizingやpositionというプロパティを理解していないと使いにくいです。・
vw／vh...
vwは画面幅を100とした長さ、vhは画面高を100とした長さになります。たとえば1vwは画面幅の1%ということになります。レスポンシブのレイアウトなどに便利です。width／height
widthは幅の長さ、heightは高さを指定するプロパティです。インライン要素には使えません。
HTML
<a>インライン要素</a> <div>ブロックレベル要素</div>
CSS
a { background-color: red ; width: 50% ; height: 5em } div { background-color: red ; width: 50% ; height: 5em }
Webページの表示
margin／padding
marginは周囲との間隔（外側の余白）、paddingは内側の余白を指定するプロパティです。marginはインライン要素には使えません。
HTML
<div class="ma">marginを設定</div> <div class="pa">paddingを設定</div> <div class="ma pa">両方を設定</div>
CSS
.ma { background-color: red ; margin: 2em } .pa { background-color: red ; padding: 2em }
Webページの表示
marginを設定
paddingを設定
両方を設定
このようにmargin(もしくはpadding): 2emのように設定すると、上下左右全ての方向に同じ値が適用されます。以下のように書くと、上下左右ばらばらの値を指定できます。
（ここからmarginを例にとっていますが、paddingも同様です）
margin: 2em 0 5px 4vw
順番に 上 右 下 左 です。上から右方向に一回転ですね。
ちなみに、
margin: 0 2em
のように書くと 上下 左右 になります。
ある方向の値だけ指定したい、というときはmargin-topmargin-rightmargin-bottommargin-leftというプロパティを使います（paddingも同様）。
HTML
<div class="ue">上方向marginを設定</div> <div class="sayuu">左右方向marginを設定</div> <div class="barabara">上下左右ばらばらのmarginを設定</div>
CSS
div {background-color: red } .ue {margin-top: 2em } .sayuu {margin: 0 2em } .barabara {margin: 2em 0 5px 4vw }
Webページの表示
上方向marginを設定
左右方向marginを設定
文字に関するプロパティ
font-size
文字の大きさ。px%などで指定します。
HTML
<p>こんにちは</p>
CSS
p { font-size: 200% }
Webページの表示
こんにちは
font-weight
文字の太さ。lightregularboldheavyblackなどで指定します。が、そんなに太さの種類を取り揃えてあるフォントはそんなにないので、だいたいはregularboldくらいしか出番がありません。regularのみのフォントもけっこうあります。
HTML
<p>こんにちは</p>
CSS
p { font-weight: bold }
Webページの表示
こんにちは
font-style
文字のスタイル。normalitalicobliqueのどれかで指定します。
HTML
<p>こんにちは</p>
CSS
p { font-style: italic }
Webページの表示
こんにちは
text-decoration
文字の装飾。noneunderlineoverlineline-throughのどれかで指定します。
HTML
<p class="nom">こんにちは</p> <p class="und">こんにちは</p> <p class="ove">こんにちは</p> <p class="lin">こんにちは</p>
CSS
p.nom { text-decoration: none } p.und { text-decoration: underline } p.ove { text-decoration: overline } p.lin { text-decoration: line-through }
Webページの表示
こんにちは
こんにちは
こんにちは
こんにちは
font-family
フォントの種類の指定。ウェブサイトの雰囲気はフォントでかなり変わるので、大事ですね。
使えるフォントはそのページを見ている人のデバイスにインストールされているフォントです。...いやそんなの知るかいということになりますね。ページを訪れる全ての人のデバイスにインストールされている保証のあるフォントなんてありません。じゃあどうすればいいか。
・メジャーなフォントを使う
英字ならHelveticaやFutura、Arial、Times、日本語ならメイリオあたりを指定しておけばだいたいどんな環境からみられても大丈夫です。
・WEBフォントを使う
WEBフォントを使えば、どんな環境に対しても同じフォントを表示できます。このブログのトップページのロゴはWEBフォントを使っています。
Google Fontsなどのサイトからウェブページにインストールして使います。
fonts.google.com
Google Fontsの使い方は、
好きなフォントを選んでボタン → 下の方にでてくるボックスからEMBED → STANDARD の中にある<link href=~~~~~>を自分のページのHTMLの<head>~~~</head>の中に貼ればOKです。
HTML
<p class="fut">Hello</p> <p class="cen">Hello</p> <p class="mei">こんにちは</p>
CSS
p.fut { font-family: 'Futura' } p.cen { font-family: 'Century' } p.mei { font-family: Meiryo, sans-serif }
Webページの表示
Hello
Hello
こんにちは
このページでは代表的かつ今すぐに使い始められるような簡単なプロパティのみ紹介しました。CSSを始めるにはこれだけで十分だと思います。これだけでかなりスタイルできますよ。
ステップアップしてもっといろいろなスタイルをしてみたくなったら、こちらのサイトのプロパティ一覧が便利です。
www.htmq.com
中級編：セレクタの使い方
これまでこのページではCSSをこんなかんじで書いてきました。
p { color: red }
このp（スタイル対象）の部分のことを「セレクタ」といいます。スタイル対象をセレクトするわけです。
セレクタにはいろいろな書き方があり、うまく使うと効率よくスタイル対象をセレクトできます。
複数選択（複数セレクタ）
スタイル対象を,で区切ると複数の対象に同じスタイルを適用できます。
HTML
<p>こんにちは</p> <div>こんにちは</div>
CSS
p, div { color: red }
Webページの表示
こんにちは
こんにちは
子孫要素を選択（子孫要素セレクタ）
ある要素の子要素に対してスタイルを適用したい場合、このようにスペースで区切って書きます
親要素 子要素 { color: red }
このとき、スタイルが適用されるのは子要素だけです。また、下のように「ある要素の子要素の子要素の...」というようにもできます。このときスタイルが適用されるのは最後の子要素だけです
親要素 子要素 子要素 子要素 { color: red }
HTML
<div> <ul class="fruits"> <li>スイカ？</li> <span> <li>みかん</li> <li>りんご</li> </span> </ul> <ul class="vegetables"> <li>いちご？</li> <span> <li>にんじん</li> <li>トマト</li> </span> </ul> </div>
CSS
ul.fruits li { color : red } ul span { background-color : pink } div ul.vegetables span li { font-weight : bold }
Webページの表示
- スイカ？
- みかん
- りんご
- いちご？
- にんじん
- トマト
直下の子要素を選択（子要素セレクタ）
さきほどのスペースで区切る方法では階層的に入れ子になっている全ての要素（子孫要素といいます）にもスタイルが適用されました。
この子孫要素にはスタイルを適用しない書き方があります。
親要素 > 子要素 { color: red }
このように>で区切ります。
先ほどのスペースで区切る方法と組み合わせてたとえば下のように書くと、「A要素直下のB要素内の（子孫要素を含む）全てのC要素」をセレクトします。
A > B C { color: red }
子孫セレクタのときと同じサンプルで違いをみてください。
HTML
<div> <ul class="fruits"> <li>スイカ？</li> <span> <li>みかん</li> <li>りんご</li> </span> </ul> <ul class="vegetables"> <li>いちご？</li> <span> <li>にんじん</li> <li>トマト</li> </span> </ul> </div>
CSS
ul.fruits > li { color : red } ul > span { background-color : pink } div > ul.vegetables > span > li { font-weight : bold }
Webページの表示
- スイカ？
- みかん
- りんご
- いちご？
- にんじん
- トマト
color: redの指定に違いがでています。ul.fruits直下のliだけをセレクトしているので、<span>〜〜</span>の中には効果が及んでいません。
全ての要素を選択（ユニバーサルセレクタ）
全ての要素をセレクトするには*を使います。
*{ color: red } /*ページ内の全ての要素を選択*/ A > *{ color: red }/*A直下の全ての要素を選択*/
その他いろいろなセレクタ
ここで紹介したセレクタだけで困ることはほとんどありませんが、他にもいろいろなセレクタがあります。機会があれば挑戦してみましょう。
www.htmq.com
スタイルの優先順位
ユニバーサルセレクタであっても必ずしもすべてに適用されるわけではありません。CSSには「スタイルの優先順位」があります。こちらのページで詳しく解説しています。
www.htmq.com
絶対に優先させたい設定には!importantを使いましょう。ただし、使いすぎは禁物、というか最終手段にとっておくべきです。
おまけ：コメントの付け方
おまけといっても大事なことです。CSSではコードの中に、動作に影響しない（コンピュータには無視される）コメントを書くことができます。
p /*コメント*/{ color/*コメント*/: red;/*コメント*/} /*コメント*/
このようにコメントはどこにでも書けます。/*と*/で挟んだ部分がコメントになります。改行しても大丈夫です。
p { color: red } /* 複数行にわたるコメント */ p { color: red }
コンピュータはコメント内は全て無視するので、一時的に無効にしたいコードをコメント内にいれてしまうという方法があります。これは「コメントアウト」といって、プログラミング全般でよく使われる手法です。
p { color: red } /* p { color: red } */
