Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@maru_katy

HTML,CSS勉強メモ#26 〜レイアウトが崩れる〜

More than 3 years have passed since last update.

引き続きダウンロードしたテンプレートをいじっています。
こちらのテンプレートはほぼBootstrapで書かれているのですが、何故かウチのPCでは一部のレイアウトが崩れて?というか入りきらずに切れてしまっています。
で、いま原因を探しています。

メモ

問題の部分

    <!--Grid Row-->
    <div class="row-grid hidden-md-down">
        <div class="container container-full">
            <div class="row">
                <div class="grid col-md-4 pink">
                    <h2>Design Quality</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
                    <br/>
                    <a href="#">Find Out More →</a>
                </div>
                <div class="grid col-md-4 purple">
                    <h2>Design Quality</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
                    <br/>
                    <a href="#">Find Out More →</a>
                </div>
                <div class="grid col-md-4 image01">
                    <h2>Design Quality</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
                    <br/>
                    <a href="#">Find Out More →</a>
                </div>
                <div class="grid col-md-4 light-purple">
                    <h2>Design Quality</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
                    <br/>
                    <a href="#">Find Out More →</a>
                </div>
            </div>
            <div class="row">
                <div class="grid col-md-8 image02">
                    <h2>Design Quality</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
                    <br/>
                    <a href="#">Find Out More →</a>
                </div>
                <div class="grid col-md-4 green">
                    <h2>Design Quality</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
                    <br/>
                    <a href="#">Find Out More →</a>
                </div>
                <div class="grid col-md-4 image01">
                    <h2>Design Quality</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
                    <br/>
                    <a href="#">Find Out More →</a>
                </div>
            </div>
        </div>
    </div>

この部分、何故か左に空白ができ、おかげではみ出してしまって各行の最後のカラムが切れてしまっています。

合計カラム数が16になってる

Bootstrapでは'col-*-'の合計のカラム数は12のはずですが、ここでは16になってます。
てことで12になるように変えてみましたが、はみ出す事とは関係なかったようです。
やはり問題は左の余白のようです。

デベロッパーツールを見てみた

Chromeのデベロッパーツールで確認してみましたが、どうやら1824pxぐらいまでは綺麗に収まるようです。
これ以下になると左の余白を保持するためにどんどん右側が切れていってしまうようです。

各要素の幅
1440pxで各要素の幅を計算してみたところ、次のようになっていました。

class width
row-grit 1440px
container 1926px
row 1533px

そりゃ切れるは・・・

  • container-full

    • 2つ目のdiv要素についてるclass="container container-full"ですが、 このcontainer-fullのスタイルにmax-width:none;が付いています。 切れてしまうのはこのせいではないかと思うのですが、これを消すと今度は横長のコンテンツが縦長になってしまってカッコ悪いです。
  • 謎のpadding

    • デベロッパーツールのStylesで見ると、<div class="container container-full">の部分の最後、 element.stylepadding:0 211.5px;というのがついています。 縦長になってしまうのはこいつのせいのようです。 このテンプレートはJavaScriptはParallaxのしか使っていないようなんですが・・・このpaddingがどこでついているのか探してみようと思います。 Chromeのデベロッパーツールはまだ使いこなせていないですけど、それでもとっても便利ですね! あとはこのelement.styleの出処までわかったらとても助かりますけど・・・やり方あるのかな・・

なんとなく原因は分かってきましたけど、これにするとMAXの2560pxで見たときにこの部分のコンテンツがチマってしちゃうんでなんかなって感じです。
理想はそれぞれで適切な大きさにできることだと思うので、原因だけわかったらそっちの理想型にできるように試行錯誤してみようと思います。

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?