よく使うCSSプロパティ

よく使うCSSプロパティ一覧をまとめました。

<h1>CSSで使う単位の種類</h1>

| 絶対値       |    相対値 |    
|:-----------------|------------------:|
|cm          |            em |        
|mm        |        ex|       
| in             |              ch |     
| px               |             rem|      
| pt             |     vw|
| pc          |        vh| 
|            |     vmin|
|     |        vmax| 
|              |     %|




<h1>文字や文章の装飾</h1>
|プロパティ|用途|値|
|---|---|---|
|font-size|文字サイズ| 数値‥‥px,rem,%,などの単位を付ける|
|font-family|フォントの種類|sans-serif(ゴシック系),serif(明朝系),cursive(筆記体)などから指定する。|
|font-weight|文字の太さ|normal(標準)、bold(太字)、lighter(一段階細くする)、boloer(一段階太くする)・数値1-1000の数値|
|line-height|行の高さ|normal(ブラウザが判断した行の高さ)<br>数値(単位なし)フォントサイズの比率で指定<br>数値(単位あり)px、em、％などの単位で数値指定|
|text-align|テキストを揃える位置|left(左) right(右) center(真ん中) justify(両端)|
|text-decoration|テキスト下線や打消し線などの飾り|none(なし) underline(下線) overline(上線) line-through(打消し線) blink(点滅)|
|letter-spacing|文字の間隔|normal(標準の文字間隔)<br>数値にpx、rem、%などの単位を使用する|
|color| 文字に色を付ける|カラーコード‥‥＃で始まる3行～6行<br>色の名前‥‥red、blue<br>RGB値‥‥赤、青、緑の値をカンマで区切る。透明度は0か1で指定|
|font|フォントに関するプロパティ|font-style、font-variant、font-weight、 font-size、line-height、font-family|


<h2>背景の装飾</h2>
| プロパティ       |      用途 |    値   |
|:-----------------|------------------|------------------|
| background-color |背景色|カラーコード‥‥＃で始まる3行-6行<br>色の名前‥‥red、blue<br>RGB値‥‥赤、青、緑の値をカンマで区切る。透明度は0か1で指定|
| backgroung-image |背景画像|url‥‥画像ファイルを指定<br>none‥‥背景画像を使用しない|
| background-repeat|背景画像の繰り返し表示の仕方|repeat‥‥縦横ともに繰り返して表示<br>repeat-x‥‥横方向に繰り返して表示<br>repeat-y‥‥縦方向に繰り返して表示<br>no-repeat‥‥繰り返さない|
| background-size|背景画像の大きさ|数値‥‥px,rem,%,などの単位を付ける。<br>cover、contain|
| background-position| 背景画像を表示する位置|数値‥‥px,rem,%,などの単位を付ける。<br>left、right、center、top、bottom|
| background|背景関連のプロパティをまとめて指定|background-color、background-image、background-repeat、background-attachment、background-positonの値を指定する|

<h3>幅と高さ</h3>
|プロパティ|用途|値|
|---|---|---|
|width|幅を指定|数値‥‥px,rem,%などの単位を付ける<br>auto‥‥関連するプロパティの値によって自動設定|
|height|高さを指定| 数値‥‥px,rem,%などの単位を付ける<br>auto‥‥関連するプロパティの値によって自動設定|

<h4>余白について</h4>
|プロパティ|用途|値|
|---|---|---|
|margin|要素の外側の余白|top、right、bottom、leftで方向指定<br>数値‥‥px,rem,%などの単位を付ける<br>auto‥‥関連する値によって自動設定|
|padding| 要素ン内側の余白|top、right、bottom、leftで方向指定<br>数値‥‥px,rem,%などの単位を付ける<br>auto‥‥関連する値によって自動設定|


<h5>線について</h5>
|プロパティ|用途|値|
|---|---|---|
|border-color|線の色|カラーコード‥‥＃で始まる3行-6行で指定する<br>色の名前‥‥red、blueなど決められた色で指定する  |
|border-style|線の種類|none‥‥線を非表示、solid‥‥1本の実線、double‥‥2本の実戦<br>dashed‥‥破線、dotted‥‥点線、groove‥‥立体谷型の線<br>ridge‥‥立体山型の線、inset‥‥囲まれた部分が凹んで見える線、outset‥‥囲ま鰓部分が浮き上がって見える|
|border-width|線の太さ|数値‥‥pxrem%などの単位をつける。<br>thin(細い)、medium(普通)、thick(太い)|
|border|線の色‥スタイル‥線の太さをまとめて指定|top、right、bottom、left|


<h6>リストについて</h6>



|プロパティ|用途|値|
|---|---|---|
|list-style-type|リストマーカーの種類|none‥リストマーカー非表示、disc‥黒丸、circle‥白丸、square‥黒四角、decimal‥数字、など|
|list-style-position|リストマーカーの表示位置|outside‥ボックスの外側<br>inside‥ボックスの内側|
|list-style-image|リストマーカーに使う画像|url‥画像ファイルURL<br>none‥指定しない|
|list-style|リストマーカーの位置、種類、画像、まとめて指定|type、position、imageの値|





<p>flexboxについて</p>
| プロパティ      |       用途 |    値   |
|-----------------|------------------|------------------|
| display |flexboxを使って子要素を並べる | flex |
|flex-direction|子要素の並ぶ向きを指定|・row(初期値)‥子要素を左から右に配置<br>・row-reverse‥子要素を右から左に配置<br>・column‥子要素を上から下に配置<br>・column-reverse‥子要素を下から上に配置|
|flex-wrap|子要素の折り返し方法を指定|・nowrap(初期値)‥子要素を折り返しせず一行に並べる<br>・wrap‥子要素を折り返し、複数行に上から下に並べる<br>・wrap-reverse‥子要素を折り返し、複数行に下から上に並べる|
|justify-content|水平方向の揃えを指定|・flex-strart(初期値)‥行の開始位置から配置。左揃え<br>・flex-end‥行末から配置。右揃え<br>・center‥中央揃え<br>・space-between‥最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置<br>・space-around‥両端の子要素を含め、均等に間隔をあけて配置|
|align-item|垂直方向の揃えを指定|・stretch(初期値)‥親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置<br>・flex-start‥親要素の開始位置から配置。上揃え<br>・flex-end‥親要素の終点から配置。下揃え<br>・center‥中央揃え<br>baseline‥ベースラインで揃える |
|align-content|複数行にした時の揃えを指定|・stretch(初期値)‥親要素の高さに合わせて広げて配置<br>・flex-start‥親要素の開始位置から配置。上揃え<br>・flex-end‥親要素の終点から配置。下揃え<br>・center‥中央揃え<br>・space-between‥最初と最後の子要素を上下の端に配置し、残りの要素は均等に間隔をあけて配置<br>・space-around‥上下端にある子要素も含め、均等に間隔を開けて配置|






<p>gridについて</p>
| プロパティ|要素|値|
|---|---|---|
|display|CSSグリッドを使って子要素を並べる|grid|
|grid-template-columns|子要素の幅を指定|数値‥px、rem、%、fr、などの単位をつける|
|grid-template-rows|子要素の高さを指定|数値‥px、rem、%、fr、などの単位をつける|
|grid-gap|子要素同士の余白を指定|数値‥px、rem、%、などの単位をつける|