Bootstrapカラムのマージン（余白・ガター）を好きなサイズに調整するCSSの具体例 | 隣IT
Bootstrap連載、前回はBootstrapカラム間のマージン（余白・ガター）の仕組みについて解説しましたが、今回はデフォルトのマージンを好きなサイズに調整する方法についてご紹介したいと思います。 前回のおさらいになりますが、Bootstrapの余白（ガター）は、以下の様な仕組みでできています。 ● col自体にmarginは指定されていない ● カラム間のマージン（余白・ガター）はpaddingで指定されている。しかも左右のcolのpaddingが合体している ● カラム間のマージンは15px+15pxの30pxである ※マージンと表現するとCSSのmarginと混同してややこしいので、以下カラム間の隙間を「ガター」としますね。 Bootstrapのカラム間のガターはデフォルトで30pxとなりますが、これをサイズ変更したり余白自体をなくしてしまうには、自作のCSSを追加してスタイルを
Bootstrapカラム間のマージン(余白・ガター)の仕組みをマスターする | 隣IT
３カラムレイアウトを枠付きで見てみよう まずはそれぞれの要素の配置をはっきりさせるため、上記の画像３カラムレイアウトのブロック要素(divとpタグ）に枠をつけてみました。 上記部分のコードは以下です。 <div class="container"> <div class="row"> <div class="col-md-4"> <h2>３カラム見出しテキスト</h2> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </div> <div class="col-md-4"> <h2>３カラム見出しテキスト</h2> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </div> <div class="col-md-4"> <h2>３カラム見出
CSSのみで縦横比を保つレスポンシブなグリッド - ./ringo
あまり情報が見つからなかったので、同僚の方がやっていたものを参考に。 グリッドのデザインなんかで縦と横の比率を変えたくないことがたまにあって、 その場合、window.resizeのイベントで高さを再計算したりしていた。 それがちょっといやだったのでCSSのみでどうにか実現してみた。 http://jsfiddle.net/w3jPr/1/ ウィンドウサイズを変えるとそのままの比率で大きさが変わるようになった。 仕組み 全体の高さの指定 グリッドのエリアの高さはpadding-topで指定します。 padding-topはwidthを基準にするので、 幅が変わると比率の変化なしで大きさが変わります。 グリッドの大きさの指定 グリッド個別の大きさの指定はpositon: absoluteで行います。 top、left、right、bottomをそれぞれ記述して、幅と高さを指定します。 これも
レスポンシブWebデザインでハマりがちな%指定 │ Design Spice
レスポンシブWebデザインでは要素を可変にするために数値を%で指定することが多いですが、%指定の仕様を理解してないとハマることがあります。自分もそのような経験があったので備忘録としてまとめました。 要素の幅と高さの%指定 レスポンシブWebデザインのように、ある要素の幅を一定の比率を保ったまま可変するようにするには、通常、値を%で指定します。この時の値は、 求める要素の幅÷親要素のコンテンツ幅×100% の式で求められます。 例えば求める要素の幅が20px、親要素のコンテンツ幅が200pxの場合は、10%となります。 また、ここで言うコンテンツ幅とはmargin、padding、borderを含まない幅です。 同様に高さを%で指定する場合は、 求める要素の高さ÷親要素のコンテンツの高さ×100% となります。 marginとpaddingの%指定 左右のmargin、paddingを%で指
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
