要素(CSS3.0)

CSSでできること

CSSは、htmlの装飾(Dsign)に関する部分を担当します。 (Design)つまり、見た目の部分です。
つまり、本文には全く影響せず、見た目だけを変更することができるということです。

これが理解できれば、Javascriptを利用し、ボタンを設けることにより、一瞬にして、ページのデザインを変更できる。ということです。

CSS3.0のタグを覚える

Designの読み込みは、Javascriptにより変更しますが、Design自体は、CSSにより、変更します。


CSS3.0_Tag

この項目では、CSS仕様書に書かれている要素について簡単な説明をします。
各要素を完璧に理解しましょう。

CSS3.0のタグを覚える

タグ(要素)は、完璧に覚えておく必要があります。これは文法と同じです。
見えるからいいではないか・・・では、ないのです!
CSS3.0仕様書に基づいた正しい記述でないと意味がないのです。


文字の色を変えるには?・・・

htmlでは、html内に、 <FONT COLOR="#"></FONT>とか<FONT SIZE="+1"></FONT>などと記述していましたが、
現在の、htmlでは、これらデザイン(装飾) ⇒  見た目:に関する記述は、すべてCSS内に記述します。

CSSの記述方法は、下記の3種類があります。

  1. html内に記述する方法
  2. 外部に、ファイルを設け、読み込む方法
  3. 外部に設けたCSSファイルを数個を一つのCSSとして読み込む方法

また、CSSを、段階的に読み込む方法として、
main.cssに、@importを利用して、navigation,layout,textなど表示用CSSを、 読み込むこともで来ます。

CSSの優先度は、html内に書かれたものが、最優先されます。 外部CSSの優先度は、後出しじゃんけんと、同じで、最後に記述・読み込まれたものが、最優先されます。

html内の記述は、<style type="color:red;font-size:20px;"/style>など、と記述します。

文字色の変更

色の指定方法も、3種類あります。

  1. color:redなどOSで、決められている指定色を使う
  2. 光の3原色RGB(0~f)を、3桁の数字(2進法)で指定する方法color:#F00;は、それぞれ、
    • 最初の桁:R(0~f)
    • 真ん中の桁:G(0~f)
    • 最後の桁:B(0~f)を、示す。
  3. 光の3原色RGBを、6桁の数字(16進法)で指定する方法color:#ff0000;は、それぞれ、
    • 最初の2桁:R(00~ff)
    • 中の2桁:G(00~ff)
    • 後の2桁:B(00~ff)
    を、示す。

 各桁を3段階づつ下げると、WebSefeColor = 212色 を、表現できます。 それ以外の色は、各段階表示により異なります。

例 >> fc9630
または、ffcc99663300
途中の数字に変えると、さらに詳しく識別できる。ただし、各桁で同文字になる部分は、省く。

これらの色番号は、カラーピッカーを、 使うと簡単に探すことができます。

オーサリングツールをご使用の場合は、各ツールのマニュアルを、参照ください!


文字のサイズを変えるには?・・・

WEBで、使用できる文字は、WebFontを使用します。一般的に使用できる文字は、Windowsの場合: Arial,Helvetica,sans-serifですが、
それ以外の文字を表示したい場合は、WebFontを指定することにより 閲覧者のシステムに、インストールされている文字であれば表示できます。
(当然ですが、インストールされていない場合は、システムの標準文字、あるいは、よく似た文字型となります)

Arial,Helvetica,sans-serifの様に、第3候補までは指定できますので、WindowsMacUnix系では、 同じように様な文字で表示されます。
昨今では、iconを使用せず、このWebFontを、利用してiconの様に表示させる場合が、多々あります。

文字のサイズは、px,em,% などで指定する。標準文字サイズを、12pxとした場合、 1em = 12px,100% = 12px となる。

文字のサイズの変更

文字のサイズ、文字の太さは、すべてCSSに記述します。


Boxで囲むには?

CSSに下記のようなボタンクラスを記述し、 ボタンhtml内で指定する

ボタンを作る


.button{
  padding:3px 5px;
  border:solid 1px #cccccc;    /* ボーダー枠の色は灰色 */
  font-weight:bold;nbsp;        /* 太字を設定 */
  border-radius:3px;              /* 角丸を設定 */
  background-color:#dcdcdc; /* ボタンの背景色の指定 */
}


セレクタ

すべての要素
特定の要素
E[foo] 
foo属性を持つE要素
E[foo="bar"] 
foo属性の値にbarを持つE要素
E[foo~="bar"] 
foo属性の値候補(ホワイトスペース区切り)にbarを持つE要素
E[foo^="bar"] 
foo属性の値がbarで始まるE要素
E[foo$="bar"] 
foo属性の値がbarで終わるE要素
E[foo*="bar"] 
foo属性の値にbarを含むE要素
E[foo|="en"] 
foo属性の値候補(ハイフン区切り)がenで始まるE要素
E:root 
文書のルートとなる要素
E:nth-child(n) 
n番目の子となるE要素
E:nth-last-child(n) 
後ろから数えてn番目の子となるE要素
E:nth-of-type(n) 
n番目のその種類の要素
E:nth-last-of-type(n) 
後ろから数えてn番目のその種類の要素
E:first-child 
子として最初のE要素
E:last-child 
子として最後のE要素
E:first-of-type 
最初のその種類の要素
E:last-of-type 
最後のその種類の要素
E:only-child 
子として唯一となるE要素
E:only-of-type 
子として唯一となるその種類の要素
E:empty 
要素内容が空となるE要素
E:link 
未訪問のリンク
E:visited 
訪問済のリンク
E:active 
クリック中の要素
E:hover 
カーソルが乗っている要素
E:focus 
フォーカスされた要素
E:target 
リンクのターゲット先となるE要素
E:lang(fr) 
特定の言語を指定された要素
E:enabled 
有効となっているユーザーインターフェース要素(テキストエリアなど)
E:disabled 
無効となっているユーザーインターフェース要素(テキストエリアなど)
E:checked 
チェックされているユーザーインターフェース要素(ラジオボタン・チェックボックスなど)
E::first-line 
要素の最初の行
E::first-letter 
要素の最初の文字
E::before 
要素の直前に内容を挿入する
E::after 
要素の直後に内容を挿入する
E.warning 
特定のclass名がつけられた要素
E#myid 
特定のid名がつけられた要素
E:not(s) 
sで指定するセレクタに当てはまらないE要素
E F 
E要素の子孫となるF要素
E > F 
E要素の子となるF要素
E + F 
E要素の直後に隣接しているF要素
E ~ F 
E要素の後ろにある同じ階層のF要素
E , F 
複数のセレクタに同じスタイルを適用する

[:]の記述に注意


ユーザーインターフェース・セレクタ

:indeterminate疑似クラス
ラジオボタンやチェックボックスの切り替えがはっきりしない状態
:default疑似クラス
ボタン・メニューなど、ユーザーインターフェース要素の初期状態
:valid疑似クラス
妥当な状態
:invalid疑似クラス
妥当ではない状態
:in-range疑似クラス
範囲内の状態
:out-of-range疑似クラス
範囲外の状態
:required疑似クラス
必須入力の状態
:optional疑似クラス
任意入力の状態
:read-only疑似クラス
閲覧専用の状態
:read-write 疑似クラス
書き込み可能の状態(テキスト入力フィールドなど)
::selection疑似要素
ユーザーに選択された状態のテキスト
::value疑似要素
入力された値
::choices疑似要素
選択された選択肢
::repeat-item疑似要素
連続して要素が配置されている場合のそれぞれの要素
::repeat-index疑似要素
連続して要素が配置されている場合のその親要素

[:]の記述に注意