【結論】
・個人的に良く使うCSSのプロパティを一覧化
【目次】
【本題】
よく忘れるので一覧にした
ビューを作成している時、
使ったことがあるプロパティでも、
忘れて直ぐに出てこない事が頻繁にあったので、
良く使っているものを一覧にすることにしました。
なお、下記のサイトを引用しています。
www.htmq.com
デザイン系（サイズや色など）
・ブロック
height・・・ブロックの高さ指定
width・・・ブロックの幅指定
border・・・ボーダーのスタイル・太さ・色を指定できる
例ーborder: 1px solid #dee7ec;
※solid 1本線で表示されます。
※-bottomなどで、一部のボーダーだけ指定可能
http://www.htmq.com/style/border.shtml
border-radius・・・ボックスの角を丸くできる
例ーborder-radius: 50px;
http://www.htmq.com/css3/border-radius.shtml
background-color・・・背景色を指定する
background-image・・・背景画像を指定する
例ーbackground-image: url(https://);
http://www.htmq.com/style/background-image.shtml
background-size …… 背景画像のサイズを指定する
例ーbackground-size:cover;
※cover・・・縦横比維持、最小サイズで背景を覆う
http://www.htmq.com/css3/background-size.shtml
・インライン
font-size・・・フォントのサイズ指定
color・・・フォントの色指定
font-family・・・フォントの種類指定
例ーfont-family: "ＭＳ ゴシック",sans-serif;
http://www.htmq.com/style/font-family.shtml
font-weight・・・フォントの太さを指定
例ーfont-weight: normal;
http://www.htmq.com/style/font-weight.shtml
list-style …… リスト先頭のマーカーに関する指定をまとめて行う
例ーlist-style: none;
※none・・・マーカーを非表示
http://www.htmq.com/style/list-style.shtml
letter-spacing・・・文字の間隔を指定する
例ーletter-spacing: 5px;
http://www.htmq.com/style/letter-spacing.shtml
text-decoration・・・テキストに傍線を付けたり、消せたり
例ーtext-decoration: none;
※aダグの下線部を消すのに利用するケースが多い
http://www.htmq.com/css/text-decoration.shtml
line-height …… 行の高さを指定する
line-height: 20px;
※行を中央に移動させる場合などに使用
http://www.htmq.com/style/line-height.shtml
・共通
opacity・・・・要素の透明度を指定する
例ーopacity: 0.8;
http://www.htmq.com/css3/opacity.shtml
配置系（位置の指定）
・ブロック
text-align …… ブロックコンテナ内の行の揃え位置・均等割付を指定する
例ーtext-align: center;
※ブロックに設定する事で、その中のインラインの配置を指定
http://www.htmq.com/style/text-align.shtml
・インライン
vertical-align・・・縦方向の揃え位置を指定する
例ーvertical-align: middle;
http://www.htmq.com/style/vertical-align.shtml
・共通
margin・・・マージン（ボックスの枠外）を指定する
padding・・・余白（ボックスの枠内）を指定する
※指定した値の数による影響範囲の違い
4:上右下左、3:上・左右・下、2:上下・左右、1:全部
※インラインでは、縦方向の指定不可
※マージンとマージンは相殺される（合計が間隔にならない）
※max-width: ◯◯px;と上限を指定できる
http://www.htmq.com/style/margin.shtml
http://www.htmq.com/style/padding.shtml
float・・・左かみぎに寄せて配置。後に続く要素は、反対側に回り込む
http://www.htmq.com/style/float.shtml
clear …… 回り込みを解除する
※子要素が全てfloatの時、親要素の高さは無くなるのを防ぐ
http://www.htmq.com/style/clear.shtml
position …… ボックスの配置方法（基準位置）を指定する
※top,leftなどで基準位置から移動可能
http://www.htmq.com/style/position.shtml
display・・・要素の形式を、インラインブロックなどに変更できる
※ブロックを横に並べたり、インラインに高さ指定したい場合など
※noneで非表示にもできる
https://saruwakakun.com/html-css/basic/display
z-index・・・重なりの順序を指定する
http://www.htmq.com/style/z-index.shtml
box-sizing・・・
border-boxに指定すると、要素の幅(width)の合計にpaddingとborderが含まれるようになります。そのため、paddingやborderを追加した時に生じるレイアウト崩れを未然に防ぐことができます（※ただし、marginはborder-boxでの合計値に含まれません）。
その他
overflow・・・はみ出た要素の表示方法を指定する
例ーoverflow: scroll;
※はみ出し部分をスクロールで表示できる
http://www.htmq.com/css/overflow.shtml
:hover擬似クラス …… カーソルが乗っている要素にスタイルを適用する
例ー要素名:hover {プロパティ名:値;}
http://www.htmq.com/selector/hover.shtml
:active擬似クラス …… クリック中の要素にスタイルを適用する
例ー要素名:active {プロパティ名:値;}
http://www.htmq.com/selector/active.shtml
transition …… transition効果（時間的変化）をまとめて指定する
例ーtransition: all 0.5s;
http://www.htmq.com/css3/transition.shtml
calc・・・CSS内で計算式を利用できる
例ーwidth : calc(100% - 20px) ;
https://w3g.jp/blog/css3_calc_function
《今日の学習進捗》
スクールでHTML・CSSのテストを受講
理解度が浅い部分があるが、
progate一周終わったことで、
着実に定着してきた印象がある
学習開始からの期間 ：36日
今日までの合計時間：346h
今日までに到達すべき目標時間：329h
目標との解離：+17h
「10,000時間」まで、
残り・・・「９６５４時間！」