CSS fileを作成して、簡単なウェブページを作ってみた

CSS (Cascading Style Sheet)

CSSはHTMLで表現可能と考えられるデザインの大部分を実現できる要素を取り入れつつ、新たなデザイン機能を備える。: 1. ページを表示するメディアに合わせてスタイルシートを切り替えることで、メディアごとに表示を変化させることができる。; 2. ウェブブラウザ、ウェブサイト制作者、ユーザがそれぞれ定義した CSSのもたらす効果を重ね合わせることができる

CSSはhtml fileに対してデザインを施すためのfileと言える

1) セレクター:

▽要素のタイプ（例えば、< p >要素など）にスタイルを適用します。

type_selector.css

p {
    color: blue;
}

▽特定のクラス属性を持つ要素にスタイルを適用します。同じクラスを複数の要素で使用できます。

class_selector.css

.title {
    font-size: 24px;
}

▽唯一のID属性を持つ要素にスタイルを適用します。ページ内でIDは一意でなければなりません。

ID_selector.css

#main-content {
    background-color: #f0f0f0;
}

▽ 特定の属性値を持つ要素にスタイルを適用します。

attribute_selector.css

input[type="text"] {
    border: 1px solid #ccc;
}

2) プロパティ:

▽テキストの色を指定します。

color_property.css

p {
    color: red;
}

▽テキストのフォントファミリーを指定します。

font_family.css

body {
    font-family: Arial, sans-serif;
}

▽テキストのサイズを指定します。

text_size.css

h1 {
    font-size: 36px;
}

▽要素の背景色を指定します。

background_color.css

.section {
    background-color: #f7f7f7;
}

▽要素の境界線を指定します。

border.css

.box {
    border: 2px solid #000;
}

▽要素の外側の余白を指定します。

outer_border.css

.margin-example {
    margin: 20px;
}

▽要素の内側の余白を指定します。

inner_border.css

.padding-example {
    padding: 10px;
}

3) 類似クラス:

▽マウスが要素の上に乗ったときに適用されます。

mouse_on.css

.button:hover {
    background-color: #ff0000;
}

▽要素がアクティブ（クリックされている）状態のときに適用されます。

click_on.css

.button:active {
    background-color: #00ff00;
}

▽要素がフォーカスされているときに適用されます。通常、フォーム要素に使用されます。

focus.css

input:focus {
    border-color: blue;
}

4) レイアウト:

▽要素の表示方法を指定します。

display.css

.box {
    display: block;
}

▽要素の配置方法を指定します。

position.css

.position-example {
    position: relative;
}

▽要素の浮動を指定します。

float.css

.float-example {
    float: left;
}

5) アニメーション:

▽アニメーションのキーフレームを定義します

animation_definition.css

@keyframes slidein {
    from {
        margin-left: 100%;
    }
    to {
        margin-left: 0%;
    }
}

▽

animation_application.css

.slide {
    animation-name: slidein;
    animation-duration: 3s;
}

animation-name:: アニメーションの名前を指定します。
animation-duration:: アニメーションの長さを指定します。
animation-timing-function:: アニメーションのタイミング関数を指定します。例えば、linear、ease-in、ease-out等。

6) ボックスモデル:

▽要素の幅を指定します。

width.css

.box {
    width: 200px;
}

▽要素の高さを指定します。

height.css

.box {
    height: 100px;
}

▽要素のボックスモデルを指定します。通常、content-box、border-boxなどがあります。

box.css

.box {
    box-sizing: border-box;
}