要素(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)
    を、示す。
  4.  各桁を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; /* ボタンの背景色の指定 */
}