@yuufuji0000 (yuu)posted at 2021-04-21

widthを設定してもブラウザで100%で表示される問題を解決したい

Q&A

HTML CSS Rails erb scss

widthを設定してもブラウザ上で100%で表示されてしまう

現在アプリケーションのレイアウトを作成しているのですが、CSSでwidthを設定してもブラウザで確認したところ、100%で表示されてしまいます。

コンソールでCSSのwidthを630pxに設定したところ、コンソールを使用して編集したwidthは650pxで表示されましたが、開発環境上で作成したwidthは表示されません。

レイアウトが崩れる原因やヒントをご指摘願えますでしょうか。

発生している問題・エラー

app/assets/stylesheets/upload.scss

#swiper-container {
  height: 450px;
  padding: 10px 0;
  overflow: hidden;
  background: #BBBBBB;
  position: relative;
}

.swiper-wrapper {
  width: 100%;
  height: 450px;
  overflow: hidden;
}

.swiper-slide {
  width: 630px;
  height: 450px;
  float: left;
  background: white;
  margin: 0 4px;
  z-index: 1;
}

.top-image {
  height: 260px;
  overflow: hidden;
}

app/views/upload/index.html.erb

<%= render "shared/header" %>

<div id="global-container">
  <div id="main-container">
    <div id="swiper-container">
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="top-image">
          </div>
        </div>
        <div class="swiper-slide">
          <div class="top-image">
          </div>
        </div>
        <div class="swiper-slide">
          <div class="top-image">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

レイアウト画像

ブラウザでは、.swiper-slideがheight, widhtが100%で表示されております。
ですが、開発環境のCSSではwidthを630pxで表示できるように記述していますがブラウザでは上記のように設定されてしまいます。

自分で試したこと

・コンソールを起動して、CSSを表示したい値にして記述してみたところしっかりレイアウトが分割されて表示されることがわかりました。開発環境上で再度設定してみたが、はやり100%の表示がされてしまう。
・表示させたい要素に対する親要素に問題があるかもしれないと思い、.swiper-wrapperの表記を確認したところ、この部分を変更するとレイアウト全体が崩れてしまうためこの部分が原因ではないと考えた。
・displayがインラインになっている可能性があると思い、CSSを確認してみたが、

で作成しているため、インライン要素になることはないと考えました。

2Answer

@yoshi389111 posted at 2021-04-21

スクリーンショットに出ている通り、部品として使用している swiper が適用しているスタイルシートが 100% になっているからだと思います。

swiper を使っている以上、該当の要素が 100% になるのは仕方がないのだと思います。

動作確認はしていませんが、外側の swiper-wrapper あるいは swiper-container の width を指定したらどうなるでしょうか？

0Like

@yuufuji0000 posted at 2021-04-22

ありがとうございます！

swiperを導入するとswiper-container以下の子要素はすべて100%の表示がされてしまうみたいです。

#swiper-container {
  height: 450px;
  width: 630px;
  padding: 10px 0;
  overflow: hidden;
  background: #BBBBBB;
  position: relative;
}

.swiper-wrapper {
  width: 630px;
  height: 450px;
  overflow: hidden;
  display: flex;
}

.swiper-slide {
  width: 630px;
  height: 450px;
  float: left;
  background: white;
  margin: 0 4px;
  z-index: 1;
}

.top-image {
  height: 260px;
  overflow: hidden;
  background-color: bisque;
}

.projects-detail {
  height: calc(450px - 260px);
  padding: 18px 20px 20px;
  background-color: lightblue;
}

.projects-tags {
  display: flex;
  text-align: center;
}

.projects-tag {
  text-align: center;
  font-weight: 600;
  box-sizing: border-box;

  &__normal {
    height: 20px;
    line-height: 20px;
    border-radius: 11px;
    font-size: 12px;
    padding: 0 12px;
    border: 2px solid;
  }
}

swiperに関するサイズを、width:630px、height:450pxに設定して試してみたところ、slider3つのうち一つしか読み込まれない状態になりました。
おそらく、sliderを縦横が上記の幅で3つ読み込もうとしているのではと考えております。

また、ブラウザの横幅が630px以内だと、ヘッダーが横幅いっぱいで表示されず収縮して表示されてしまいました。

挙動としては下記のようになっています。

また、実装のイメージとしては、下記のように3つのスライドが横から設定した幅でスライドできるように実装したいと考えております。

・スライドが真ん中にある状態
・横から同じ縦横が同じ幅でスライドしてくる
・< >をクリックすると要素がスライドしてくる