kdcsライブラリー

divタグで囲った画像の下部に出る微妙な余白を無くす方法。

画像はインライン要素なのでベースラインをvertical-alignをbottom（下端揃え）にすると下の余白が無くなる
vertical-align: bottom;

img{
margin: 0;
padding: 0;
vertical-align: bottom;
}

または、display: block;

img{
margin: 0;
padding: 0;
display: block;
}

display:blockで画像をブロック要素にするとtext-alignでの中央寄せが効かなくなるので中央寄せしたい時はmargin: 0 auto;を指定する必要がある。

レスポンシブWebデザインで画像を扱う際にCSSのメディアクエリーを使用するのと同じ要領で表示させる画像を指定できる。

    <picture>
      <source media="(max-width: 768px)" srcset="./images/img-sp.gif">
      <img src="./images/img-pc.gif" alt="">
    </picture>

pictureタグで囲い、sourceタグのmedia属性で切り替えポイントを指定する。
上記の場合、横幅768px以下はimg-sp.gifを表示し、その他はimg-pc.gifを表示。

img要素の後に書かれたsource要素はすべて無視されるため最後にimgタグで画像を指定する。

ブラウザがpicture要素をサポートしていない場合は自動的にimg要素の画像が表示される。
※IEは対応していない

前記事の「疑似要素「::before」を利用した画像固定」はスマホでも使えるが、1か所限定。
1枚の画像をずっと固定したままで動きがない。

今回試したのは「position: sticky;」スティッキー
例によってIEでは機能しないがスマホで使える。

Safariやios対策 -webkit-sticky display: blockまたはflexは必須
css

.inner { max-width: 1080px; margin: 0 auto; }

#content {
    margin: 0 auto;
    text-align: center;
}

.block {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
}
p {
  display: inline-block;
  font-size: 60px;
  font-family: 'Great Vibes', cursive;
  padding: 0;
  margin: 0;
}
img {
  width: 100%;
  height: auto;
}
.block-one {
  background: #212E32;
  color: #fff;
  z-index: 500;
}
.block-two {
  background: #85937A;
  z-index: 400;
}
.block-three {
  background: #212E32;
  color: #fff;
  z-index: 300;
}
.block-four {
  background: #85937A;
  z-index: 200;
}
.block-five {
  background: #212E32;
  color: #fff;
  z-index: 100;
}

html

<section>
<div id="content">
<div id="contentArea" class="inner clearfix">

  <div class="block block-one">
    <p>One</p>
  </div>
  <div class="block block-two">
    <div>Two<br><img src="./images/sample.jpg"></div>
  </div>
  <div class="block block-three">
    <p>Three</p>
  </div>
  <div class="block block-four">
    <p>Four</p>
  </div>
  <div class="block block-five">
    <p>Five</p>
  </div>

</div><!--/contentArea-->
</div><!--/content-->
</section>

背景固定のパララックス効果は「background-attachment:fixed;background-size: cover」で背景画像を固定することで実装できるが、iPhoneなどios機ではこの方法が使えない。そこで背景画像固定用のブロック要素を用意してブロック要素自体を固定するという手段。
固定する要素には疑似要素「::before」を使い、z-indexで位置を下位にする。

div.hoge::before{
  display:block;
  content:"";
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100vh;
  background:url(./images/bg-image.jpg) center no-repeat;
  background-size:cover;
}

slick.jsを使ったスライドショーで多いのが一つの画像が移動もしくはフェードで切り替わるもの
オプションの設定で「止まることなく流れ続けるスライドショー」にできる

以下、オプション設定

$('#slick-slide').slick({
    arrows: false,
    autoplay: true,
    autoplaySpeed: 0,
    cssEase: 'linear',
    speed: 8000,
    slidesToShow: 4,
    slidesToScroll: 1,
});

ポイントは「autoplayspeedを0にする」「cssEaseをlinearにする」