はじめてのCSS入門講座②

TecAcademyさんの「はじめてのCSS入門講座」(全32回)より
学んだことのざざっとメモその2

-----------------------------------------------------------------------------------

[3]
サイズ
・絶対的なサイズ　in(インチ)(1inchi=2.54cm)、mm、cm、pt(ポイント)(1in=72pt=6pc)、pc(パイカ)(12pt)
・相対的なサイズ　ex(x=1)、em(一文字=1)、px(ピクセル)(画面ドット1個分)、%

単語の指定
・プロパティに対して決まっているもの
　ex.)　align center / left / rightなど多数
　margin auto (余白を自動的に調整→左右に指定するとブロック要中央寄せ)
・inherit 親要素の設定を継承する

<p>
	<a>inheritを使うとここにもpタグの設定が継承される</a>
</p>

・url("URLを入力")
・ダブルコーテーション""を文字として扱うときは\でエスケープ
     ex.)"こんにちは"→\"こんにちは\"　、　"\500-"→"\\500-"

色
・名前　16種類
・RGBを利用
　10進数 rgb(赤, 緑 ,青)　→　ex.) rgb(127, 255 127)
　　0～255までの数字を赤、緑、青の順に指定する(暗0←→255明)　
　16進数 #赤緑青　→　ex.) #88ff88
　　00～ffまでの英数字を赤、緑、青の順に指定する(暗0←→ff明)　
・HSLを利用
　色相・再度・明るさを指定
　hsl(色相, 彩度, 明るさ)　→　ex.) hsl(120, 100%, 100%)
・RGBとhslはalphaチャンネル
　rgba(赤, 緑 ,青, 透明度0～1.0)　、 hsla( )　※透明度は1.0が100%

[4]
フォント
・font-family　フォント指定
　・serif 明朝
　・sans-serif ゴシック
　・monospace すべての文字幅が同じ(コード表示などに利用) など多数
　　 ex.) font-family: "Times New Roman", Times, serif;
　　　　表示したい順に指定することができる(連語は" "でくくる)
・font-weight　 文字太さ(ブラウザにより対応できない場合もある)
　　normal 通常(=400)
　　bold　太い(=700)
　　bolder やや太い
　　lighter やや細い
　　inherit 親要素の設定を継承　など
　　または、100~900で100単位(通常)で指定
・font-style　書体
　　normal 通常
　　italic 斜体
　　oblique 斜体
　　inherit 親要素の設定を継承　など
・ font-variant　文字の表示
　　normal 通常
　　small-caps 大文字で表記
　　inherit 親要素の設定を継承　など
・font指定をまとめて入力が可能。入力順に注意！

font: font-style font-variant font-weight font-size / line-height font-family ;
 

・line-height　行間(前の行から次の行までの間隔)
・text-align　文字の配置(画像やブロックには対応しない)
　　left 左寄せ
　　right 右寄せ
　　center 中央寄せ
　　justify 両端揃え(アルファベットの文書)
・list-style-type 　リストの表示方法
　 ul
　　disc ●円形(中黒・中点)
　　circle ○中空円
　　square ■塗りつぶし四角
 ol
　　decimal (1,2,3...)数値
　　decimal-leading-zero (01,02,03...)数値(ゼロ埋め)
　　lower-roman (ⅰ,ⅱ,ⅲ...)ローマ数字小文字
　　lower-alpha (a.b.c...)アルファベット小文字　　・・・など
・ list-style-position　リストの文字位置
　　inside リストがブロックの内側(リストの先頭が揃う)
　　outside リストがブロックの外側(本文の先頭が揃う)
　　inherit 親要素の設定を継承

[5]
・padding　ボックスの内側余白
　　padding-top(上),right(右),bottom(下),left(左)　※0で余白なし
　  　ex.) padding: 10px(上下(左右)) 20px(左右(-));　
・margin　ボックスの外側余白
　　margin-top(上),right(右),bottom(下),left(左)　※負数値指定もできる

・display 　HTML要素の表示(画面)
　　block ブロック要素として表示
　　inline インライン要素として表示
　　inline-block インラインで扱えるブロック要素
　　none 表示しない(場所自体なくなる)
・visibility　見せ方(存在)
　　visible ボックスを表示させる
　　hidden ボックスを非表示にする(場所は存在する)

ボックスサイズ
・min-width / max-width　min-height / max-height
　　min/max-… 最小/最大でもこのサイズより小さくならない
　　※高さや幅はその外側のサイズによって決まる
・box-sizing　(CSS3・ベンダープレフィックスが必要)
　　content-box　padding/boderを含めないサイズ
　　border-box　padding/borderを含めるサイズ

ex.) 適応されない場合に対応できるように書いておく 
box-sizing: content-box:
-webkit-box-sizing: content-box;

・overflow ボックスから文字がはみでた場合
　　visible　はみだす
　　scroll スクロールバーで表示
　　hidden 非表示