slickに表示したものをスマホサイズで表示できるようにした

4781 ワード
slick CSS レスポンシブ CSS テキストリンク

はじめに

本記事では、slickで表示したものをスマホサイズにしたので、
備忘録として記述します。

前提

slickで以下の写真のようなものが既に作成できていること。
できていなければ以下を参照ください。

　詳細

マック上だとこんな感じです。

これを縮小してみると

ちょっとかわいそうな感じになりました。

ので、CSSで調整していきます。

スマホはだいたいwidthが500pxが最大と学習したので、
以下のようなコードを記述しました。

内容としては、オレンジのところのmarginを狭くしています。
そうすることで、次の投稿との距離が短くなり、スマホに対応した場合でも、
無事に対応することができました。
オレンジのところは、以下のコードのmarginです。

.ranks-img-content {
  padding: 5vh;
  border: 10px solid #ff5511;
  border-radius: 240px 15px 185px 15px / 15px 200px 15px 185px;
  margin: 5px 150px;
  background-color: rgba(255, 255, 255, 0.692);
}

これを

// スマホ対応
@media (max-width: 500px) {
  .ranks-img-content {
    padding: 5vh;
    border: 10px solid #ff5511;
    border-radius: 240px 15px 185px 15px / 15px 200px 15px 185px;
    margin: 5px 0px;
    background-color: rgba(255, 255, 255, 0.692);
  }
}

こんな感じで、marginの横幅を0にしてみたところ、無事に、スマホ対応することができました。
その他は、画像小さくしたりと微修正はしています。

以上です。

終わりに

レスポンシブはうまく行けば楽しいですが、
悩んでしまうとなかなか先にいけないですね。

というか、アプリケーション作成段階から、
このようなことを考えながら作成するべきだと、反省しています。

次の新しいアプリケーションを作成する機会があれば、
CSSを書く際には、レスポンシブを意識しながら作成したいと思います。

明日も頑張ります！！