CSSの寺子屋(基本)
- INDEX
- 基本:
- CSSとは
- <span>と<div>の違い
- <class>と<id>の違い
- スタイル適用の優先度
- スタイル例:
- 見出しなどの文字飾り
- 背景
- ボックス
- リスト
- ボタン
- スクロールバーの色変え
「タグの寺子屋」の情報が古くなってきたため「CSSの寺子屋」としてリニューアルしました。
このページでは、スタイルシート(Cascading Style Sheets/以下CSS)の基本的な説明をしています。
CSSとは
CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)とは、ウェブページのデザイン(見栄え)を指定するための言語です。
一昔前は、HTMLのタグでデザインを指定していましたが、現在ではCSSを適用するようになっています。
HTMLは、ウェブページの構造(内容)を記述するもの。
CSSはウェブページのデザイン(見栄え)を指定するもの。
と覚えておきましょう。
CSSの基本的な書き方
セレクタ(要素) { プロパティ(属性) : 値 ;}
わかりやすく言い換えれば、
どこの{何を:どうする;}
のように書きます。
具体例
文字の色や背景色を指定する
CSSはこう書きます
h1{color:#0000FF;}
.hoge {background-color:#ffcc00;}
HTMLはこう書きます
<h1>篆刻素材AOI</h1>
<div class="hoge">篆刻素材AOI</div>
※クラスやIDに使える文字は半角英数字とハイフン「-」アンダーバー「_」などです。ハイフンとアンダーバーはクラス名の最初と最後に使用できません。数字も先頭には使えません。
ブラウザではこう見えます
HTML文書にCSSを適用する
HTML文書にCSSを適用する場合、大きく分けて3つの方法があります。
例ええば、上のように「<h1>の見出し文字を青に指定」する場合は、以下のようになります。
外部CSSファイルから適用
<html>< head>
<link rel="stylesheet" href="***.css" type="text/css">
< /head>
< body>
< h1>篆刻素材AOI</h1>
< /body>
< /html>
※CSSファイルには
h1{color:#0000ff;} と書きます
文書単位に適用
<html>
< head>
<style type="text/css">
<!--
h1{color:#0000ff;}
-->
</style>
< /head>
< body>
< h1>篆刻素材AOI</h1>
< /body>
< /html>
個別に適用
<html>
< head>
< meta name="Content-Style-Type" content="text/css">
< /head>
< body>
< h1 style="color:
#0000ff;">篆刻素材AOI</h1>
< /body>
< /html>
<span>と<div>の違い
CSSでよく用いられる<span>と<div>は「範囲を指定するだけの要素」です。
その違いは、spanはインライン要素で、divはブロック要素ということです。
span | div | |
---|---|---|
HTML |
こんにちはAOIです。 <span style="color: green;">名古屋に住んでいます。</span> |
こんにちはAOIです。<div style="color: green;">名古屋に住んでいます。</div> |
ブラウザでの見え方 | こんにちはAOIです。名古屋に住んでいます。 |
こんにちはAOIです。 名古屋に住んでいます。 |
特徴 |
インライン要素: 余白や改行はなく、主に文章の一部として利用される要素 |
ブロック要素: 余白はないが、 前後に改行が入り、ひとつのまとまった単位として表される要素 |
同種類の代表的な要素 | a、img、strongなど | 見出し(h1~h6)、段落(p)、テーブル(table)、フォーム(form)など |
<class>と<id>の違い
id | class | |
---|---|---|
HTML | <p id="test">篆刻素材AOI</p> | <p class="test">篆刻素材AOI</p> |
CSS |
#test{color: red;} #test2{font-weight:bold;} |
.test{color: red;} .test2{font-weight:bold;} |
特徴 |
|
|
スタイル適用の優先度
話が飛びますが、スタイルを指定したのに効かない!ということがあるので、参考までに書いてみました。
指定方法 | 説明 | 例 | 優先度(点) |
---|---|---|---|
全称セレクタ (ユニバーサルセレクタ) |
全要素 | *{color: red} | 0 |
要素型セレクタ (タイプセレクタ) |
特定の要素 | p{color: red} | 1 |
擬似要素 | 要素内の特定の文字や行に対してスタイルを指定したり、前後にあらかじめ指定した文字や画像を追加することができる要素 | p:before { content: "てゆーかぁ";} | 1 |
擬似クラス | 要素が特定の状態にある場合にスタイルを指定する要素 | a:hover {color: red;} | 10 |
classセレクタ | 特定のclass名がつけられた要素 | .hoge{color: red;} | 10 |
idセレクタ | 特定のid名がつけられた要素 | #hoge{color: red;} | 100 |
タグのstyle属性 | 要素に対して直接スタイルを指定 | style="color: red" | 1000 |
!important | 優先度を無視して適用(あまりおすすめではない方法のようです) | color: red !important; |
スタイルが重複した場合
スタイルが重複した場合は、あとに書いたもので上書きされます。
例えば下のように書くと、文字は青く表示されます。
p.hoge{color: red}
p.hoge{color: blue}