文字を装飾する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:ページ全体での上からの位置を調節する