IORI online School

JavaScript、html、css の無料学習サイト

【WEB 入門講座】CSSの基礎を学習

[WEB 入門講座]CSSの基礎を学習

本講座から、CSSの学習に入る。 最初にCSSを利用するための基本的操作を学習する。 その後、CSSを利用してWebサイトの見栄えを変更する。

はじめてのCSS

CSSの学習を始める。 CSSはWebサイトの「見栄え」を設定するために存在する。 一般的CSSのファイルを作成して、 そのCSSファイルをHTMLファイルに適用する。

走るIORI

CSSを利用して、文字列「走るIORI」の背景色を黄色に設定する。 こんかい、sample.htmlファイルと、 style.cssの2つのファイルを作成する。 どちらも、文字コードUTF-8 で保存する必要がある。

まず、sample.htmlファイルを作成する。

001<!DOCTYPE html><html lang="ja">
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行目である。

004<link rel="stylesheet" href="style.css">

CSSファイルを利用する <link rel="stylesheet" href="[ファイル名]">

あるHTMLファイルでCSSを利用する場合、 HTMLファイルのheadタグの中に、このように記述する。 利用するCSSファイルのパスを、 href属性の値に設定する。 こんかい、href属性の値は「style.css」である。 このHTMLファイルは、同じフォルダの中のstyle.cssを利用する。

では、style.cssを見る。

001/*   コメント
002  pタグを選択
003*/
004p {
005  background : #df5 ;
006}

1行目から3行目までがコメントである。

コメント /*
   コメント
*/

「/*」と「*/」の間にコメントを記述する。 複数行のコメントを記述できる。

001/*   コメント
002  pタグを選択
003*/
004p {
005  background : #df5 ;
006}

4行目で、タグの見栄えを設定する。

特定のタグの設定をする タグ {
  [見栄えを設定]
}

「タグ」を記述した後、中括弧を開く。 数行下で中括弧を閉じる。 中括弧で囲まれた部分をブロックと言う。 見栄えを設定するタグ名を「タグ」という部分に記述する。 pタグの見栄えを設定する場合、 「タグ」の部分に「p」を記述する。 見栄えの設定(タグの装飾)は、ブロックの中に記述する。 では、背景色の設定方法を学習する。

色の指定方法と背景色の設定

走るIORI

001/*   コメント
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プロパティの値を変更する。

001/*   コメント
002  pタグを選択
003*/
004p {
005  background : #f00 ;
006}

backgroundプロパティの値を「#f00」にした。 赤が強く、それ以外(緑と青)は弱い。

走るIORI

背景色が赤色になった。

001/*   コメント
002  pタグを選択
003*/
004p {
005  background : #ff0 ;
006}

backgroundプロパティの値を「#ff0」にした。 赤と緑が強く、青は弱い。

走るIORI

赤と緑が混じって、黄色なる。 こんどは、パステルカラーにする。

001/*   コメント
002  pタグを選択
003*/
004p {
005  background : #ff9 ;
006}

走るIORI

backgroundプロパティの値を「#ff9」にした。 赤と緑が強く、青は弱い。 しかし、青の強さは「9」である。 赤と緑と比較して「弱すぎる」とは言えない。 このように、赤、緑、青の強さが近い時、 パステルカラーになる。

001/*   コメント
002  pタグを選択
003*/
004p {
005  background : #000 ;
006}

走るIORI

backgroundの値を#000にした。 赤、緑、青の強さが「0」である。 この場合、黒になる。

001/*   コメント
002  pタグを選択
003*/
004p {
005  background : #aaa ;
006}

走るIORI

backgroundの値を#aaaにした。 赤、緑、青の強さが「a」である。 赤、緑、青の強さが等しい場合、灰色になる。 3つの値が「a」の場合、比較的明るい灰色になる。

001/*   コメント
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を変更したので、そちらを掲載する。

001/* pタグを設定 */
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プロパティで、文字の色を設定する。 色の指定方法は、背景色で解説したものと同じである。

001/* pタグを設定 */
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」と設定する。

001/* pタグを設定 */
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プロパティで、 枠の種類を設定できる。

001/* pタグを設定 */
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 線、枠の太さ、色を指定