ゼロから始めるエンジニアへの道 #12 ~html or css~

学習範囲

・16進数でのCrol指定
・Fontの変更
・BOXモデルの理解

Corol とFont

・文書全体 のfontを変更してあげるので、Bodyを指定
・colorの後述で、fontfamryの指定。
・*見たけど、Fontの種類はメッサ豊富なので、いづれにしてもおすすめのLPとか見て、 再現したいfontがどんなものかを参考に、consoleで確認して指定した方が良さそう。

ics.media

↑は、Fontのおすすめ（らしい）です。

~
body{color: #333;
font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", Verdana ,sans-serif; 
}
~

・前回も書いた通りプロパティに対して、昇順で表現優先がされる（らしい）ので、「Helevetica Neueで、Verdana を使ってね、でもなかったらを,sans-serif使ってね」という指定にしています。

Helvetica Neue

BOXModelについて

・chromeconsoleで、computedタブを選択した後に、タグとプロパティの一覧表示の上に出てくる四角いあいつ
・今回の勉強範囲ではhederのbackgroundcollarの色相を変更

~
header {background-color:
     #efefef;}  
~

・上記をconsoleで見ると、Hederの範囲に適用されているのがわかる

consoleのボックスで、見てみた（わかりやすくredに）

・上記のままだと、若干の余白でできているのがわかります。

余白箇所

・余白が、Bodyに紐づいているのがわかりますので、Bodyにmarginというプロパティを入れ、ピクセルの値を変更します。

~
header {background-color:
     grey;}

body{
    margin: 0;
}

~

余白が削れました。

上記は「heder内の余白すべてを0pxにしたい」ので、0;と指定しましたが、 top,bottom,right or left、それぞれのピクセルを指定できます。 (madin:0 bottom12px;)← みたいな感じ。

ボックスモデルの性質と出来る事。

・CSSのデザイン確認に寄与する。 ・DDを書いてみるのもあり 。