「和風素材の篆刻(てんこく/てん刻)素材AOI(葵)」背景 ボタン イラスト等 ホームページやブログに使える和風素材をはじめ、多数のフリー素材を提供。☆Japanese Graphics☆


和風素材の篆刻素材AOI

CSSの寺子屋(基本)

「タグの寺子屋」の情報が古くなってきたため「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に使える文字は半角英数字とハイフン「-」アンダーバー「_」などです。ハイフンとアンダーバーはクラス名の最初と最後に使用できません。数字も先頭には使えません。

ブラウザではこう見えます

篆刻素材AOI

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;}
特徴
  • 優先度が高い
  • 同じid名を、1ページ中に1度しか使えない
  • <p id="test test2">という複数指定はできない
  • idより優先度が低い
  • 同じclass名を、1ページ中に何度でも使える
  • <p class="test test2">と属性値を半角スペースで区切って複数指定できる

スタイル適用の優先度

話が飛びますが、スタイルを指定したのに効かない!ということがあるので、参考までに書いてみました。

指定方法 説明 優先度(点)
全称セレクタ
(ユニバーサルセレクタ)
全要素 *{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}