소개

본 기사에서는, 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를 작성할 때는 반응을 의식하면서 만들고 싶습니다.

내일도 최선을 다하겠습니다! !