スタイルシートのよく使うプロパティをまとめました。
プロパティの用途やスペルをすべて暗記する必要はなく、こういったまとめを参照してコピペで使用するのが効率的です。
| プロパティ名 | 値 | 使用例 |
| color | 色名 red カラーコード #ff0000 | color: red; color: #ff0000; |
| font-size font-family font-weight | 文字サイズ 文字フォント 文字幅 | font-size: 18px; (1em;) font-family: serif; font-weight: bold; |
| background-img background-color | 背景画像 背景色 | background-img: 画像のファイルパス; background-color: red; |
| width height | 幅 高さ | width: 200px; height: 50%; |
| border | 枠線の太さ、種類、色 | border: 1px solid red; |
| border-radius | 角丸 | border-radius: 10px; (50%; 円になります) |
| margin margin-top margin-bottom margin-left margin-right | 要素の外側の余白 上 下 左 右 | margin: auto; margin: 10px; 上下左右 margin: 10px 20px; 上下 左右 margin: 10px 20px 30px; 上 左右 下 margin: 10px 20px 30px 40px; 上 右 下 左 |
| padding padding -top padding -bottom padding -left padding -right | 要素の内側の余白 上 下 左 右 | padding : auto; padding : 10px; 上下左右 padding : 10px 20px; 上下 左右 padding : 10px 20px 30px; 上 左右 下 padding : 10px 20px 30px 40px; 上 右 下 左 |
| line-height | 行間 | line-height: 16px; (200%; auto;) |
| text-align | 文字の行揃え | text-align: left; text-align: center; text-align: right;  |
| box-shadow | 影 | box-shadow: 2px 2px 4px #b7b7b7; 横 縦 ぼかし 広がり 色 |
| opacity | 透明度 | opacity: 0.5; (0=透明～1=不透明) |
| transition | アニメーション | transition: background-color 0.5s; 指定したプロパティの値を指定秒数かけて実行する |
| float | 回り込み | float: left; (right; none;) |
| clear | 回り込み解除 | clear: both; |
| display | 表示の性質 | display: flex; 横一列 display: inline; インライン要素 display: block; ブロック要素 display: none; 非表示 |
CSSを「HTML内に記述する」
ヘッダーに記述します。書き方はcssファイルと同様です。
<head>
<style type=”text/css”>
p {
color: #333333;
}
</style>
</head>
CSSを「タグに直接、記述する」
要素のstyle属性に記述します。
<p style=”color: #333333;”>このテキストの文字色を指定します。</p>