CSSのプロパティーについて
プロパティーの種類は様々なものがありあます。
文字の色、背景色、背景画像、フォントの種類、フォントの大きさなどがあります。
ではここで実際に使ってみしょう。
まずはhtml内にPタグを指定し文字の色を変えてみよう。
index.html
<p>テスト</p>
style.css
@charset "utf-8"
p {
/*処理を書く*/
color:#f0000;
}
上の様に文字が赤くなっていれば成功です！
日本で訳すとすべてのPタグに対して文字の色を赤くしてねという命令になります。
Pタグの{}内の処理はcolorで文字色を変えてほしいということになり、何色に変えるのかという
命令を：の後に書いています。
文字の大きさを変える場合はfont-size:〇〇px;
背景色はbackground-color、背景画像はbackground-imag：url();です。
例題として、html内でPタグを指定しテキスト内容はHallo.
cssでpタグに対して文字の大きさを20ピクセル 文字色は白 背景色を青にしてください。
すると以下の結果になります。
コードの回答はこちら
index.html
<p>Hallow</p>
style.css
@charset "utf-8"
p {
color:#ffffff;
background-color:#0000ff;
font-size:20px;
}
次は四角箱を３つほど作ってみましょう
まず横幅を４０ピクセル、縦幅を３０ピクセルにします。
そしたら箱の空間を１０ピクセルほどにしていきます。
index.html
<div class="box"></div>
<div class="box2"></div>
<div class="box3"></div>
style.css
@charset "utf-8"
p {
/*処理を書く*/
.box {
width: 40px;
height: 30px;
background-color: blue;
}
.box2 {
width: 40px;
height: 30px;
margin-top: 10px;
background-color: blue;
}
.box3 {
width: 40px;
height: 30px;
margin-top: 10px;
background-color: blue;
}
処理を見ていきましょう
widthは横幅、heightは縦の長さを表しています。
margin-topは上の余白部分を表しています、余白についてはまた後日書いていきます。
background-colorで背景色の指定をしています。これらの結果は以下の様になっていますか？
縦に並んでいれば正解です。
HTMLの処理を基本的には上から下に流れ左側に反映されていきます。
問題です、青い箱を好きな色に変えてください(青以外の色、３つの箱の色をバラバラで）大きさは横と縦を同じ１００ピクセルに指定。余白はそのままで平気です。
こんな感じになりましたか？なっていれば正解です。答えは次回に載せます。
↧