CSS プロパティとは プロパティの種類と具体的な記述方法その1
前回の記事に書いたようにCSSとは見た目上のデザインを設計するためのものだ。では実際どのように記述すれば良いか。これも前回の記事の後半で説明している。おさらいするとbody{background-color:blue;}どの部分の{どういう機能を:どういう風に変更する;}という書き方だ。上の例で言えばボディ部分の 背景色を変更する機能を 青色に設定するという意味だ。CSSはほぼ全てこの文法構造で成り立っている。ただそれぞれの種類が豊富なのだ。background-color以外にも様々なプロパティがあるし、各種プロパティによって変更の記述も変わってくる。当然である。想像してみてほしい。字のサイズを変更するプロパティに対して、青色にしますという指令を出しても反映されるはずがないのだ。よって今回まず、どういうプロパティがあるのかを必要最小限に厳選し、羅列する。その上で、それぞれにどのような記述を施すかも最低限記しておく。font 説明 文字を変更するもの。文字サイズ、文字の太さ、フォント、文字の色が変えられる。使用シーン body , p , li など、文字に関する部分では使用可能。ただし、フォントはイチイチ指定していくとキリがないので、基本的にはbody全体に対して指定しておき、部分的に変えたい所だけ変更するのが一般的。※また、fontの中には下のように枝分かれしており、それぞれを細かく設定することができる。font-size 文字の大きさを指定できる。一般的にピクセル単位(px)での指定となるが、ポイント(pt)などでも可。利用されているブログサービスによってはボタン一つで指定できる。その場合はそちらを使えば良い。細かい調整はピクセルが向いている。font-style文字のスタイルを指定できる。斜体にしたければoblique、イタリック体にしたければitalic、標準で良ければnormalと書く。こちらもブログサービスによってはボタン一つで指定できる。font-weight文字の太さを指定できる。太くしたければbold。標準サイズで良ければnormal。細かい設定をしたければ、100~900までの数字を入れれば良い。900がboldを除くと一番太い。こちらもブログサービスによってはボタン一つで指定できる。 例body { font-size: 14px; font-style: normal; font-weight: normal; }※もう一つfont-familyなるものがあるが、これは説明すると超長くなるので次回以降に持ち越し。ただし結構重要なので、知りたい方は今は他サイトでググろう。利用しているサービスによっては指定する必要なし。少なくともアメブロは無くても問題ない。width, height説明 指定したタグの大きさを設定することができる。表を作る際に、ひとつのマスの高さと幅の設定をしたり、もしくはページ全体のサイズを設定する際に使用。どちらもピクセル単位で設定する。もちろん画像のサイズを変更したり、要は結構なんでもできる。幅と高さを指定したいなと思うシーンではだいたい使う。widthが幅の指定、heightが高さの指定である。使用シーン 全てのタグに使用可。background説明 指定したタグの背景を設定できる。背景色の変更や、画像を挿入できる。画像を挿入する場合は更に、1枚だけ貼りつけるのか、エリアいっぱいに画像を何枚も貼りつけるのか、指定範囲のどこらへんに画像を貼りつけるのか、など細かい指定が可能。font同様、backgroundも以下のように枝分かれしており、それぞれで指定をする。background-color背景色を指定する。redやblueなど色を直接書いても反映はされるが、カラーコードと呼ばれるもので指定すると、どんな色でも表現できるのでオススメ。カラーコードとは(#FF5533)みたいなやつ。使用シーン body , div など範囲指定がなされている場面で使用可能。background-image背景を画像にしたい場合はこれ。当然画像が必要。画像のurlを書く。※注意点としては、あらかじめ指定した範囲の中に画像をはめ込む時、範囲以上に大きいサイズの画像を挿入すると反映されない。※画像サイズを変更することは基本的にはおすすめしない。縦横の比率が元のサイズと少しでも変わると画質が一気に劣化するため。どうしてもする場合は縦横比を変えないように注意しよう。使用シーン body , div など範囲指定がなされている場面で使用可能。background-repeat背景が画像の時のみ指定。同じ画像が何枚も繰り返し貼られる。repeat-xと書くと横方向に幅が許す限り、同じ画像が何枚も繰り返し並ぶ事になる。repeat-yとすれば縦方向に。両方やったら範囲が全て松崎しげるの顔で埋め尽くされる。画像を1枚だけ貼りたい場合は必ずno-repeatと記述する事。だいたいno-repeat。background-positionこれも背景が画像の時のみ指定。範囲内のどのへんに画像をはめ込むのかを設定する。topと書けば一番上に、leftと書けば一番左に。centerで中央に。ピクセルで細かく指定することも可能だが、基本的にはtopとleftで統一しておけば管理がしやすい。※画像の位置の調整は他の方法でやることが多いため。例div{ width:500px; height:500px; background-image: url(images/aiueo.jpg); background-repeat: no-repeat; background-position: top left; }※上図の例は範囲を作るタグ「div」の幅、高さをそれぞれ500pxと設定し、その範囲内の背景として画像を挿入したもの。なお、図では分かりやすくするために「div」のエリアを茶色で表現しているが、実際は透明だと思っていただきたい。top leftは指定した範囲の左上にべったりくっつくように貼る場合。no-repeatは1枚だけ貼り付ける際に書く。なお、今回の例では「div」を幅500px 高さ500pxと設定しているが、画像のサイズは幅300px 高さ200pxである。この場合、画像の下に300px、右に200pxの空間が生まれてしまう。この空間には何も入れる事ができないので注意。よって画像を範囲指定して挿入する場合は画像サイズに合わせて「div」の範囲を指定した方が良い。その2に続く