文字を装飾するCSS

【font-size】
用途：フォントの大きさを変更する
使用例：font-size: 2.5px;　font-size: 2.5em;
px：端末の設定が変わっても大きさが一定
em：端末の設定によって大きさが変わってくる

【font-family】
用途：フォントの種類を変更する
使用例：font-family: serif;

【font-weight】
用途：フォントの太さを変更する
使用例：font-weight: 100;(数字が大きいほど太くなる)

【color】
用途：フォントの色を変更する
使用例：color: #1b1b1b;(色はカラーコードで指定)

【text-align】
用途：文字の左寄せ・右寄せ・中央寄せを変更する
使用例：text-align: center; text-align: right; text-align: left;

画像や要素の縦幅、横幅調整

【width】
用途：横幅を変更する
使用例：width: 100%; width: 150px;

【height】
用途：縦幅を変更する
使用例：height: 100%; height: 150px;

画像や文章の位置調整

【margin-top】
用途：上との間隔を変更する
使用例：margin-top: 10px; margin-top: 15%;

【margin-left】
用途：右との間隔を調節する
使用例：margin-left: 10px; margin-left: 15%;

【margin-right】
用途：左との間隔を調節する
使用例：margin-right: 10px; margin-right: 15%;

【margin-bottom】
用途：下との間隔を調節する
使用例：margin-bottom: 10px; margin-bottom: 15%;

【margin】
用途：上下左右との間隔を一括で調節する
使用例：margin: 1px; margin: 10% 0% 10% 0%;

値が1つ指定された場合、上下左右に同じ値が適用される。
値が2つ指定された場合、1つ目の値は上下、2つ目の値は左右の辺に適用される。
値が3つ指定された場合、1つ目の値は上、2つ目の値は左右、3つ目の値は下に適用される。
値が4つ指定された場合、値はそれぞれ上、右、下、左の順 (時計回り) に適用される。

【padding-top】
用途：上部の余白を調節する
使用例：padding-top: 10px; padding-top: 15%;

【padding-left】
用途：左部の余白を調節する
使用例：padding-left: 10px; padding-left: 15%;

【padding-right】
用途：右部の余白を調節する
使用例：padding-right: 10px; padding-right: 15%;

【padding-bottom】
用途：下部の余白を調節する
使用例：padding-bottom: 10px; padding-bottom: 15%;

【padding】
用途：上下左右の余白を一括で調節する
使用例：padding: 1px; padding: 10% 0% 10% 0%;

値が1つ指定された場合、上下左右に同じ値が適用される。
値が2つ指定された場合、1つ目の値は上下、2つ目の値は左右の辺に適用される。
値が3つ指定された場合、1つ目の値は上、2つ目の値は左右、3つ目の値は下に適用される。
値が4つ指定された場合、値はそれぞれ上、右、下、左の順 (時計回り) に適用される。

【top】
用途：ページの最上部からの位置を調節する
使用例：top: 10px; top: 15%;

【left】
用途：ページの最左部からの位置を調節する
使用例：left: 10px; left: 15%;

【right】
用途：ベーシの最右部からの位置を調節する
使用例：right: 10px; right: 15%;

【bottom】
用途：ページの最下部からの位置を調節する
使用例：bottom: 10px; bottom: 15%;

※margin-topとtopの違い
margin-top：上にある要素との間隔を調節する
→縦に2つ並んだ画像の間隔を開けたい場合に使用する

top：ページ全体での上からの位置を調節する