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の親要素に以下。

/* 従来 */

.floatcontainer:after{
content: "."; 
display: block; 
height: 0; 
font-size:0;	
clear: both; 
visibility:hidden;
}
	
.floatcontainer{
display: inline-block;
} 

* html .floatcontainer {
height: 1%;
}
.floatcontainer{
display:block;
}

/* あるいは以下 */

.clearfix:after {
content: "";
clear: both;
display: block;
}

/* 従来 */

.floatcontainer:after{

content: ".";

display: block;

height: 0;

font-size:0;

clear: both;

visibility:hidden;

}

.floatcontainer{

display: inline-block;

}

* html .floatcontainer {

height: 1%;

}

.floatcontainer{

display:block;

}

/* あるいは以下 */

.clearfix:after {

content: "";

clear: both;

display: block;

}

センタリング

margin: 0 auto
widthは必要。

margin相殺

marginは重なると相殺される。
大きい値が優先。

ネストして親と子が同じ方向にmarginがあった場合も
相殺される。(親にborderがあったりpaddingがあるとおきない。)

高さ100%

/* 従来 */

html, body{
height:100%
}
#container {
min-height:100%
height:100% /* min-heightに対応していないブラウザ用 */
}
body > #container{
height: auto /* containerの要素全体の高さがbodyタグより大きくなった場合 */
}

/* あるいは以下 */

html,body{
height:100%
}
#container{
height: auto;
min-height:100%;
}

/* 従来 */

html, body{

height:100%

}

#container {

min-height:100%

height:100% /* min-heightに対応していないブラウザ用 */

}

body > #container{

height: auto /* containerの要素全体の高さがbodyタグより大きくなった場合 */

}

/* あるいは以下 */

html,body{

height:100%

}

#container{

height: auto;

min-height: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で調整する。

・スマホの向きに合わせた文字サイズの自動調整をしない

body{
-webkit-text-size-adjust: 100%;
}

body{

-webkit-text-size-adjust: 100%;

}

・フェードイン

body {
animation: fadeIn 4s ease 0s 1 normal;
-webkit-animation: fadeIn 4s ease 0s 1 normal;
}

@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

html {
visibility: hidden;
}

html.wf-active,
html.loading-delay {
visibility: visible;
}

body {

animation: fadeIn 4s ease 0s 1 normal;

-webkit-animation: fadeIn 4s ease 0s 1 normal;

}

@keyframes fadeIn {

0% {opacity: 0}

100% {opacity: 1}

}

@-webkit-keyframes fadeIn {

0% {opacity: 0}

100% {opacity: 1}

}

html {

visibility: hidden;

}

html.wf-active,

html.loading-delay {

visibility: visible;

}

・iOSのinputリセット

input,select{
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
}

select {
background-image: url(./arrow.svg);
background-repeat: no-repeat;
background-size: 12px 10px;
background-position: right 10px center;
}

input,select{

appearance: none;

-moz-appearance: none;

-webkit-appearance: none;

}

select {

background-image: url(./arrow.svg);

background-repeat: no-repeat;

background-size: 12px 10px;

background-position: right 10px center;

}