あとちょっとで、理想の形になるのに！とか、どうしてスマホだけ、動いてくれないの。。。
という経験はこの業界で働いていれば、絶対出てきますよね。
そこで、コーディングに関するちょっとした小ネタをまとめてみました。

背景の固定、スマホだと効かない

スマホだと「background-attachment: fixed」が効かないのです。
この便利な機能が効かないのです。
実装してみてびっくりました。
参考：Can I use

Can I useを見る限りでは、iOSは使えるじゃないか！って思うのですが「background-size: cover」を使っているときの「background-attachment:fixed」はだめみたいです。
そこで対応策としては、スマホだけ、::Before要素をつかって画像を設置してしまうっていう方法です。
実際にはこうなります。

//scss
#background{
  background: #fff url(image/bgimg.jpg) left top / cover no-repeat fixed;
  @media screen and (max-width: 48em){
    background : none;
    &::before{
        content:"";
        display:block;
        position:fixed;
        top:0;
        left:0;
        z-index:-1;
        width:100%;
        height:100vh;
        background: #fff url(image/bgimg.jpg) 0 0 no-repeat;
        -webkit-background-size:cover;/*Android4*/ 
    }
  }
}

PC用は普通に背景で指定しておきます。
スマホ用に、一度、背景を表示しないようにして、before要素を作ります。
before要素に背景を指定し、beforeを画面いっぱいに広げて、画像を表示する。
ポジションで固定してあげれば問題なく表示されます。

ここでvhという単位が出てきましたがさてvhってなんじゃいってことですが、
vhはviewport heightってかんじでしょうか、ビューポートの高さの割合の単位だそうです。
100vhで画面いっぱいのサイズということになります。
もちろん横幅もvwという単位ははあります。
でも基本的は%で行けるんじゃない？って思ったりしますが、
%だと親要素に左右されてしまいます。なので左右されない絶対値で指定したい場合はvwの方がいいのでしょうね。
しかし、この単位はは、android4.3以前が使えないようです。
Can I use
※android4.3以前は要注意ですね。

// css
.test01{
  background: #fff url(image/bgimg.jpg) left top / cover no-repeat fixed;
}
.test02{
  background-attachment: fixed;
  background-color: #fff;
  background-image: url(image/bgimg.jpg);
  background-position: left top;
  background-repeat: no-repeat;
  background-size: cover;
}

あと、背景の指定で、上記のような指定をしていることがあります。
これ一緒の意味なんですが、まとめて書くことをショートハンドというのですね。
聞いたことはあったのですが、いつも忘れてしまうのでメモです。
ちなみにポジションのあとは「/」を挟んで書くことが大事だそうです。
これがないとちゃんと効かないみたいです。

inline-block、や画像を並べた時、改行でできる「隙間」をなくす。

要素をfloatで横並びにしたときは隙間はできませんが、inline-blockで横並びに変えた時や画像を複数配置したけども、ソースを見やすくするために、改行をした場合にできる隙間がありますよね。
あれって、すごく鬱陶しい時ありますよね。
あの隙間、ちょっとCSSを書いてあげるだけで、消えちゃいます。

// html
<ul class="nav">
 <li>menu01</li>
 <li>menu02</li>
 <li>menu03</li>
</ul>

// scss
.nav{
  display: inline-block;
  letter-spacing: -0.4em;
  li{
    letter-specing: normal;
  }
}

文字間を一旦狭めてあと、子要素で行間を戻してあげるだけ、単純な指定だけで、inline-blockの隙間があくという呪縛からは逃れることができます。

CSSのみでアコーディオン

:hoverをを使って、プルダウンとかはよくやるようになりました。
でも、アコーディオン等のクリック判定で動作を変えることがCSSのみで、できるのです。
ざっくり説明すると、input[type=”checkbox”]をつかってチェック有りで表示、無しで非表示にするというもの。
これ、考えた人はすごいね。かなりの頭が柔軟なんだろうなと思います。

さて、実際のコードはこうなります。

// html
<div class="accordion">
 <input id="ac1" name="accordion" type="checkbox">
 <label for="ac1">ここを押します。</label>
 
 <div>
 <p>ここが表示されます。ここが表示されます。ここが表示されます。ここが表示されます。ここが表示されます。ここが表示されます。ここが表示されます。ここが表示されます。ここが表示されます。ここが表示されます。ここが表示されます。ここが表示されます。ここが表示されます。ここが表示されます。ここが表示されます。ここが表示されます。</p>
 </div>
</div>

// scss
*{ box-sizing: border-box; }

.accordion{
	width: 500px;
	margin: 0 auto;
	overflow: hidden;
	
	label{
		display: block;
		cursor: pointer;
		
		padding: 10px;
		border-bottom: 1px solid #ddd;
		position: relative;
    margin-bottom: 0;
		
		&::after {
			position: absolute;
			top: 50%;
			right: 10px;
			display: block;
			content: '';
			width: 8px;
			height: 8px;
			margin-top: -7px;
			border-top: 1px solid #888;
			border-right: 1px solid #888;
			-webkit-transform: rotate(135deg);
			transform: rotate(135deg);
		}
	}
  
	div {
		position: relative;
		max-height: 0px;
		transition: max-height .25s ease-in-out;
		overflow: hidden;
    	p{
			padding: 10px;
		}
	}
	
	input{
		display: none;
		&:checked{
			& + label::after {
				margin-top: -3px;
				-webkit-transform: rotate(-45deg);
				transform: rotate(-45deg);
			}
			
			& ~ div {
        max-height: 20em;
        border-bottom: 1px solid #ddd;
			}
		}
	}
}

こんな感じです。
デモは以下においておきます。

See the Pen VjbLgJ by msys (@msys) on CodePen.

ここの注意点として、height: auto;はtransitionでアニメーションしない！ということ、ですのでmax-heightをつかって実際に中に入っている要素よりも大きめの数字を入れておきます。
そうすることによって、アニメーションするようになります。問題はmax-heightの値を大きくし過ぎると、実際max値のそこまで広がっているので、閉じるときにもっさりしちゃいます。

まとめ

いくつかの小ネタを書きましたが、また小ネタがでたら書きます。
こういう小ネタってその都度探して、見つけて実装し、また探してというムダ時間ができていたのですが、まとめてしまえばなんのそのです。
小ネタブログが溜まったら、小ネタ集一覧でもつくりますかね。
それではまた、小ネタがあつまったらば！