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

ただし(仮)のメモ

平塚在住,無職,うつ病,孤独

CSSのお勉強(ボックスモデル)

ボックスモデルとは

1つ上のタグの文字

開始タグから終了タグ内に記述されている内容

1つ下のタグの文字

  • margin … 黒線と緑の枠の間
  • border … 緑の枠
  • padding … 緑の枠と文字の間

上図において上記のような場所ごとに管理することです(適当)。
また上下左右はそれぞれtop,bottom,left,rightとして別々の値を設定できます(上図は全て同じ値)。
ちなみに黒線は上下のタグのborder-bottomやborder-topです(marginとpaddingは0px)。

CSS記述例

p {
    margin: 10px; /*上下左右10pxに設定*/
    margin: 10px 20px; /*上下10px 左右20pxに設定*/
    padding: 10px 30px 20p; /*上10px 左右30px 下20px*/
    padding: 10px 20px 30px 40px; /*上10px 右20px 下30px 左40px*/
    border-style: solid; /*線の種類*/
    border-width: 3px; /*線の太さ*/
    border-color: #CCCCCC; /*線の色*/
    border: solid 3px #CCCCCC; /*同時に指定する方法*/
    margin-top: 10px; /*上のみ設定*/
    padding-left: 10px; /*左のみ設定*/
    border-bottom-style: solid; /*下のみ設定*/
    border-right-color: #3399FF; /*右のみ設定*/
}

borderの種類

下記のような種類があります。

none

solid

dotted

dashed

groove

ridge

inset

outset

よく見かける見出しとCSSコード

見出し1

p {
    border-style: solid;
    border-width: 0 0 1px 5px;
    border-color: #FF9900;
    padding: 5px 10px;
}

見出し2

p {
    border-left: solid 5px #FF9900;
    border-bottom:dotted 1px #999999;
    padding:5px 10px;
}

見出し3

p {
    border-style: solid;
    border-width: 3px 0;
    border-color: #FF9900;
    padding: 5px;
}

見出し4

p {
    border-left: solid 5px #FF99CC;
    background-color: #FFFFCC;
    padding: 5px 10px;
}

見出し5

p {
    border-bottom: solid 3px #FF9900;
    background-color: #FFFFCC;
    padding: 5px 10px;
}

見出し6

p {
    border: solid 1px #FF9900;
    background-color: #FFFFCC;
    padding: 5px 10px;
}

勉強した感想

毎回思いますけど習うより慣れろだなーと。
実は今回はほとんど教科書のコードを写しただけですけど、かなり苦戦しました。
思うように表示されなかったり、そもそも何も映らなかったり…w
でもその試行錯誤をしていく中で色々と得られるものがあるので、そういう意味でブログに勉強したことをまとめるのはよい勉強法なのかなと感じました。