Quince
Blossoms
Blossoms
CSS
1 規則セット
- セレクターリスト
- セクターを , でつなぐ、例 body , artile , h2
- 宣言ブロック
-
{ - 宣言
-
プロパティ : 値;
}
- 以上を ルール（規則）セットという
- CSSとは?
- カスケーディングスタイルシート（CSSの意味）
から cssリファレンスで調べる
- プロパティ(property性格特性 情報)
- 数多くあるので 標準参照となる MDN の一覧を参考にするとよい。
CSSリファレンスで調べる値も同じリファレンスで色の例や構文など
参考に決めるとよい 又、VSコードのカラーピッカーで種類・色値・透明度が簡単に選択できるから便利。
marginはよく使われているショートハンド記述google検索 - プロパティ値関数 calc() を使うと計算 例えば引き算・割り算をwidth の値に使うと便利 ｛width:calc(100% / 3);｝など・・
- CSSフォントの説明をまとめ
- font-sizeフォントサイズもrem値など面白い
- display
- displayのキーワード値Gridを使ってページを作ってみた
- 5分類
- 要素・クラス・IDによるセレクター
- ータイプセレクター（div,p header,-など）
ーclass こちら優先
ーid
ーユニバーサルセレクター ＊ 部分で使うときだけの時articl ＊ でOK - 属性によるセレクター・＜a href=" https://www.yahoo.com の例で説明
- ー存在や値のセレクター a[href]{ } はaタグのhref要素だけ指定している
ー部分文字列一致セレクター a[href="https://www.yahoo.com"]{ } はaタグのhref要素のhttps://www.yahoo.comだけ指定している
ー部分文字列一致セレクター(前方一致) a[href^="https://www"]{ } はaタグのhref要素の前方だけ指定している
ー部分文字列一致セレクター(部分) a[href*="yahoo"]{ } はaタグのhref要素のyahooだけ指定している
ー部分文字列一致セレクター(最後) a[href$=".co.jp"]{ } はaタグのhref要素の.co.jpだけ指定している - 疑似クラス及び疑要素によるセレクター ・＜article＞＜p＞タグの例で説明
- ー:first-child, :first-of-type -- article p:first-of-type{ } はarticleタグのp要素で始まるものだけ指定している
last-of-typeもあります -- article p:nth-of-type(2){ }は2列目だけ指定
ー:not -- article p:not（:first-of-type）{ } は:first-of-tye以外のものだけ指定している
ー:hover -- p:hover{ } はカーソルで触れたときだけ指定している p:not(:hover){ }にすると逆で触れると消える
ー::after ::befor -- h1::after{ content: "!!!" }は後ろに ！！！が付く 前もできる
ー::first-line -- p::first-line{}は一列目だけ色を変えるなど p::first-letter{}は最初の文字だけ - 結合子
- ーdescendant combinator(子孫結合子) main article h1{}は mainの中のarticleの h1だけ指定
ーchild cobinator(子結合子) main > h1{}はh1だけ指定
ー 隣接兄弟結合子 article p + p{ } は＜p＞＜/p＞が数列あるとき隣接の2番目だけマージンや色を付けるなどとき
ー 一般兄弟結合子 article h1 ~ p{ } はh1の後ろだけマージンや色を付けるなどとき
ー
MDN参考に必要に応じてMDNを見て下さい - カスケード cascading（ 滝のように連鎖的流れるの意 ）
- CSSルール順序 同じh1だと後に書いた色が出る
カスケード順１と３が重要 - 詳細度
- 複数のルールが適用された場合の優先度 ＃優先 . が次 h1 などが次の順
- 詳細度の項を見て下さい インラインスタイルは1000なので一番優先
- 詳細度のスコアリング スコアリング見方
!important h1 { color: orange !important;} が最優先される が多くは使わない - 承継
- 親要素から子要素へプロパティ値を引き継ぐ
承継の抑制
inherit,initial,unset
親の値引継 デフォルト値 inheritがあればinheritなければinitial
color: red; color: inherit; color: initial; color: unset;
全てのプロパティ値のリセット - マージン相殺の原理 同じは同じ デカい方が採用する
MDN参考に
display: inline; でそのディブ（div）ブロックをインライン変える、逆にインラインをブロックボックス {display: block;}となります。
｛display: inline-block;}とはインラインぽくブロックでマージン・パッティングなどが効く便利
2 プロパティ
＜!DOCTYPE html> ＜!--フォントの rem値 使い方-->
＜html lang="ja">
＜head>
body {
font-size:62.5%; /* font-size 1em = 10px on default browser settings */
}
span {
font-size: 1.6rem;
}
＜/style>
＜/head>
＜body>
＜div>私は62.％です
＜span>Outer ＜span>inner ＜/span> outer ＜/span>
＜/div> ＜!--文字列は同じ10pxで表示される-->
＜/body>
＜/html>
3 セレクター
4 カスケード・詳細度・継承 について
＜div>ブロック1＜/div> div{
＜div class="fix">ブロック2＜/div> background-color:orangi;
border: 3px solid black;
}
.fix{
background-color: initial;
border: initial; } /*ブロック２の枠の色と枠が消える！ fix{ all: unset;} で同じに*/
5
6
- MDN参考に
- フレックボックスの基本概念
- MDM
- justify-content
7
- flexプロパティ
- 一度に1次元のレイアウト（行または列）を処理する、
flex-directionプロパティを使うと主軸を定義する、値を 縦 column; 横 row; にするとわかりやすい - 準備
- 他の flex プロパティ
- flex-grow
- は全画面の対象余白に対しての割合 flexと違う
- flex-shrink
Oh flex-shrink
- 逆に反対にオーバー分をいかに縮めるか
- flex-basis
- 基礎部分を決める
containerに対して割合が決めれる
- CSS - - HTML -
.container{ ＜body style="margin: 0;"＞
width: 1000px; ＜div class="container"＞
background-color: coral; ＜div class="item item1"＞Item①＜/div＞
display: flex; ＜div class="item item2"＞Item②＜/div＞
} ＜/div＞
.item1{ ＜div class="measure"＞
background-color: pink; ＜div＞100＜/div＞
flex:1; ＜div＞200＜/div＞
} ＜div＞300＜/div＞
.item2{ ＜div＞400＜/div＞
background-color: skyblue; ＜div＞500＜/div＞
flex: 2; /* item横長比が１対２ */ ＜div＞600＜/div＞
} ＜div＞700＜/div＞
＜div＞800＜/div＞
＜div＞900＜/div＞
＜div＞1000＜/div＞
＜/div＞
8
下のHTMLに対してbackground-colorとoutline: 1px sold black;がレイアウト調べに役立つborderと違い幅がカウントされない
レイアウト調べに都合いい
＜ul＞をclassで！
＜ul class=""＞
＜li＞
＜img src="写真UR" alt=""＞
＜h1>タイトル＜/h1＞
＜p＞内容文章＜/p＞
＊リストタグを続けるULタグのテクニック