日報 2016/06/22
今日やったこと
HTML&CSSレッスンブック
CHAPTER0: 下準備
- ブラウザやエディタ、サーバーの準備
CHAPTER1: 基本的なページの作成
- ファイルの作成
- コンテンツの記述
- コンテンツのマークアップ
- ヘッダーとフッターの追加
CHAPTER2: レイアウトとデザイン
- 背景の色付け
- 横幅と配置の指定
- ヘッダーをバーの形にする
- 角を丸くする
- 影をつける
- Webフォントの利用
気になったこと
box-sizingプロパティのborder-boxについて
box-sizingプロパティにborder-boxを指定すると、widthで指定した値に掛け線と余白を含めることができる。 …掛け線=border、余白=marginという認識でいいのか 。 つまりborder-boxを指定するとborder=0,margin=0になって、paddingも0にすれば、コンテンツの端とボックスモデルの端がおなじになるということなのか(言葉だと説明しづらい)。
上記はTIPSをよく読んだら解決した。
widthとheightは、CSSボックスモデルのコンテンツのみの幅と高さを指定するものだが、box-sizingプロパティにborder-boxを指定すると、widthとheightはコンテンツ+padding+borderになるとのこと。
bodyのmargin
「ヘッダーとページ上部の空白をなくすためにbodyにmargin: 0を設定する」というのがあった。 bodyがよくわからなくなってきたが、つまり「bodyコンテンツ+padding+border+margin=画面全体」ということなのか。
