kscc

スポンサーサイト

一定期間更新がないため広告を表示しています

CSSを使うための基本中の基本とほんの少しのTips


ブログを作ったりウェブサイトを作る場合
デザインに絶対欠かせないのがCSSです。

基本的にはHTMLでマークアップをしてCSSでデザインをするので
ここは確実に押さえておいてくださいです。

ちょー初心者の方へ。

ではどんぞ。

CSSの基本的な記述

CSSは基本的にこんな感じで記述していきます。

div {
	width:640px;
}

意味は

この要素の {
	何を:どうする;
}

という感じです。

上記の場合は
div要素の横幅を640pxにするんだモン!というワケですね。

これが基本です。


HTMLへの反映

CSSをHTMLへ反映させるには3種類の方法があります。

例えば

<span>HELLO!</span>

このHTMLの文字の色をCSSで赤くする場合は

<span style="color:#ff0000;">HELLO!</span>

と要素へ直接記述する方法もありますし
HTMLファイルのhead要素内に記述する方法もあります。

<head>
	<style type="text/css">
	<!--
	span {
		color:#ff0000;
	}
	-->
	</style>
</head>

ですがどちらもHTMLファイルへ直接書き込んでいるので
編集する時はかなり大変な作業になります。

なのでCSSファイルを別で作成し外部のファイルとして読み込んでやるのが一般的です。

やり方は

span {
	color:#ff0000;
}

と書いたCSSファイルを作りlink要素で読み込みます。



この場合link要素はhead要素内に記述して下さい。


classとid

HTMLにはどの要素にも使えるclassとidという属性があります。

このclassとidを使うことでCSSの効果を十分に引き出せます。

classとidはどちらの属性値も任意の文字列を使用できるので
好きな属性値を付けることができます。

id属性は1つのファイルで1つのみしか使えませんがclass属性よりも優先して反映されます。

一方class属性は1つのファイル内でいくつでも使えます。

用途に合わせて使い分けましょう。

こんな感じでclass属性を使った場合

HELLO!

CSSファイルには

span.font_setting {
	color:#d02153;
	font-weight:bold;
	letter-spacing:2px;
}

“.”を属性値の前に付けて記述します。

同じようにid属性を使った場合は

HELLO!

CSSファイルには

span#font_setting {
	color:#d02153;
	font-weight:bold;
	letter-spacing:2px;
}

“#”を属性値の前に付けて記述します。


少しのTips

まぁ知っていたら少し便利な小技です。

優先して反映させる“!important”は同じ要素の属性がバッティングした時に使います。

table {
	margin:10px;
}

より

table {
	margin:20px !important;
}

が優先されます。

どのCSSがどこにどう反映しているか分からなくなった時のために“/* comment */”でコメントができます。

div.navigate_only {
	margin:5px 15px 10px 5px;
	padding:5px;
	border-left:5px solid #d02153;
}

どこのなんだっけこれ?
という時に

/* サイドのナビゲーション */
div.navigate_only {
	margin:5px 15px 10px 5px;
	padding:5px;
	border-left:5px solid #d02153;
}

という感じでコメントが残せます。

ネガティブマージンを使うことができます。

div {
	margin-left:-20px;
}

この場合は左に20px動きます。

同じ属性値を“,”カンマで区切ると複数指定することができます。

body,div,span,table,div,tr,th,td {
	margin:0;
	padding:0;
	border:0;
	outline:0;
}

同じ属性を異なる要素に指定できるるワケです。

一括して指定することもできます。

img {
	padding-top:5px;
	padding-right:10px;
	padding-bottom:17px;
	padding-left:12px;
}

としなくても

img {
	padding:5px 10px 17px 12px;
}

“上・右・下・左”の順番で記述することができます。
borderやpaddingなんかにも使う事ができます。


初めてCSSに触れるときは複雑すぎて嫌気が差してしまうかもしれませんが
継続は力なりと言いますのでまずは継続してみることが大切だと思います。

調べる→やってみる→失敗する→調べる→成功するというプロセスは誰にでもあるものです。

ぜひ“とりあえずやってみる”から始めてください。
スポンサーサイト