読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強03月14日開講クラス授業補足ブログ

ボックスモデル

CSS

ボックスモデルとは

  • 文書内のすべての要素は、ボックスと呼ばれる四角形の領域を生成します


  • 記述の順序は「外側のエリアから」が一般的です

hail2u.net

  • テキスト P.75

f:id:web-css-design:20160822213749p:plain

ボックスを構成する要素


ボックス幅は、コンテントエリア幅 + パディング + ボーダーの太さ + マージンです。
コンテントエリアがボックス幅ではないので、注意が必要です。

※コンテント:widthとheightプロパティで規定される長方形

内容領域::Content Area
  • テキストや画像などが表示される領域です
パディング:padding
  • 内容領域とボーダーの間にある余白がパディングです
  • ボーダー辺に対し、コンテントの読みやすさを確保するために空ける空間を指します
  • 「pad」つまり肩パッドのように、内容の嵩を増して大きいと思わせる設定です


「padding-top」「padding-right」「padding-bottom」「padding-left」の順に記述します。
これをまとめて記述する場合は、ショートハンドプロパティ「padding」を使用します。


※「-」値は指定できません。

ボーダー:border
  • パディングの外側にある領域をボーダーと呼びます
  • 本来は「border-width」「border-color」「border-style」プロパティですが、ショートハンドプロパティ「border」か、「border-top」など個別に指定します
  • 「幅・スタイル・色」の順序は自由です
マージン:margin

関連する機能を視覚的にグループ化し、別の機能ブロックと区別しやすくします。
ブロックとブロックの間の空間を広げる設定です。


※「auto」が指定できる。
※「-値」を指定できる。

16進数で色を決める

ヘックスカラー(HEX COLOR)
  • 16進数(0123456789ABCDEF)
  • #000000(黒)
  • #FFFFFF(白)
  • Hue(色相)・Brightness(明度) ・Saturation(彩度)

CSSで色を設定する

16進数で設定する
  • 16進数:hexadecimal number
  • #:number
  • 0123456789ABCDEF(16個)
  • RGBを2個ずつの数字を割り振る
  • 2個の左側の数字が明度(Brightness)、右側の数字が彩度(Saturation)


【RGB】
【8ビットカラー】



 #FF0000 または #F00

10進数の数値で設定する


 rgb(255,0,0) または rgb(100%,0%,0%)