WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > セレクタ

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は以下の関係にあります。

HTML,CSS,Javascritの関係

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>
好きな色:
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン