数年前の記事をベースに色々追加しているので内容が古い。
position
static：
位置指定できない(top/bottom/left/rightが使えない)static以外は基準となれる。
relative：
top/bottom/left/rightが使える。
abusolute：
祖先の左上基準。なければbodyの左上から。
fixed：
スクロールしても固定。
abusolute,fixedはfloat:noneになってしまう。
relativeはtop/bottom/left/rightとfloatを流用できるが、通常はstatic + floatとおぼえておく。
floatクリア
floatの親要素に以下。
センタリング
margin: 0 auto
widthは必要。
margin相殺
marginは重なると相殺される。
大きい値が優先。
ネストして親と子が同じ方向にmarginがあった場合も
相殺される。(親にborderがあったりpaddingがあるとおきない。)
高さ100%
Chromeなどでキャッシュの影響で直ぐに反映されない場合、デベロッパーツールを表示し、リロードボタンの上で右クリックするとキャッシュをクリアできる。
作り方
上から、
<header><main><footer>
が基本。
<section>にabcのようなID/Class名を付けた場合、
その中の<div>などはabc-xxxのような形で統一する。
・1カラムの幅100%作り方
①<section>
width 100%
の中に
②<div id=”xxx-inner”>
max-width: 000px;
margin: 0 auto;
を入れる
②の中で調整する場合、
さらにその中に③<div>を入れる。
テキストの位置は、②か③の中で<h1～>や<p>として入れる。
①<section>が画像の場合、
background-image: url(‘1.jpg’);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 000px;
横並びにしたい場合、
<ul>の場合、
<ul>に
display: flex;
flex-wrap: wrap;
<li>に
display: block;
width: x%;
<div>の場合も同じ、
親<div>に
display: flex;
flex-wrap: wrap;
子<div>に
width: x%;
・余白調整
それぞれの<section>の上下にpaddingを入れる。
あとは上の要素からmargin-bottomで調整する。
・スマホの向きに合わせた文字サイズの自動調整をしない
・フェードイン
・iOSのinputリセット