CSSのプロパティと値について
よく使うプロパティと値についてのご説明です。
ドリームウィーバーなどのソフトを使えば自動で記述してくれますが、
覚えた方がスムーズに構築が出来ますよ＾＾
width(ウィドス)
ボックスの幅を設定するプロパティです。
/* 値の意味 */
width: "幅";
/* 記述例 */
width: 100px;
※幅の単位はpx以外にも[em,mm,cm,in,pt,pc,ex,%,auto]があります。
height(ヘイト)
ボックスの高さを設定するプロパティです。
/* 値の意味 */
height: "高さ";
/* 記述例 */
height: 100px;
※高さの単位はpx以外にも[em,mm,cm,in,pt,pc,ex,%,auto]があります。
background(バックグラウンド)
背景色や背景画像を設定するプロパティです。
/* 値の意味 */
background: "url(画像パス)" "横位置" "縦位置" "画像のリピートの有無";
/* 一括指定 */
background: url(画像パス) top,right,bottom,left top,right,bottom,left repeat-x,repeat-y,no-repeat;
/* 背景のカラーのみ */
background-color: #(カラーコード);
/* 背景の画像のみ */
background-image: url(画像パス);
/* 背景のリピートのみ */
background-repeat: repeat-x,repeat-y,no-repeat;
※repeatはX(y)軸方向に画像を繰り返すか、またはnoで繰り返さないかを指定。
※記述時はカラーコードに()は必要ありません。画像パスに()は必要です。
border(ボーダー)
枠線の詳細を設定するプロパティです。
/* 値の意味 */
border: "ボーダーの幅" "ボーダーの種類" "ボーダーのカラー";
/* 一括指定 */
border: px solid,dotted #(カラーコード);
/* 上のボーダーのみ */
border-top: px solid,dotted #(カラーコード);
/* 右のボーダーのみ */
border-right: px solid,dotted #(カラーコード);
/* 下のボーダーのみ */
border-bottom: px solid,dotted #(カラーコード);
/* 左のボーダーのみ */
border-left: px solid,dotted #(カラーコード);
※ボーダーの幅の単位はpx以外にも[em,mm,cm,in,pt,pc,ex,%]があります。
※ボーダーの種類はsolid,dotted以外にもあります。
※記述時はカラーコードに()は必要ありません。画像パスに()は必要です。
padding(パディング)
ボックスの内側の幅を設定するプロパティです。
/* 値の意味 */
padding: "上幅" "右幅" "下幅" "左幅";
/* 一括指定 */
padding: px px px px;
/* 上幅のみ */
padding-top: px;
/* 右幅のみ */
padding-right: px;
/* 下幅のみ */
padding-bottom: px;
/* 左幅のみ */
padding-left: px;
※px以外にも[em,mm,cm,in,pt,pc,ex,%]があります。
margin(マージン)
ボックスの外側の幅を設定するプロパティです。
/* 値の意味 */
margin: "上幅" "右幅" "下幅" "左幅";
/* 一括指定 */
margin: px px px px;
/* 上幅のみ */
margin-top: px;
/* 右幅のみ */
margin-right: px;
/* 下幅のみ */
margin-bottom: px;
/* 左幅のみ */
margin-left: px;
※px以外にも[em,mm,cm,in,pt,pc,ex,%]があります。
text-align(テキストアライン)
テキストの横位置を設定するプロパティです。
/* 値の意味 */
text-align: "横位置";
/* 左寄せ */
text-align: left;
/* 中寄せ */
text-align: center;
/* 右寄せ */
text-align: right;
font(フォント)
フォントの詳細を設定するプロパティです。
/* 値の意味 */
font: "スタイル" "スモールキャップ文字" "太さ" "フォントのサイズ" "フォントの種類";
/* 一括指定 */
font: normal,italic normal,small-caps normal,bold px,pt "ＭＳ Ｐゴシック他";
/* フォントの種類設定のみ */
font-family: "ＭＳ Ｐゴシック他";
/* フォントのスタイル設定のみ */
font-style: normal,italic;
/* フォントのスモールキャップ設定のみ */
font-varient: normal,small-caps;
/* フォントのサイズ設定のみ */
font-size: px,pt;
/* フォントの太さ設定のみ */
font-weight: normal,bold;
※フォントのサイズはpx,pt以外にも[mm,cm,in,pt,pc,ex,%]があります。
※フォントは様々な種類があります。詳細については検索してみて下さい。
