質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.33%

bootstrapのclass[row]は何で必要なんですか? paddingが不要すぎる気がします。

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 21K+

makoto-n

score 394

何か特別な意味合いでもあるのですか?
画像のように余分なpaddingをとられるのが嫌なので、
bootstrapのpaddingを消したり、あえて書かなかったりしています。

bootstrap

詳しいかた教えてください。


今回作りたいテーマはこんなものです。
これはだいぶ前に製作したHTMLのサンプルなのですが、これをグリッドシステムを用いてwordpressにしたいです。
ですが、rowを使用することで綺麗な直線にならず、自分のやり方がおかしいのか、これでrowを使うべきでないのか判断がつかないので質問させていただきました。
サンプル

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+4

Bootstrap3を使っている前提で話をします。

グリッドシステム概念図
可変幅だと説明しづらいので固定幅グリッドで説明しますが、例えば

・コンテナサイズ978px、12グリッド
・ガター15px(左右で30px)
・カラム幅54px

という仕様でグリッドシステムを使った場合、1グリッドは左右ガターを含めて84pxであり、
84×12= 1008px となります。
1グリッドには、左右両方の固定paddingサイズが含まれていますので、
実際にコンテンツが入る領域は左右15pxずつのガターを除いて978pxとなり、コンテナサイズと一致します。
しかしボックス全体としては左右両端のガターサイズ分が想定しているコンテナサイズよりはみ出している状態となっています。

Bootstrapに限らず、グリッドシステムというものはこの余分な左右のガターをどう処理するか、
ということを考える必要があるのです。
そしてBootstrapにおいて.rowはこの左右両端の余分なガターをネガティブマージンで相殺する役割を持っています。

Bootstrapのグリッド幅は可変サイズ(%単位のwidth)ですが、ガターサイズは15pxと常に固定です。
(box-sizing:border-box;でpadding込みのwidthにしています)
.rowで左右のガターを相殺しないで使用すると、デザイン的に横978pxを前提として各カラムの比率を
決めたいのに、横1008pxを前提とした比率で計算したことになってしまい、
左右のガター領域の分だけ微妙に計算が狂ってしまうのです。

その差は実際にはほんのわずかかもしれませんが、
緻密に計算されたデザインを再現する場合、表示されているグリッド幅が想定した計算と違う、
というのはなかなかデザイナーにとっては気持ちの悪いものなのです。

そんな感じですがいかがでしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/29 13:43

    .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    }

    ありがとうございます。
    のpaddingを打ち消すために必要であるということですか?
    少し専門的でわかりませんでした、、、。

    キャンセル

  • 2016/04/29 13:47

    そうですね。1〜12カラム全てに左右padding15pxがついていますが、これらのカラムを横に並べた時に、左端カラムの左paddingと右端カラムの右paddingの分が、システム的に余分なので、.rowにネガティブマージン(margin-left: -15px; margin-right:-15px;)をつけてその余分なpadding分のサイズを「なかったこと」にしている感じです。

    キャンセル

  • 2016/04/29 14:04

    ありがとうございます。

    キャンセル

0

bootstrapはブラウザの環境に対応して
クロスブラウジングの問題を解決して簡単で柔軟にサイトを具現してくれることですね。
bootstrapは格子システム(Gird System)と言うシステムを提供しています。

格子システムとは様々なブラウザ、バージョンが違うブラウザで違って見えるCssをnormalize、
つまり正常化するようにしてくれると言うシステムです
この話はどんなブラウザでも下記のようにレイアウトで接近するのができるのです

例)
[ 1 ] [ 1 ] [ 1 ] [ 1 ] [ 1 ] [ 1 ] [ 1 ] [ 1 ] [ 1 ] [ 1 ] [ 1 ] [ 1 ] 

[    2    ] [    2    ] [          4          ] [       3       ] [ 1 ]

[                6                ] [                6                ]

[                                  12                                 ]

                  [                 6               ]

この時サイトの行と列に接近するために必要なclassがclass[row],[span]です
これを活用して[row-fluid]などのclassでサイトのCssを操作することですね

私もまだ初心者で外国人なので間違ったり望む答えがないかもしれませんね

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/28 23:11

    ありがとうございます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.33%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る