目次一覧
状態:結論(後で見返す用)
閲覧数:1,793
投稿日:2017-01-15
更新日:2019-09-30
従来の問題点 ／ きっかけ ／「レイアウトベース」で記述していく
設定例
設定例
従来の問題点 ／ きっかけ ／「レイアウトベース」で記述していく
従来の問題点
適当に設定していたため、確認に手間取る
きっかけ
「box-sizing: border-box;」指定しても「margin」は対象外
従来
「margin」「padding」をセットで考えていた
昨日、気が付いたこと
・「margin」は、「width」「height」よりも上位レイヤー
・少なくともレイアウトにとっては
「レイアウトベース」で記述していく
レイアウトに影響を及ぼす内容から順番に記載していく
完璧さを求めない
・どうせ覚えられないので、主要なもののみ順番ルールを設定
・具体的には、下記7種類のみ
特徴
・「margin」を「padding」から分離
・「margin」を「width」「height」より先に記述
ルール
セレクタ{
display
position
top
left
margin
width
height
padding
background-color
color
font-size
font-weight
}
display
position
top
left
margin
width
height
padding
background-color
color
font-size
font-weight
}
※Googleコーディング規約では、アルファベット順
設定例
設定例
2017/1/15
#brother{
position:relative;
top:0;
left:0;
margin: 20px;
width:800px;
height:600px;
background-color:#4CAF50;
color:white;
font-size:2em;
font-weight:bold:
}