ボックスモデル

ボックスモデル

  • HTMLタグでマークアップされた要素は1つの箱とみなされます
  • ブロックレベル要素(幅指定をしない場合、ブラウザー幅で表示される)
  • 記述するプロパティの順序は、空間からコンテンツ内容への順が一般的


f:id:lesson3:20170819041327p:plain


パディング(padding)
  • ボーダー辺に対し、コンテントの読みやすさを確保するために空ける空間を指します
  • 「pad」つまり肩パッドのように、内容の嵩を増して大きいと思わせる設定です
  • 「padding-top」「padding-right」「padding-bottom」「padding-left」の順に記述します
  • これをまとめて記述する場合は、ショートハンドプロパティ「padding」を使用します


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

ボーダー(border)
  • 本来は「border-width」「border-color」「border-style」プロパティですが、ショートハンドプロパティ「border」か、「border-top」など個別に指定します。
  • 「幅・色・スタイル」の順序は自由です
マージン(margin)
  • 関連する機能を視覚的にグループ化し、別の機能ブロックと区別しやすくします
  • ブロックとブロックの間の空間を広げる設定です


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

ボックスサイズの計算方法
  • 「width: 100px」の要素に対し、「padding: 10px」を指定すると、widthの実質の値は「100+10+10=120px」となります
  • これに「border: 1px」が追加されると、widthの値は「100+10+10+1+1=122px」になります

プロパティのショートハンド

  • プロパティの値を、「上」→「右」→「下」→「左」と、スペース区切りでまとめて記述します

f:id:lesson3:20170820225931p:plain

.box {
  padding: 10px 20px;  /* 上下10px、左右20px のpadding */
}
「text-align」の値
  • ブロックレベル要素の幅の中の行揃えの指定
  • text-alignの値には left(左寄せ)、right(右寄せ)、center(中央揃え)の他、justify(両端揃え)というものもあるので覚えておきましょう

背景色

CSSで定義されている147色について
  • redやgreenといった、CSSで定義されている色は以下でも確認することができます。全部で147色あるようです。
  • http://www.147colors.com/

www.colors.commutercreative.com

16進数のRGB(Red/Green/Blueviolet)
  • 色をあらわす16進数の表記は、先頭から2桁ずつ赤、緑、青の色の強さをあらわします
  • #FFFF00 だったら 赤=FF / 緑=FF / 青=00 となります
広告を非表示にする

求職者支援訓練 フェリカテクニカルアカデミー