CSSのプロパティを初めて勉強した。

line-height　行間

main {
  font-size: 32px;
  /* line-height: 2em; */
  line-height: 2;
}

section {
  font-size: 16px;/*行間が６４pxなる。*/
}

line-heightは継承される。

vertical-align　テキストの位置

p {
  line-height: 5;
  background-color: pink
}

img {
  vertical-align: bottom;
}

ベースラインとは英字の土台となる線
yやpなどはベースラインを下にはみ出す

vertical-align: top;/*行ボックスの上*/
vertical-align: bottom;/*行ボックスの下*/
vertical-align: middle;/*小文字英字の中央*/
vertical-align: baseline;/*ベースラインに合わせる*/

RGBA

・Rは赤　Gは緑　Bは青　Aは透明度
・RGBは0〜２５５　Aは０〜１で指定できる。
・透明度が１の場合は省いて良く、rgbにする。
・16進数でも表現できる。
　それぞれの文字が同じ値だった場合省略し、一文字にし、４桁になる。

HSLA

Hは色相　Sは鮮やかさ　Lは明るさ　Aは透明度
Hは０〜３６０　SLは０〜１００％　Aは０〜１で指定できる。

透明度の調整

たくさんの要素の色の透明度を調整するのは面倒なので
opacityで全ての要素の透明度を指定できる。
画像の透明度も指定できる。

list-style 箇条書き

ul {
  list-style-type: circle;/*箇条書きのマークを円にする*/
  list-style-position: inside;/*リストの内側にする*/
  list-style-image: url(画像のURL); /*リストの先頭の記号を画像にする*/
}

ol {
  /* list-style-type: lower-alpha;*//*リストの先頭の記号を英小文字にする。*/
  list-style: inside; /**/
  list-style-type: none;/*リストの先頭の記号を無くす。*/
}

これは一括指定プロパティによって、 list-style-type がこちらの初期値の disc で上書きされる。

まとめてスタイリングできる一括指定プロパティ

list-style: circle inside url(画像のURL);

CSSではまとめて指定できるプロパティが存在する
上記の１〜５行のリストのスタイリングと同じスタイリングにする事ができる。

クラス識別子

.info {
  color: skyblue;
}

・.（ドット）任意の名前（英小文字）で書く。
・クラス識別子を入れることによってそこだけテキストのスタイリングをする事が出来る。

border 枠線の指定

.box1{
  background-color: orange;/*要素の背景色を指定*/
  width: 200px;/*要素の幅を指定　％でも指定可能*/
  height: 200px;/*要素の高さを指定　％でも指定可能*/
}
.box2{
  background-color: skyblue;
  width: 50%;
  height: 50%;
  /* overflow: hidden; */ /*要素からはみ出たテキストを隠す*/
  overflow: scroll;　/*要素の中でスクロールできる*/
}

.box1 {
  background-color: orange;
  width: 200px;
  height: 200px;
}

.box2 {
  background-color: skyblue;
  width: 50%;
  height: 50%;
  /* border-width: 2px;
  border-style: solid;/*直線の枠線*/
  border-color: blue;　/*枠線の色*/*/　
  /* border: 2px solid blue; */　/*枠線の太さ２px　直線にする*/
  /* border: 2px dashed blue; */　/*破線にする*/
  /* border-top: 2px solid blue;　/*border-top ボックスモデルの上に枠線　青にする*/
  border-bottom: 2px solid blue; *//*border-bottom ボックスモデルの下に枠線*/
  border: 2px solid blue;
  /* border-bottom: none; */　/*下の枠線を無くす*/
  border-radius: 10px; /*角を丸くする*/
}

padding 余白の指定

  padding-top: 20px;
  padding-left: 40px;

padding: 10px 20px 30px 40px; の場合　時計回りに上、右、下、左に余白を指定できる。
padding: 10px 20px 30px; の場合　上、（左右）、下を指定できる。
padding: 10px 20px;の場合　**（上下）、（左右）**を指定できる。
padding: 10px;の場合　上下左右に指定できる。

marginの相殺
垂直方向のmarginがぶつかり合うと小さい値の方が消される。
これをmarginの相殺という
おかしい事が起こったらこれ↑を疑う

display 要素ボックスを生成

.box3{
  background-color: tomato;
  width: 100px;
  height: 40px;
  /* display: inline; */ /*この要素をinline要素にする。　width,heightの指定を無効*/
  /* display: inline-block; */　/*この要素をinline-block要素にする。　　*/
  display: none;/*この要素を消す*/
} 

block の要素は下に追加されていく。 サイズの変更が無効
inline inline-block の要素は左に詰めて追加されていく。サイズが変更できる。

position 素の位置を決める

  /* position: static;   */　/*top,rightなどのプロパティの効果がない*/
  /* position: relative;  */　/*移動するtop,rightなどのプロパティで移動させる。*/
  position: fixed; /*移動する*/
  top: 30px;/*上に３０pxに移動*/
  left: 30px;/*左に３０pxに移動*/

z-index 重なり順を変える

z-index: 3; /*上*/
z-index: 2;　/*中*/
z-index: 1; /*下*/

box-sizing 　padding と border を含めて調整

.box2{
  box-sizing: border-box;　
  background-color: skyblue;
  width: 100px;
  height: 100px;
  border: 10px solid blue;
}

枠線を加えるとそこだけ大きくなるがbox-sizingを加えると
大きさが調整される。
数の大きい順に上になる

calc(計算式) ブラウザ幅を変えてもボックス幅を同じにする

プロパティ値を指定する際に計算を行うことができる

width: calc(100% - 20px);/*全体の内から要素の大きさを求める　要素の空白（この場合　２０px）*/

・四則演算　＋ ー ＊ / とする
・演算子の前後には必ず半角空白を入れる

shadow 影を作成

box-shadow: 10px 5px rgba(0, 0, 0, 0.3);
text-shadow: 10px 5px rgba(0, 0, 0, 0.3);

また三つ目の値(px)でぼかしを入れる事ができる。
４つ目の値はない。

背景を作成　background

  /* background-color: pink; /*背景の色をピンクにする*/
  background-image: url(画僧のurl);/*画像を背景にする*/
  background-size: cover;/* 画像の縦横比を崩すことなく、画像ができるだけ大きくなる*/
  background-position: center; */ /*画像を中央揃え*/
  background: center/cover pink url(画像のurl);/*以上４つの一括指定プロパティ*/

background は一括指定プロパティ

float　

img {
  float: right;/*ブロックの右側に浮動*/
}

h2 {
  clear: right;/*右のフロートと切り離され、下に移動する。
*/
  /* clear: left; 左のフロートと切り離され、下に移動する。
  clear: both; 左右両方のフロートと切り離され、下に移動する。*/
}

これから

・色の指定、透明度の指定をできるようになる。
・まとめてスタイリングできるプロパティを理解する。
・一括指定プロパティを理解する。
・要素の絶対要素を理解する
・floatがまだ理解できていない。