こんにちは、なっちる先生（@nacchi_jagariko）です。
先日、以下のようなツイートをしました。
【現実】
これだけしか正確に覚えていないcss。
color fontcolor fontsize float textalign position display backgroundcolor background width height border margin padding
HTMLのタグとの兼ね合いは作りながら学びます😌
これだけでHPは作れる。
あとはやんわりと記憶にあって、ググる感じ。— なっちる先生@バンコクで先生 (@nacchi_jagariko) 2019年3月16日
これだけしか正確に覚えていないcss。
color fontcolor fontsize float textalign position display backgroundcolor background width height border margin padding
HTMLのタグとの兼ね合いは作りながら学びます😌
これだけでHPは作れる。
あとはやんわりと記憶にあって、ググる感じ。
※fontcolorは存在しません。間違いです。
逆に言えば、これだけおさえれば、全然Webサイトは作れます！
ということで、今回は、cssの総復習として、上の13個のcssを簡単に復習していきます〜。
なお、この記事は、ある程度学習サイト（progateやドットインストール）でHTML・CSSを学んだ人向けになります。
どのくらい理解できてたかな！？！？
では、参りましょう〜。
css一覧
早速、cssの総復習をしましょう〜。
以下では、cssの「プロパティ：値」の「プロパティ」を先に紹介し、よく使う「値」をコードを示しながら、紹介していきます〜。
color
文字色を指定するプロパティです。
値は、「#〇〇〇〇〇〇」や「rgb(○,△,×)」で表します。
単純な色だと、カラー名（whiteやblack）で表すこともできます。
See the Pen ROLWPz by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.
font-size
文字の大きさを指定するプロパティです。
値としては、「px・%・em・rem」で表します。（↓参考にしてください）
See the Pen eoGpzy by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.
float
要素を浮かばせることができるプロパティです。
要素を横並びにするときによく使います。
値としては、「right・left」があります。
※flexboxの登場により、floatが活躍する出番は減っています。
See the Pen OGxypM by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.
text-align
文字などを揃える方向を指定できるプロパティです。
値としては、「left・center・right」があります。
See the Pen BEwoZz by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.
画像を真ん中にしたいというときにも、imgタグを囲んだタグにtext-alignのスタイルをあてれば簡単に解決できます。
地味によく使います。
See the Pen EJwVvd by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.
position
要素の位置を決めるプロパティです。
値としては、「absolute・relative・fixed」がありますが、fixedはあまり使いません。
positionと必ず一緒に使うのが「top・right・left・bottom」ですね。
See the Pen MREaQV by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.
display
要素の表示形式を指定するプロパティです。
よく値としては、「block・none・flex・inline・inline-block」です。
See the Pen KYXdrQ by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.
background
背景を一気にまとめて指定するプロパティです。
backgroundには主に、
background
-color（色）
-image（画像）
-repeat（リピート）
-position（位置）
-size（大きさ）
を使います。
See the Pen ZZXQzm by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.
width/height
要素の長さと高さをそれぞれ指定するプロパティです。
border
枠線を指定するプロパティです。
値としては、「長さ スタイル 色」と記述します。
スタイルとしては、「solid・dashed」を使います。
See the Pen ZZXQRg by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.
margin
要素の周りの空白を指定するプロパティです。
See the Pen rbGxQa by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.
padding
要素の中の空白を指定するプロパティです。
See the Pen KYXVGY by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.
marginとpaddingの違いはきちんと理解できていたかな？
まとめ
以上、これだけおさえれば大丈夫なcssを、ざっと簡単に復習しました〜。
いかがだったでしょうか？
いい復習になったことを祈っています。
完璧主義にならず、感覚的に理解してみてください！
そのあとは、ただモノを作るのみです。
遊んでいきましょう〜！
以上で、なっちる先生の授業を終わります。
素敵なプログラミングライフを！
参考
