【フレックスボックス】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();
パンくずリストの間に>を入れたいとする
home > main > thispage
