CSS基礎メモ

３年くらい前のCSSを独学し始めた頃につくった辞書的なメモですが、
今でも使う頻度の少ないものは忘れてたりしたのでQiitaに残して置こうと思います。

セレクタについて

* ：　ユニバーサルセレクタ…全てに適用
a, b　：　aとbに適用
a b　：　(aとbの間にスペース)aの下の階層bに適用　…家族、孫もひ孫も
a > b　：　aの直下にあるb　…子どものみ、孫には適用されない
a + b　：　aの次に来るb …長子のみ、孫や次子には適用されない
a ~ b　：　aの後に現れるb　…aより後に現れたの血縁関係全員
ab ：　aでありbでもあるものだけに適用

属性セレクタ

a[title]{ color:red }
aタグのうちtitle属性をもったものに適用　[属性名]

a[href="index.html"]{ color:red }
属性の値がある特定の値だった場合に適用　[属性名="値"]

a[class~="search"]{ color:red }
aタグの中のclass属性にsearchが含まれている場合

[補足]
a[href]　：aのhref属性に対して適用
a[href="http"]　：hrefにhttpという値であれば
a[href~="http"]　：hrefの値にhttpをもつもの

a[href^="http"]　：hrefの値がhttpから始まる
a[href$="com"]　：hrefの値がcomでおわる
a[href$="apple"]　：始まり終わりかかわらずhrefの値にcomが含まれている

疑似クラス(状態)

ある要素が特定の状態にあるときに限定して適用するセレクタ

:first-child： 子要素の中で最初のもの
a:link： 未訪問
a:visited： 訪問
a:hover： マウスオーバー時
a:active： クリック時

input:focus { background: skyblue;}
フォーカスがあたっているときに適用（フォームの入力時やボタンを押している瞬間などなど）

擬似クラス(順序)

:first-child　最初の要素
:last-child　最後の要素

:nth-child(n) ：n番目
:nth-child(odd) ：奇数番目
:nth-child(even) ：偶数番目
:nth-child(An+B) ：nは0から始まる整数として考えA個目からB個おきになる

:nth-last-child(n) 最後からn番目
:nth-only-child(n) 子要素が唯一つである場合

【注意】:nth-child(n)はある要素の子要素のうち何番目かを指定できるが、
それらの子要素はすべて隣接している必要がある
↓
途中に別の要素が挟まっている場合
[first/last/n]-of-typeを使う

(例):first-of-typeの場合
▼html

<section>
    <h1>タイトル</h1>
    <p>てす</p>
    <p>てすてす</p>

    <h2>タイトル</h2>
    <p>てすてすてす</p>
</section>

▽CSS

p:first-of-type {
    color:orange;
}
てすに適用(first)


p:last-of-type
{
    color:red;
}
てすてすてすに適用(last)

p:nth-of-type(2)
{
    color:pink;
}
てすてすに適用(2番目)

その他のセレクタ

【not】

あるようその中で特定のセレクタを除いて指定する

li:not(.mark) {
    background: red;
= class名にmarkがあるもの以外の背景を赤にする
}

【empty】

空の要素に対して指定する

li:empty {
    background: black;
}

要素の何も入ってない

に適用される　＝　

【:enable】enable・・・有効になっているのもの、【:disable】disable・・・無効効になっているのもの

input[type="text"]:enable
{
    background: violet;
}
input[type="text"]:disable
{
    background: red;
}

【:checked】

チェックされているものに対して指定する

input[type="checkbox"]:checked + label
{
    background: skyblue;
}

擬似要素

ある要素の一部を指定するとき

p::first-line { color:skybule; }
p要素の中の一行目のみスカイブルーに変更

p::first-letter { color:skybule; }
p要素の中の一文字目のみスカイブルーに変更
※ブロックレベルにのみ適用

ある要素の前後に何かしらの要素を追加したい
::before ::after

p::before { content="&hearts";}
p::after { content="♣";}
結果→　♥ p ♣

セレクタの詳細度

どれが優先されるか

4つの数値によって分類される
（ここではそれをa,b,c,dと仮定）
a・・・style=""
b・・・id
c・・・属性/擬似クラス
d・・・要素名/擬似要素

a { clor: skyblue;}
a-0 / b-0 / c-0 / d-1

a.test { clor: red;} ←こっちが優先される
a-0 / b-0 / c-1 / d-1

同じ優先度であれば後から書いたほうが優先される

！important;をつけると最優先　a.test { clor: orange;！important;}

値

長さ

px　：絶対値　画面のピクセル単位で指定
em　：相対的　親要素に対して何文字分か？
%　：ベースとなっている親要素に対して何％か

rem

rem html要素のサイズを継承する
emは親要素のサイズが基準になる

メリット：emは記述が多くなると何が親要素かわかりにくくなり数値の判断が難しくなることがあったが、
remではhtmlのサイズを基準にしているのでわかりやすい

色

色の名前　　 red　など
RGB　： rgb(0, 0, 255)
16進数　： #000000

【rgba】

a = alpha(0-1で指定) 透明度　
background: rgba(255,255,100,0.5)

【hsl/hsla】

h = Hue 色相
s = Saturation　彩度
l = Lightness　明度
a = Alpha(0-1で指定) 透明度

background: hsla(255,20%,10%,.8)

透明度　opacity

画像などの要素全体不透明度を下げる

img {
    opacity: 0.3;
}

ボックスモデル

<div>test</div>

div{
 width: 50%;
 height: 50%;
}

↑の要素があった時、幅は上手くいくが高さがこのままだとうまくいかない。
親要素の幅を指定することで解決する。

body,html{
height: 100%
}

ボーダーのプロパティ

border-color: ボーダーの色
border-width:　ボーダーの太さ
border-style: スタイル　solid/ dotted/ dashed /double / inset / outset

省略の書き方　順不同
border: orange; 4px; solid;

marginの相殺

上下においてマージンが重なる部分は相殺され、大きい値のほうが優先される

テキストに関するプロパティ

color: orange;　：色
font-size: 14px;　：サイズ
font-family: Arial, Heluvetica;　：ファミリー

font-weight: bold/nomal;　：太さ
text-align: right/left/center　：位置
text-decoration: underline/line-through/none　：装飾

listのプロパティ

list-style-type: disc/circle/square/lower~alpha;　：マーカーのスタイル
list-style-image: url();　：リストのマーカーに画像を指定
list-style-position: inside/outside;　：マーカーの表示位置を指定

カーソルの形状を変えるプロパティ

cursor: help;
cursor: move;
cursor: pointer;
cursor: url(""), auto;

背景に関するプロパティ

background-color: orange;
background-image: url("");
background-repeat: no-repeat/repeat-x/repeat-y;
background-position: 10px 10px;
background-position: center/top/bottom/right/left;
background-size: 10%; 横幅（2つ記述すると横幅と高さ指定になる） px指定も可能
background-size: cover;　縦横比を保ったまま表示領域全体を覆うサイズにしてくれる（画像の比率によっては画像のすべてが表示されるわけではない）
background-size:contain; 縦横比を保ったまま画像全体が表示されるサイズにしてくれる
background-attachment: scroll/fixed;

省略形/ 順不同-省略可
background: url("") no-repeat 10px 10px fixed;

複数の背景画像を使用する

カンマ区切りで指定するだけ

header {
    background: url(bg01.png) no-repeat 0 0,
    url(bg02.png) no-repeat 30px 30px,
    url(bg03.png) no-repeat bottom right;

}

要素の表示形式を指定するdisplayプロパティ

display:block・・・ブロックボックス
inline・・・インライン
inline-block・・・インラインのように左詰めでブロック要素の性質をもたせる
none・・・表示しない

(注意)inlineにすると幅と高さの指定が無効になってしまう

要素の位置を調整するpositionプロパティ

position: static; （初期値）
position:relative;　：相対位置、他の要素には影響しない
position:fixed;　：固定位置（スクロールしても動かない）絶対配置となる,別レイヤー扱い
position:absolute;　：別レイヤー扱い,親要素の配置が基準となる（※親要素が static だった場合はウィンドウの左上が基準になる、ある親要素に対して位置を決めたい時はその親要素を relative に変えておく)

位置を決める

position:static以外の要素は　top/bottom/left/right が使える

position: relative;
    top: auto;
    bottom: 10px;
    left: 0;
    right: 100%;

重なりの順序を指定するz-index

• 初期設定ではhtml上で後に書いたものほど上になる
• position:static以外の要素対してのみ有効
• z-indexの値が大きいほど上になる。

overflowプロパティ

ブロック要素の中のコンテンツがブロック要素の幅と高さを超えて
存在するときにどう表示させるかを指定する。

overflow: visible;　：初期値。そのまま表示する。
overflow:hidden;　：はみ出た部分を非表示にする。
overflow:scroll;　：スクロール領域を作成
overflow:auto;　：必要に応じてスクロール可能にする

line-height　行間の指定

line-heightと文字の関係

p { font-size: 18px; line-height: 24px;}
文字サイズ18px - 行ボックスのサイズ24px = 6px(テキストの上下に3pxづつ均等に配置される)

line-heightは文字サイズに対して何倍かという指定も可能　こっちが推奨

p {
    font-size: 15px;
    line-height: 1.5; 
}

vertical-align インライン要素の位置指定

文章の途中に画像のようなインライン要素をつけつける際など
どの位置を基準にするかを指定する。

vartical-align:baseline;　：親要素のベースライン（文字基準線）
vartical-align:top;　：行ボックスのトップ
vartical-align:bottom;　：行ボックスのボトム（ディセンダの下）
vartical-align:middle;　：中央ではなく、小文字の英文字の中央線に要素の中央を揃える
vartical-align:px/em;　：ベースラインからの距離を指定できる

float

要素の回り込みfloat
floatを記述した際は幅を指定すること

img {
    float: left;
    width: 100px;
}

clearはブロックレベル要素のみ使用可能

h2 {
    clear: left;    
}

floatを使うとmarginが使えなくなる問題の解決方法

親要素の対して　clearfixを使用する

.clearfix::after {
　clear: both;
　display: block;
　content: '';
　}

角丸 border-radius

div {
    width: 200px;
    height: 200px;
    background: pink;
    border-radius: 30px;

    水平方向/垂直方向
    border-radius: 30px/10px;

    位置の指定
    　border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      border-bottom-left-radius: 10px;
      border-bottom-left-radius: 10px;

    数値数で指定・・・marginの指定の法則と同じ
    10　・・・4つ角すべて10px
    10 20　・・・左上,右下10　右上,左下20
    10　20　30・・・左上10　右上,左下20　右下30
    10 20 30 40 ・・・左上から時計回りに
                    　左上10 右上20 左下30 右下40

    単位
    px/em/％

    ★50%を使用すると円形を作ることもできる
    ★背景に画像を指定すると要素の形に依存し角丸や円に切り取ることができる。
}

グラデーション_線形　linear-gradient()

div {
    background-image: linear-gradient(skyblue, blue);
    デフォルトでは上から下へのグラデーションになる。

    1.グラデーションの方向を変える
    ①to を使う
    background-image: linear-gradient(to left top, skyblue, blue);
    左上からのグラデーション

    ②角度をつけてあげる
    　0が真上（右回りに角度指定）
    background-image: linear-gradient(0deg, skyblue, blue);

    2.2色以上
    background-image: linear-gradient(lightgreen,skyblue, blue);

    3.それぞれの割合をきめる
    background-image: linear-gradient(lightgreen 50%,skyblue 30%, blue);
    色の後ろに数値指定

    4.繰り返すrepeating-linear-gradient
    background-image: repeating-linear-gradient(skyblue　20px);
    指定した色のグラデーション20pのサイズにし、それを繰り返す

グラデーション_円形　linear-gradient()

div {
    background-image: radial-gradient(skyblue, blue);

    1.グラデーションの中心点を変える
    background-image: radial-gradient(at 30px 20px, skyblue, blue);

    2.グラデーションの幅と高さ指定 (楕円)
    background-image: radial-gradient(ellipse 20px 30px,lightgreen,skyblue, blue);

    3.大きさを指定し正円
    background-image: radial-gradient(circle 10px, lightgreen,skyblue);
    正しい円のときは数値はひとつ％は使えない

    4.キーワードでサイズ指定
    一番近い角/一番遠い角/一番近い辺/一番遠い辺
    からでサイズを決める事ができる
    background-image: radial-gradient(farthest-side at 10px 30px, lightgreen,skyblue);

    background-image: repeating-radial-gradient(skyblue,blue 20px);
    指定した色のグラデーション20pのサイズにし、それを繰り返す

シャドウ　box-shadow text-shadow

ボックスシャドウ

div {
    width: 200px;
    height: 100px;
    background: pink;
    box-shadow: 10px 20px 4px 10px rgba(0,0,0,.4);
    値の順番　x座標　ｙ座標　ぼかし具合 影を大きく/小さく(マイナス)　色/透明度

    影を内側につける
    box-shadow: 10px 20px rgba(0,0,0,.4) inset;

    影を複数つけるカンマ区切りで追加
    box-shadow: 10px 20px 4px 10px rgba(0,0,0,.4) inset,
    box-shadow: 10px 20px 4px 10px skyblue;
    inset;
}

テキストシャドウ

ボックスシャドウと異なるのは　影を大きく/小さくする値と
insetは使用できない。

　h1｛
    text-shadow: 2px 2px rgba(0,0,0,.4);
｝

transform 要素を変形

 .box {
     transform: 移動
                translate (20px 10px);・・・x軸の値,y軸の値
                translateX・・・x軸の値のみ指定
                translateY・・・y軸の値のみ指定

                以下の値にもXとYごとの指定もかのう          

                拡大縮小
                scale(0.5 1.5);・・・x軸の値,y軸の値

                傾斜
                scale(10deg 20deg);・・・x軸の値,y軸の値

                回転
                rotate(30deg);
                時計回りに角度指定

                要素の基点を変更する
                transform-origin: 0% 0%;
                transform-origin: top left;
                どちらも左上になる

ベンダープレフィックス

/*
-moz-
-o-
-webkit-
-ms-

caniuse.comで確認、黄色で注意書きがある

transition　要素のアニメーション

div {
    width: 100px;
    height: 50px;
    background: skyblue;

    なめらかな変化を付けたいtransitionを使う

    transition-property:all; 対象となるプロパティの選択プロパティの名前をそのまま使用する。複数指定はカンマで区切ってする。
    transition-duration:2s; 時間の数値を指定する。s(秒)　ms(ミリ秒)
    transition-timing-function：
                                ease 開始と終了が滑らかになる
                                linear 等速度でアニメ
                                ease-in 開始がゆっくり
                                ease-out 終了がゆっくり
                                ease-in-out 開始と終了がゆっくり
    transition-delay: 0.8; 開始を遅らせる s(秒)　ms(ミリ秒)

    省略の書き方　順不同(ただし時間指定に関してはduration→delayの順になる)
transition: all 2s ease 0.8;
}

div:hover {
    width: 200px;
    height: 50px;
    background: blue;
}

animation

div {
    width: 50px;
    height: 50px;
    background: skyblue;

    animation-name: slidein; アニメーションに名前(free)をつける
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-delay: .8;
    animation-iteration-count: infinite;繰り返しの指定
    animation-direction: alternate;　再生と逆再生指定

    アニメーションの途中の状態を指定する
    @keyframes slidein {

        0% {
            margin-left: 100%
            background: white;
        }
        50% {
            margin-left: 50%
            background: blue;
        }
        100% {
            margin-left: 0%;
        }

    }

}

参考

HTMLクイックリファレンス

書籍　よくわかるHTML5+CSS3の教科書
いまは第２版verがでてるみたいです
よくわかるHTML5+CSS3の教科書【第2版】