Brat Creator

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は少し奥が深いので個別の記事で詳しく説明します。

CSS入門~margin・padding・border~

文字の大きさを指定する「font-size」

p {
    font-size:16px;
} 

font-sizeは、文字の大きさを指定します。
単位にはwidth等と同様に「px」や「%」を使用したり、
emやremという単位も使ったりもします。

CSS入門~fontプロパティを理解しよう~

文字の色を指定する「color」

colorは、文字の色を指定できます。
色々指定する値はありますが、一般的にカラーコード(16進数)で指定します。

p {
    color:#ff0000;
} 

カラーコードについて詳しくはこちらの記事で
RGB・CMYK・カラーコードとは?

要素の背景を指定する「background」

div {
    background:#ff0000;
} 

div.image {
    background:url("img/image.png");
}

backgroundは、要素の背景を指定できます。
指定できるものは色や画像で、動画は指定できません。
backgroundは少し奥が深いので個別の記事で詳しく説明します。

CSS入門~backgroundを理解しよう~

要素の位置を決める「position」

div {
    position:relative; 
	top:10px; 
	left:10px;
} 

positionプロパティは、要素の位置を決めることができます。
positionは少し奥が深いので個別の記事で詳しく説明します。

CSS入門~positionを理解しよう~

プロパティのまとめサイト

他にもプロパティはたくさんありますが、一度に全部覚えようとせず
やりながら少しずつ覚えていきましょう。
一気に覚えようとすると大抵やる気が失せます。
使えるプロパティはこちらのサイトに一通りまとめられています。
スタイルシートリファレンス(目的別)
CSS3リファレンス

Comment