ga-04-03

HTML/CSS初心者の為の
無料で挫折させない ホームページ作成講座

3.CSSの基本

目   次

1.CSSの書き方の基本

2.CSSを書くパターン3通り

3.CSSの適用順位

4.CSSの継承

5.CSSの主要なプロパティ



  1.CSSの書き方の基本

CSS(Cascading Style Sheets) の書き方は以下のように決まっています。

画像

セレクタ
セレクタにはデザインの適用先を書きます。ここには、class名、id名、タグ名を書きます。 class名の頭には「.」(ドット)を付けます。id名の頭には「#」を付けます。

プロパティ
プロパティには何を変えるのかを指定します。背景色を変えるか、文字色を変えるか、枠線を引く、等々を指定します。


プロパティの値を指定します。例えば背景色を何色に変えるか等を指定します。

開き波括弧
プロパティの先頭に書きます。

閉じ波括弧
最後に書きます。

コロン(:)
プロパティと値の間に書きます。

セミコロン(;)
プロパティを続ける時に書きます。1プロパティで終わるときも書いておいて構いません。プロパティを追加するときに忘れなくて便利です。

  
  2.CSSを書くパターン3通り

CSSを書くパターン(書く場所)は3通りあります。

1.CSSファイルに書いて、HTMLファイルからそのCSSファイルを呼び出す方法です。最も一般的な方法です。他のページでも共通に使うことができます。

【サンプルHTMLコード】

<!DOCTYPE html>
<!--====================================
     CSS書き場所(style-sheet)
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style-1.css">
</head>
<body>
    <p class="futomoji">CSS書き場所(style-sheet)</p>
</body>
</html>
        

※ファイルを保存するときは、「rensyu-1.html」というファイル名を使って下さい。。


【サンプルCSSコード】

@charset "utf-8";
/*======================================
  CSS書き場所(style sheet)
--====================================*/
.futomoji{font-weight: bold;
          font-size: 24px;
}
        

※ファイルを保存するときは、「style-1.css」というファイル名を使って下さい。。


2.インラインにstyle属性を使って書く方法です。その場所で一度しか使わないとき、およびテストの時に便利です。又、モジュールのパラメータ(背景カラー、文字カラー、絶対番地、等)を指定する時に使います。

【サンプルHTMLコード】

<!DOCTYPE html>
<!--====================================
 CSS書き方(inlineに指定する方法)
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style-1.css">
</head>
<body>
    <div style="width: 380px;
            margin:30px auto;
            height: auto;
            color: red;
            padding: 30px;
            text-align: center;
            border: double 10px orange;">
        <h1>これはページ見出しです</h1>
    </div>
</body>
</html>
        

※今回は、CSSファイルはありません。


3.head部にstyleタグを用いて書く方法です。他のページで使えないのでお勧めしません。

【サンプルHTMLコード】

<!DOCTYPE html>
<!--====================================
     CSS書き場所(styleタグ)
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS書き場所(styleタグ)</title>
    <style type="text/css">
        h1 { color: red; }
    </style>
</head>
<body>
    <h1>CSS書き場所 ・・・ 3</h1>
    <p>head部にstyleタグを使って書きます。</p>
</body>
</html>
        

※今回は、CSSファイルはありません。


  
  3.CSSの適用順位

同じ要素に同じプロパティを記述した場合、適用されるのは1つのみです。大まかな適用順位は以下の通りです。

1.同じ適用順位のものは、後ろに書いたものが優先される。

2.記述場所によって優先度が変わる。
インライン > head内(内部参照) > cssファイル(外部参照)

3.セレクタの種類によって優先度が変わる。
id > class > タグ

4.一番優先度の高いのが「!important」
書き方 : セレクタ {プロパティ名 : 値 !important}
※多用するとCSSの保守性が悪くなる。

  
  4.CSSの継承

CSSの継承とは、親要素で指定したプロパティが子要素においても引き継がれることです。但し、プロパティには親要素に指定した値が子要素に継承されるものと継承されないものがあります。

  1. 継承される主なプロパティ
    •  font
    •  color
    •  text-align
    •  line-height
    •  letter-spacing

  2. 継承されない主なプロパティ
    •  width
    •  height
    •  padding
    •  margin
    •  border
    •  background
  
  5.CSSの主要なプロパティ

CSSのプロパティはたくさんありますが、主要なプロパティは限られています。 徐々に慣れていけばよいと思います。

画像

 back
pagetop
 next

主要HTNLの書き方

CSSの基本

CSSの書き方
(実用的サンプル)

Copyright (c) 無料で挫折させないホームページ作成講座 All Rights Reserved.
by yorozuken