【WEB 入門講座】CSSの基礎を学習
はじめてのCSS
CSSの学習を始める。 CSSはWebサイトの「見栄え」を設定するために存在する。 一般的CSSのファイルを作成して、 そのCSSファイルをHTMLファイルに適用する。
走るIORI
CSSを利用して、文字列「走るIORI」の背景色を黄色に設定する。 こんかい、sample.htmlファイルと、 style.cssの2つのファイルを作成する。 どちらも、文字コードをUTF-8 で保存する必要がある。
まず、sample.htmlファイルを作成する。
002<head><meta charset="UTF-8">
003<title>IORI</title>
004<link rel="stylesheet" href="style.css">
005</head>
006<body>
007
008 <p>走るIORI</p>
009
010</body>
011</html>
このsample.htmlファイルは変更せず、本講座で利用し続ける。 さて、CSSに関わる部分は4行目である。
CSSファイルを利用する <link rel="stylesheet" href="[ファイル名]">
あるHTMLファイルでCSSを利用する場合、 HTMLファイルのheadタグの中に、このように記述する。 利用するCSSファイルのパスを、 href属性の値に設定する。 こんかい、href属性の値は「style.css」である。 このHTMLファイルは、同じフォルダの中のstyle.cssを利用する。
では、style.cssを見る。
002 pタグを選択
003*/
004p {
005 background : #df5 ;
006}
1行目から3行目までがコメントである。
コメント
/*
コメント
*/
「/*」と「*/」の間にコメントを記述する。 複数行のコメントを記述できる。
002 pタグを選択
003*/
004p {
005 background : #df5 ;
006}
4行目で、タグの見栄えを設定する。
特定のタグの設定をする
タグ {
[見栄えを設定]
}
「タグ」を記述した後、中括弧を開く。 数行下で中括弧を閉じる。 中括弧で囲まれた部分をブロックと言う。 見栄えを設定するタグ名を「タグ」という部分に記述する。 pタグの見栄えを設定する場合、 「タグ」の部分に「p」を記述する。 見栄えの設定(タグの装飾)は、ブロックの中に記述する。 では、背景色の設定方法を学習する。
色の指定方法と背景色の設定
走るIORI
002 pタグを選択
003*/
004p {
005 background : #df5 ;
006}
pタグの背景色を設定する。
CSSの設定 プロパティ名 : [値] ;
背景色、文字色、文字サイズなど装飾する対象を、 「プロパティ」と言う。 プロパティとプロパティの値を設定する事により、 様々な装飾を行なう。
背景色の設定 background : [色] ;
背景色を設定する場合、「background」プロパティを利用する。
「background」の後ろに「: (コロン)」を記述して、 その後に色を設定する。 最後に「; (セミコロン)」を記述する。 以上で背景色を設定できる。 色を設定するには「background」プロパティの値を設定する必要がある。
つぎに、色の設定方法を学習する。 CSSで色を設定する方法は色々あるが、 こんかい1つだけご紹介する。
#RGB指定
R:赤の強さ
G:緑の強さ
B:青の強さ
色を「#」で指定する方法の1つをご紹介する。 #の後に数字又はアルファベットを3つ記述する。 それぞれ「赤色の強さ」「緑色の強さ」「青色の強さ」を意味する。 例えば、「#950」と記述すると、 赤色の強さが「9」、緑色の強さが「5」、 青色の強さが「0」の設定になる。 「赤色」を強くすると、赤色になる。 「赤色」と 「緑色」を強くすると、赤と緑が混じって、黄色に近づく。 このように、赤、緑、青の強さを指定して色を表示する。 では、強さの指定方法を解説する。
弱 | 強 | ||||||||||||||
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | a | b | c | d | e | f |
各色の強さは、「16進数」で指定する。 つまり、「0」から「f」で指定する。 「0」が一番弱く、「f」が一番強い。 では、具体的に色々色を見る。
style.cssファイルのbackgroundプロパティの値を変更する。
002 pタグを選択
003*/
004p {
005 background : #f00 ;
006}
backgroundプロパティの値を「#f00」にした。 赤が強く、それ以外(緑と青)は弱い。
走るIORI
背景色が赤色になった。
002 pタグを選択
003*/
004p {
005 background : #ff0 ;
006}
backgroundプロパティの値を「#ff0」にした。 赤と緑が強く、青は弱い。
走るIORI
赤と緑が混じって、黄色なる。 こんどは、パステルカラーにする。
走るIORI
backgroundプロパティの値を「#ff9」にした。 赤と緑が強く、青は弱い。 しかし、青の強さは「9」である。 赤と緑と比較して「弱すぎる」とは言えない。 このように、赤、緑、青の強さが近い時、 パステルカラーになる。
002 pタグを選択
003*/
004p {
005 background : #000 ;
006}
走るIORI
backgroundの値を#000にした。 赤、緑、青の強さが「0」である。 この場合、黒になる。
002 pタグを選択
003*/
004p {
005 background : #aaa ;
006}
走るIORI
backgroundの値を#aaaにした。 赤、緑、青の強さが「a」である。 赤、緑、青の強さが等しい場合、灰色になる。 3つの値が「a」の場合、比較的明るい灰色になる。
002 pタグを選択
003*/
004p {
005 background : #fff ;
006}
走るIORI
backgroundの値を#fffにした。 赤、緑、青の強さが「f」である。 3つの値が「f」の場合、白色になる。
解説は以上である。
文字色(color)、文字サイズ(font-size)、枠(border)の設定
sample.htmlとstyle.cssを利用して、 CSSのプロパティを学習する。 sample.htmlは変更しない。 style.cssを変更したので、そちらを掲載する。
002p {
003 color : #892;
004 background : #df5;
005 font-size : 2em ;
006 border : solid 0.2em #892 ;
007}
pタグを装飾する記述である。 pタグを色々(複数)装飾する場合、 プロパティと値を、箇条書きにする。
「プロパティ : 値 ; 」と記述する。 一番最後に「 ; (セミコロン)」を忘れないようにしてほしい。
では画面を見る。
走るIORI
この際、サンプルの美的センスは問わないでほしい。 その気になれば、私もセンスを発揮するのだ。 style.cssのプロパティを解説する。
プロパティ | 解説 | 値 | 解説 |
color | 文字の色 | #892 | 赤と緑が強く青が弱いので黄色。 全体的に値が低いので暗い黄色になる |
font-size | 文字のサイズ | 2em | 標準文字サイズの2倍の大きさ |
border | 枠の設定 | solid 0.2em #892 | 線、枠の太さ、色を指定 |
colorプロパティで、文字の色を設定する。 色の指定方法は、背景色で解説したものと同じである。
002p {
003 color : #05a;
004 background : #df5;
005 font-size : 2em ;
006 border : solid 0.2em #892 ;
007}
走るIORI
colorプロパティを「#05a」へ変更した。 青が強いが全体的に数値が低いので、暗い色になる。
つぎに、font-sizeプロパティを解説する。 font-sizeプロパティは文字のサイズ(大きさ)を設定する。 設定方法は色々あるが、こんかい「em」という単位を利用する。
em 標準文字サイズを基準として、 その何倍か指定する。
emは標準文字列の何倍に設定するか決める単位である。 「2em」は標準文字サイズの2倍に設定する。 そのため、大きく見える。 標準文字サイズの半分に設定する場合、 「0.5em」と設定する。
002p {
003 color : #892;
004 background : #df5;
005 font-size : 0.5em ;
006 border : solid 0.2em #892 ;
007}
走るIORI
font-sizeの値を「0.5em」に設定した。 文字のサイズが小さくなった。 「0.5em」は「標準文字サイズの半分」という意味である。 つぎに、枠の設定を解説する。
枠の設定 boder : [枠の種類] [太さ] [色] ;
pタグの枠を設定する場合、borderプロパティを利用する。 borderプロパティの値は、 「枠の種類」「太さ」「色」の3つある。 それぞれの値をスペース区切りで記述する。 「太さ」は「em」などで指定する。 「色」は「#RGB」などで指定する。 枠の種類は、「solid」「double」「dotted」等がある。
値 | 解説 |
solid | 通常の線 |
double | 二重線 |
dotted | 点線 |
borderプロパティで、 枠の種類を設定できる。
002p {
003 color : #892;
004 background : #df5;
005 font-size : 2em ;
006 border : dotted 0.2em #892 ;
007}
走るIORI
boderプロパティの値を「solid」から「dotted」へ変更した。 pの枠が点線になる。 解説は以上である。
まとめ
CSSファイルを利用する <link rel="stylesheet" href="[ファイル名]">
コメント
/*
コメント
*/
特定のタグの設定をする
タグ {
[見栄えを設定]
}
CSSの設定 プロパティ名 : [値] ;
#RGB指定
R:赤の強さ
G:緑の強さ
B:青の強さ
弱 | 強 | ||||||||||||||
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | a | b | c | d | e | f |
プロパティ | 解説 | 値の例 | 解説 |
color | 文字の色 | #892 | 赤と緑が強く青が弱いので黄色。 全体的に値が低いので暗い黄色になる |
font-size | 文字のサイズ | 2em | 標準文字サイズの2倍の大きさ |
border | 枠の設定 | solid 0.2em #892 | 線、枠の太さ、色を指定 |