css

セレクター

idセレクター

• 設定したidに対し設定可能
  • ＜span id=""＞
• idは一意である必要がある
• #class名で指定可能

#signup{
    color: #f1faee;
    background-color: #1d3557;
}

classセレクター

• htmlで設定したclassに対し設定が可能
  • ＜span class=""＞
• .class名で指定可能

.tag{
    background-color: #e63946;
    color: #f1faee;
    font-size: 16px
}

子孫セレクター

• 下の階層に対して指定が可能
• 要素の間に半角スペースを入れる

.tag a{
    color: #f1faee;
}
select span a{
    color: #f1faee;
}

• 隣接セレクター
  • ネストされていない同階層のタグを指定できる

h1 + p{
    color: #f1faee;
}

h1の次にあるp要素に対してスタイルを充てる

直下セレクター

• ネストされた階層について指定できる

div > li{
    color: #f1faee;
}

divの子要素であるliに対してスタイルを充てる

属性セレクター

• 属性に基づいて選択可能

input[type="text"]{
    color: #f1faee;
}

input要素で、text属性のもの

a[class~="logo"] {
  padding: 2px;
}

＜a＞ 要素で class 属性に "logo" という語が含まれているもの

擬似クラス

• セレクターに追加するキーワードで、選択された要素の特定の状態にスタイルづけできるようにするもの

.post a:hover{
    text-decoration: underline;
}

postクラスのa要素をホバーした時にアンダーラインをつける

擬似要素

• セレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするもの

::place-holder {
  color: #f1faee;
}

カスケード

同じ指定の仕方をしている場合は後に定義された方が勝つ

詳細度

• インライン>id>クラス、属性、擬似>要素、擬似要素
• !importantは最優先になるが、非推奨

継承

• 明示的に継承させる

button, input{
    color: inherit;
}

prperties

position

• オブジェクトの配置を制御

.class{
    // デフォ
    position: static;
    
    // classの要素は残したままオブジェクトのみ配置
    position: relative;
    top 2px;
    left 1px;
    
    // classの要素は残さずオブジェクトをbodyに対して相対的に配置
    position: absolute;
    top 2px;
    left 1px;
    
    // classの要素は残さずオブジェクトを表示している画面に対して相対的に配置
    position: fixed;
    top 2px;
    left 1px;

    // 画面が移動したら、見えている画面に対して相対的に配置
    position: sticky;
    top 2px;
    left 1px;
}

transition

• オブジェクトの動きを制御

.class{
    width: 100px;
    height: 100px;
    background-color: cyan;
    transition: background-color: 1s ease-in, border-radius 1s; 
}
.class:hover{
    background-color: magenta;
    border-radius: 50%;
}

transform

• 与えられた要素を回転、拡大縮小、傾斜、移動する

.class{
    width: 100px;
    height: 100px;
    background-color: cyan;
    transform: rotate(0.5turn);
}

box-model

width, height, margin

#id{
    width: 10px;
    height: 10px;
    margin: 10px
}

border

• それぞれちゃんと指定する方法

#id{
    background-color: #fec5bb;
    border-width: 5px;
    border-color: black;
    border-style: solid;
    box-sizing: border-box;
}

• borderで指定して、細かい調整を加える方法

#id{
    background-color: #ffd7ba;
    border: 4px solid black;
    box-sizing: border-box;
}

• 角を丸める

border-radius: 50%;

• padding

// 全方向
padding: 10px;
// 上下、左右
padding: 10px 5px;
// 上、左右、下
padding: 10px 5px 3px;
// 上、右、下、左
padding: 10px 5px 3px 1px;
// 右
padding-right: 10px;
// 左
padding-left: 10px;
// 上
padding-top: 10px;
// 下
padding-bottom: 10px;

• margin

// 全方向
margin: 10px;
// 上下、左右
margin: 10px 5px;
// 上、左右、下
margin: 10px 5px 3px;
// 上、右、下、左
margin: 10px 5px 3px 1px;
// 右
margin-right: 10px;
// 左
margin-left: 10px;
// 上
margin-top: 10px;
// 下
margin-bottom: 10px;

• display
  • 色々できる。例えば、、
    • inline
      • インラインレベル要素のように振る舞える（spanみたいに）
    • block
      • ブロックレベル要素のように振る舞える（divみたいに）
    • inline-block
      • インラインレベル要素のように、widthなど指定可能
    • none
      • 非表示にできる

.class{
    display: inline;
}

#id{
    display: block;
}

section.div{
    display: inline-block;
}