【フレックスボックス】
CSS display:flexの使い方を解説
基本的にid,class,tagをつかえば
大抵の場所は指定できる
より簡潔に書くには、
子孫セレクタ
複数セレクタ
を使う
子孫セレクタ
半角スペースで区切る
入れ子状態になってる子供を指定するために使う
間を飛ばすこともできる
セレクタ セレクタ｛
｝
ただし
body a{
}
ならbodyのなかのaはすべて
ul li a{
}
なら
ulのなかliのなかのaだけ
ちなみに
body ul a{//3点
color:#00f;//青
}
と
ul a{//2点
color:#f00;//赤
}
だと、ポイント制で青が勝つ
基本：後で書いたものが優先（上書き）
ただし：セレクタの合計点が高いほうがさらに優先
同じ点数なら下に書いたものが優先になる
複数セレクタ
カンマで区切る
セレクタ,セレクタ{
}
header{
width:80%;
}
main{
width:80%;
}
fotter{
width:80%;
}
上記のセレクタはまとめて書ける↓
header,main,fotter{
width:80%;
}
合計点は、合計でなく1つのだけになる
よって
header,main,fotter{
width:80%;
}
header{
width:60%;
}
なら下が適用
body header,main,fotter{/*カンマで区切ったところで独立*/
width:80%;
}
main{/*これだとこっちが優先*/
width:60%
}
この点数は
bodyのheaderと、ただのmainと、ただのfotter
vs
ただのmain
なので、『下に書いたもの優先』が適用される
sassサス
を独学すると、
body header, body main, body fotter{
}
とか指定しなくてもいいらしい
が
コンパイルしなくちゃいけないらしくて大変らしい
yatさんのにもwpbeg.css.mapというのがある
圧縮されたファイル
cssをコンパイルしたファイルらしい
いらないものを全部消した状態
編集がしずらい
スマップファイル
yatさんのにもwordpressのでも
「コメントアウトしてるのに読まれてる」という情報があった
それはcssとしては文法がおかしいのでコメントアウトするのが正しいのだが、
ワードプレスさんの方が、特殊なプログラムで「cssのコメントアウトされた部分のふにふにに一致する部分を読んできますよ」という処理をしている
タイトルとかなんとかとかこのsassだとか
隣接セレクタ
li+li{
color:#0f0;
}
<ul>
<li>aaa</li>
<li>bbb</li>
</ul>
これだとbbbだけが緑になる
「この隣にいるこれ」という指定
「liの直後にあるli」という書き方
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
これはbbbとcccが緑になる
<header>
<nav></nav>
<p></p>/*ここだけ指定したいとする*/
<p></p>
</header>
<main>
<p></p>
</main>
header nav+p{/*3点*/
}
疑似クラス
疑似要素
コロンを1つつけるか2つ付けるかの違い
疑似クラス
a:hover{
}
前に書いてある要素にマウスが載ったときにこれを実行
だからaに限らない
疑似クラス
関係ないけど#300を調べたときの
ここのサイトも便利
あとはチャイルド系
:nth-child();
