Day 3 - CSS入門 基本スタイリング編

★本日の学習成果まとめ

▽ボックスへのCSS

・CSSファイルを別ファイルで作った場合はコードの一番初めに

@charset "utf-8";

と記載する必要がある。超重要。♦conntens boxがHTMLで入力した内容が反映される場所
♦border boxがconntens boxの境界
♦padding　boxはconttens boxとborder box の間の空白のこと
♦marginがborder boxの外側の空白のこと
・widthとheightは16pxが基本で4の倍数で統一するときれいにスタイリングされたサイトに見える
・borderは一括指定ができ、

border: 8px solid blue;

と書けば、8pxのソリッド柄で青色のボーダーがconttens boxの境界に引かれる。また、top、bottomを使えば、上や下だけボーダーを引くことができる。
・paddingは上下、左右に空白を作ることができる。どの部分の余白を指定するかは、上から時計回りにpxを指定することでできる。また、2つや3つでも指定が可能。なれれば。
・marginは基本的にtopとbottomのどちらかだけ設定する。2つのconttensbox間のmarginは短いpxのほうが相殺されるため。
・widthとheightを決めて、borderを入力するとデザイナーに怒られる。borderの分だけconttensboxが大きくなったように見えるから。そういう時にboxsizingを使用すれば、borderに合わせてwidthとheightを設定してくれる。
border　radiusでHTMLのテキストの領域を丸めることができる。50%にすることで、円を作ることができる。ただし、ボーダーの一括指定には含めることができないので注意が必要。絶対に2つコードが必要になる。

・boxshadowで影を生成することができる。渾身の影作品を見てください。200pxで作りました。浮遊感が半端ないです。

▽fontへのCSS

・conttensbox内でfontsizeとhalf reading、line heightが制御されている。基本的にlineheightはpxを指定せずに倍数を指定してやる。それによってfontsizeが変わってもその倍数分lineheightが大きくなってくれて便利。
・継承とは、上位の要素に色とかを指定することで、下位の要素すべてに指定されることをいう。また、継承されないものもあり、それはMDNのサイトで確認できる。inheritを使えば、無理やり継承することも可能。
・CSSでfontfamilyを指定するときは、各OSに対応したfontを指定する必要があるので複数入力する。
・ある一部分だけCSSで装飾したいときは<section>で囲って、<section>に対してCSSで指定すればよい。

★備忘録ノート

・CSSファイルを別ファイルで作った場合はコードの一番初めに

@charset "utf-8";

と記載する必要がある。これによってCSSを日本語でコーディングしますよ。という宣言みたいなもの。必ず最初に書く必要があり、スペースがあってもダメ。

・conntentbox、paddingbox、borderbox、marginがとても重要。conntentboxがHTMLで記載したコンテンツで、HTMLで確保したコンテンツの領域。そして、borderboxがconntentboxの境界性に装飾を加えることができるプロパティ。borderboxとconntentboxの間に空白を作成することができる領域をpaddingboxという。borderboxの外側にほかのconntentboxとのスペースを作成するのmarginという。ややこしい。整理して内側から考えるとコンテンツ、パディング、ボーダー、マージンの流れ。

・width(ウィス)とheight(ヘイト)というらしい。今まで、ウィズとヘイトーって言ってた。ハズイ。大体、16pxがデフォルトで、その倍数や8,4の倍数で指定すると、統一感のあるデザインになるのでお勧めらしい。16が基本。

・ボーダーは四辺すべてではなくて、上と下だけつけることができる。上だけにしたいときはtopだけを使って、下だけにしたときはbottomを使う。

・一括指定プロパティとかいう便利なの北　後から便利なので教えてくるドットインストールあるある。
一括指定できるらしくて、border:　8px　solid　blue;　と書けばボーダーをかける。
ただし、注意点があってボーダースタイルを

border-style: solid;
border: 8px blue

のように2行に書くとバグるらしい。なんで2行に書くのかわからんけど・・・一行でかけるから一括指定するんじゃねぇの？

・paddingの複雑さ。padding　↑px　右px　↓px　左pxの余白を指定できるらしい。全部一緒なら一つのpxだけで完結。ただし、2つだけ書くと一つ目のpxで上下の余白、二つ目のpxで左右の余白が設定されるらしい。覚える必要はなさそうだけど…毎回4つ指定すれば丸そうだな。

・marginの相殺とは、P要素間のmarginでそれぞれtopとbottomのmarginを設定しているときに、上のbottomと下のtopがおんなじ領域になってしまうため、長さの短いほうが省略されるらしい。勝手に消えちゃうから怖いね。対処方法として、topとbottomのどちらかしかmarginを設定しなければ相殺することはなくなるんだって。賢いね。

・boxsizingとかいうできるやつ
ウィスとヘイトを指定して好きな大きさにしても、ボーダーとパディングを決めるとボーダーとパディングの分だけ大きくなってしまう。ボーダーの大きさ分ウィスから引き算すればいいが、めんどうだからboxsizingを使えば、ウィスとヘイトの大きさにボーだーの大きさを含めてくれる賢いやつ。

・border　radiusでHTMLのテキストの領域を丸めることができる。50%にすることで、円を作ることができる。ただし、ボーダーの一括指定には含めることができないので注意が必要。絶対に2つコードが必要になる。

・boxshadowで影を生成することができる。渾身の影作品を見てください。200pxで作りました。浮遊感が半端ないです。

以上までが、ボックスの基本的なCSSのようです。これ以降はテキスト本体に装飾をする際に使うCSSになる。

・テキストが設定された段階でテキストごとに行が設定される。その行でバックグラウンドやfontsizeを制御している。行の大きさを制御しているのはlineheightで、テキストの大きさとの差をhalfReadingというらしい。テキストの大きさを大きくしてもlineheightを変えなかったら、文字が見えなくなってしまうため、基本的に、lineheightはpxで指定せず、倍数でしていする。1.5や2.5と書けば文字の大きさに合わせて自動で変更してくれる。

・h1とp両方にcolorを指定するのが面倒なら、両方を囲っている要素に対してcolorを指定すれば両方に対して指定することができる。例:colorをblueにしたいときにはbodyに入れれば、body内のすべての要素に適用される。
また、borderとかは個別に指定する必要があるが、inheritを使えば無理やり適用することができる。
これを継承という。

・fontfamilyで文字の形式を書式を指定してあげる。基本的にbodyに記載。ただし、一つだけでなく、複数書く。理由としては各OSでフォントのあるなしがあるためどの端末でも確認できるようにfontを指定する必要がある。

・一部分だけ変更したいときは「section」でHTMLを囲んで、CSSで装飾すればよい。

・paddingとmarginは使い分けが難しいから練習あるのみ。わからなかったら一度、両方使ってみればよい。