cman.jp > WEBページ作成TOP > CSSリファレンス > セレクタ
WEBページ作成
広告
CSS(スタイルシート)とは？
CSS（スタイルシート）はホームページのデザインを指定できます。「CSS = Cascading Style Sheets」
「W3C」（WWWの標準化を行っている非営利団体）でCSSは定義されています。
詳細：https://www.w3.org/Style/CSS/
| 構文 | 見た目 | |
|---|---|---|
| CSSなし | <span>あいうえお</span> | あいうえお |
| CSSあり | <span style="color:red;font-size:140%;">あいうえお</span> | あいうえお |
以前のHTML4.01では「HTML」でデザインを指定することも出来ました。現在のHTML5ではHTMLのデザイン部分は廃止が多くなっており、CSSでデザイン・見た目を指定します。
| 構文 | 見た目 | |
|---|---|---|
| HTML4.01 | <span><font size="+1" color="red">あいうえお</font></span> <b>かきくけこ</b> |
あいうえお かきくけこ |
| ↓ <font>タグは廃止され、CSSで指定するようになっています（廃止タグ一覧） | ||
| HTML5 | <span style="color:red;font-size:140%;">あいうえお</span> <span style="font-weight: bold;">かきくけこ</span> |
あいうえお かきくけこ |
広告
HTML,CSS,JavaScriptの違い
HTMLとCSS、Javascriptは以下の関係にあります。
1.HTML
HTMLはページの構造・部品を定義します。
<div>
好きな色：
<select>
<option value="red">赤</option>
<option value="blue">青</option>
<option value="green">緑</option>
</select>
</div>
好きな色：
2.CSS(STYLE)
CSS(STYLE)はページのデザイン・装飾を定義します。
上記のHTMLにCSSを定義すると見た目が大きく変わります。
<div style="border: 2px solid red;padding:10px;">
好きな色：
<select style="width:80px;background-color:red;font-weight:bold;color:#fff;font-size:120%;">
<option value="red" style="background-color:red;">赤</option>
<option value="blue" style="background-color:blue;">青</option>
<option value="green" style="background-color:green;">緑</option>
</select>
</div>
好きな色：
3.JavaScript
JavaScriptはページや部品の動きを定義します。
<script>
function jsDemo1(){
var selectIdx = document.getElementById("idDemo2").selectedIndex;
var selectColor = document.getElementById("idDemo2").options[selectIdx].value;
document.getElementById("idDemo1").style.borderColor = selectColor;
document.getElementById("idDemo2").style.backgroundColor = selectColor;
}
</script>
<div style="border: 2px solid red;padding:10px;" id="idDemo1">
好きな色：
<select style="width:80px;background-color:red;font-weight:bold;color:#fff;font-size:120%;"
id="idDemo2" onChange="jsDemo1();">
<option value="red" style="background-color:red;">赤</option>
<option value="blue" style="background-color:blue;">青</option>
<option value="green" style="background-color:green;">緑</option>
</select>
</div>
好きな色：
広告