0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

はじめに

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

前提

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

 詳細

Image from Gyazo

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

これを縮小してみると

Image from Gyazo

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

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

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

Image from Gyazo

内容としては、オレンジのところの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にしてみたところ、無事に、スマホ対応することができました。
その他は、画像小さくしたりと微修正はしています。

Image from Gyazo

以上です。

終わりに

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

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

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

明日も頑張ります!!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?