第6回（2022/12/14）
参考書：P66 ~ P75
ボックスモデル
HTMLのすべての要素は高さ、幅を持った四角形の中心にコンテンツ（文章、画像等）が入っており、その形状からボックス（箱）と呼ばれている。 そのボックスは独自のルールを持ち、コンテンツ以外の複数の要素で構成されているため、ボックスモデルという概念を用いて説明される。
【参考資料】
ブロックボックスとインラインボックス
ブロックボックス（ブロック要素）
ブロックボックスは幅に関係なく、上から下へ縦方向に配置され、可能な限り横幅いっぱいの領域を取る。
特徴
- 並び方：横いっぱいに広がり縦に積み重なる。（上から下へ）
- 幅と高さの指定：縦幅と横幅の指定ができる。
- 余白の指定：四方に余白を指定できる。
インラインボックス（インライン要素）
インラインボックスは左から右へ横方向に配置され、インラインボックスの前後には改行は伴わず、行内の一部としてレイアウトされる。
特徴
- 並び方：横に並ぶ。
- 幅と高さの指定：要素の中身によって変化する。（指定できない）
- 余白の指定：左右のみ余白を指定できる。
背景色を変更する
<< プロパティ >>
p { background-color : 色; }
CSSで色を変更する
CSSではRGBを数値に置き換えて色を指定する。
カラーコードの指定
#64bdb2
- 16進数で指定する。
- 先頭に「#」をつける。
透明度有りの指定
rgba(100,189,178,0.7)
- 10進数で指定する。
- RGBAの各値を「,」で区切る。
- 透明度は0.7なら70%、1なら100%。
フォント
フォントの種類を指定する
自分のPCでは表示されても、サイトを見ているユーザーのデバイスに存在しないフォントは表示されない。
font-family: フォント名;
- 値にはフォント名が入る。
- 「,」で区切って複数のフォントを指定できる。
<< 具体的な書き方 >>
font-family: 'フォントファミリ名1','フォントファミリ名2',総称ファミリ名;
フォントファミリ名：具体的なフォント名のこと。標準フォントで指定されることが多いがOSのバージョンなどによって変化する。
総称ファミリ名：字形で分類したフォント名のこと。指定されたフォントファミリが存在しなかった場合の代替フォントが表示される。
- フォントファミリ名は「'」または「"」で囲む。
- フォントは先に書いたものが優先される。
フォントのサイズを変更する
font-size: 値;
- 「px」や「rem」などの値やキーワードで指定する。
枠線
border: 太さ 線の種類 色;
ショートハンド
プロパティ
- 太さ：border-width: 3px;
- 種類：border-style: solid;
- 色：border-color: #FFFFFF;
線の種類
- solid（実線）
- double（二重線）
- dotted（点線）
- dashed（破線）
borderの個別指定
border-top: 4px solid #000000; border-left: 2px double #000000; border-right: 3px dotted #000000; border-bottom: 4px solid #000000;
<< 例 >>
border: 3px solid #FFFFFF;
枠線の角を丸くする
border-radius: 値;
<< 例 >>
border-radius: 20px;
