【CSS】プロパティ編
みなさん、こんばんは
最近、個人アプリを開発中に全力で取り組んでいる
エンジニアの卵から雛になっている五右衛門であります。
TECHCAMPで５週目に入ったところであります。
なかなか、忙しい日々でみなさんに、
ブログ更新ができず申し訳ないと思っておりますが、本日は、CSSのプロパティの種類について一部紹介しようと思います。
CSSの概要は、先週金曜日に掲載したブログを読んでみてください。
概要欄は↓（こちら）
では、早速、よく私も使う基本中の基本のプロパティをご紹介していこうと思います。
【テキスト・フォント編】
・font-sizeプロパティ
フォントのサイズを変更する際に使われます。
（例）
p{
font-size: 16px;
}
意味：P要素の文字に対して、16pxの文字の大きさに指定するということです。
・font-weight
フォントの太さを決めるプロパディです。
（例）
p{
font-wight: bold;
}
意味：P要素に対しての太さは太文字(700)です。
ちなみに、文字の太さは、100~900の数字表すことができ、みなさんのが普段ブログで見ているのは、大体700
と思っていただいていいと思います。
値に入ることができる、単語及数値は以下となります。
- normal (400)
- bold(700)
- 100~900の指定lighter
- フォントの太さを今より一段階細くします。
- bolder
- フォントの太さを今より一段と太くします。
以上が数値に入るもになります。
・text-align
テキストの水平方向の表示位置を位置を決めます。
これは、ブロックレベル要素に対して、行われるものでああります。
(例)
p{
text-align:center;
}
意味：p要素に対して、もし箱のような基準（インラインレベルの要素）があれば、その箱の真ん中に位置にする。
文字のポジションを右詰めにするか左に詰めにするか、中央に揃えるかを整えるためのものです。
・line-height
テキストの行の高さを設定するものになります。
p{
line-height: 50px;
}
意味：p要素に対して、文字の行幅を50pxにするといことです。よく使う要素として行間を指定し、縦幅を合わせる
ことで、文字を真ん中にすることができる。
ブロック要素の幅が決まっていれば、簡単に幅をわせることが可能です。
ぜひ、工夫して使って見てくください
【色・背景編】
・colorプロパティ
文字の色を変更します。
（例）
p{
color: red;
}
意味：p要素に対しての色を、赤い色にすることができます。文字色を赤色にするってことですね。
・background -color
背景色を指定することです。
（例）
p{
background-color:green;
}
意味：p要素に対しての背景色を緑色にすることができます。文字の色ではないので気をつけてください。
私は、最初、colorプロパティを背景色だと勘違いしてました。笑
【横・高さ】
・width
横幅を決めるためのものになります。
（例）
p{
width: 50px;
}
意味：p要素の横幅を50pxとするということになります。
・height
縦幅の高さを決めるものになります。
（例）
p{
height: 50px;
}
意味：p要素に対して横幅に対するものになります。
以上私が、よく使うプロパティになります。
他にもたくさん使用するものなります。
ぜひ、webでCSSに興味のある方は、
ぜひCSS プロパティで検索してみてください
本日のブログはこの辺で
次は、Rubyについて、簡単に説明しようと思います。
ほいじゃまたこー
