CSSメモ

数年前の記事をベースに色々追加しているので内容が古い。

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リセット