CSS入門~CSSでよく使うプロパティ~
今回はCSSでよく使うプロパティを紹介していきます。
初めて見る方は、一度にすべて覚えなくてもいいですが、
なんとなーくこんな意味になんだとなれるように読んでくださいませ。
要素の幅を指定する「width」
div {
width:100px;
}
widthは、要素の横幅を指定できます。
単位には「px」や「%」などを使います。
inline要素には指定できません。
要素の高さを指定する「height」
div {
height:100px;
}
heightは、要素の高さを指定できます。
その他はwidthと同じです。
要素の余白を指定する「marginとpadding」
div {
width:100px;
height:100px;
margin:10px;
padding:5px;
}
marginやpaddingは、要素の余白を指定します。
marginは要素の外側に余白を作り、
paddingは要素の内側に余白を作ります。
inline要素には左右のみしか指定できません。
marginとpaddingは少し奥が深いので個別の記事で詳しく説明します。
文字の大きさを指定する「font-size」
p {
font-size:16px;
}
font-sizeは、文字の大きさを指定します。
単位にはwidth等と同様に「px」や「%」を使用したり、
emやremという単位も使ったりもします。
文字の色を指定する「color」
colorは、文字の色を指定できます。
色々指定する値はありますが、一般的にカラーコード(16進数)で指定します。
p {
color:#ff0000;
}
カラーコードについて詳しくはこちらの記事で
RGB・CMYK・カラーコードとは?
要素の背景を指定する「background」
div {
background:#ff0000;
}
div.image {
background:url("img/image.png");
}
backgroundは、要素の背景を指定できます。
指定できるものは色や画像で、動画は指定できません。
backgroundは少し奥が深いので個別の記事で詳しく説明します。
要素の位置を決める「position」
div {
position:relative;
top:10px;
left:10px;
}
positionプロパティは、要素の位置を決めることができます。
positionは少し奥が深いので個別の記事で詳しく説明します。
プロパティのまとめサイト
他にもプロパティはたくさんありますが、一度に全部覚えようとせず
やりながら少しずつ覚えていきましょう。
一気に覚えようとすると大抵やる気が失せます。
使えるプロパティはこちらのサイトに一通りまとめられています。
スタイルシートリファレンス(目的別)
CSS3リファレンス
Comment