Q&A
再現しやすいHTMLを提示いただけませんか？
お世話になります。
CSSのレイアウトについて質問させていただきます。
些細なことでも構いません。ご助言いただきたく何卒よろしくお願いいたします。
###前提
CSSの経験はほとんどありません。
CSSフレームワークのMaterializeを使用して、WordpressのWEBサイトを作成しています。
###目標
レスポンシブなグリッドデザインを用いて、以下のようなレイアウトを構築したいです。
スクリーンの幅に合わせて、一行あたりの要素数を変更させ、かつ、テキスト量の異なるカードの高さを統一したいです。
###現実
まず、レスポンシブを有効にするために先の図のようにクラスを定義しましたが、次のようになりました。
目標との差異は、次のとおりです。
・ カードの高さが統一されない。
・ 余白があるとそこを埋めるように詰まってしまう。
###試したこと ＃１
（適切な作法かわかりませんが）列ブロックの高さを統一するために、行ブロックに「display:flex;」を追加するクラスを新たに定義しました。
追加したCSSは以下のとおりです。
css
1.flex { 2 display:-webkit-box; 3 display:-moz-box; 4 display:-ms-box; 5 display:-webkit-flexbox; 6 display:-moz-flexbox; 7 display:-ms-flexbox; 8 display:-webkit-flex; 9 display:-moz-flex; 10 display:-ms-flex; 11 display:flex; 12 -webkit-box-lines:multiple; 13 -moz-box-lines:multiple; 14 -webkit-flex-wrap:wrap; 15 -moz-flex-wrap:wrap; 16 -ms-flex-wrap:wrap; 17 flex-wrap:wrap; 18 flex-direction:row; 19}
結果は、次の図のようになりました。
この段階での目標との差異は、次のとおりとなりました。
・ 列ブロックの高さは統一できたが、カードの高さはバラバラで統一されていない。
・ （materialize.min.cssで定義された）「margin-left:auto;」によって、埋まりきらない行は、列ブロックの左側に余白ができてしまう。（例えば、四分割のケースで、５枚のカードの場合は、⑤が⑥の位置に表示されることになります）
###試したこと ＃2
「margin-left:auto;」を打ち消すために「margin-left:0px;」を追加するクラスを作成しました。
CSSは次のとおりです。
css
1.flex .col.margin-clear{ 2 margin-left : 0px; 3}
この結果、下の図に示すようにレイアウトについては、目標と同じ配置にすることができました。
この時点で、目標との差異は、次のとおりとなりました。
・ カードの高さが統一されていない
###質問
カードの高さを統一する方法があればご教示ください。
自分の試したことが、作法的に良くない場合や、別の方法があれば、なんなりとご指摘ください。
###補足事項
MaterializeはCDNで利用しています。
次の環境で確認しております。
OS X El Capitan 10.11.6
FireFox 50.1.0
Chrome 55.0.2883.95 (64-bit)
実際のHTML（WordPressのDBから取得し繰り返し出力するカード）はPHPで書いていますので、再現用に一部抜粋したHTMLを以下に記載します。（Materialize以外に追加したCSSやカード内のテキスト等は必要に応じて改変してください。）
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>title</title> 6 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css"> 7 <style type="text/css"> 8 .flex { 9 display:-webkit-box; 10 display:-moz-box; 11 display:-ms-box; 12 display:-webkit-flexbox; 13 display:-moz-flexbox; 14 display:-ms-flexbox; 15 display:-webkit-flex; 16 display:-moz-flex; 17 display:-ms-flex; 18 display:flex; 19 -webkit-box-lines:multiple; 20 -moz-box-lines:multiple; 21 -webkit-flex-wrap:wrap; 22 -moz-flex-wrap:wrap; 23 -ms-flex-wrap:wrap; 24 flex-wrap:wrap; 25 flex-direction:row; 26 } 27 .flex .col.margin-clear{ 28 margin-left : 0px; 29 } 30 </style> 31 </head> 32 </body> 33 <div class="container"> 34 <div class="row flex"> 35 <div class="col s12 m4 l3 margin-clear"> 36 <div class="card"> 37 <div class="card-image"> 38 <img src="url/img"> 39 <span class="card-title"></span> 40 </div> 41 <div class="card-content"> 42 card content #1<br> 43 card content #1<br> 44 card content #1<br> 45 card content #1<br> 46 card content #1<br> 47 card content #1<br> 48 </div> 49 <div class="card-action"> 50 <a href="ulr/article" class="btn"> 51 Detail 52 </a> 53 </div> 54 </div> 55 </div> 56 <div class="col s12 m4 l3 margin-clear"> 57 <div class="card"> 58 <div class="card-image"> 59 <img src="url/img"> 60 <span class="card-title"></span> 61 </div> 62 <div class="card-content"> 63 card content #2<br> 64 card content #2<br> 65 card content #2<br> 66 </div> 67 <div class="card-action"> 68 <a href="ulr/article" class="btn"> 69 Detail 70 </a> 71 </div> 72 </div> 73 </div> 74 <div class="col s12 m4 l3 margin-clear"> 75 <div class="card"> 76 <div class="card-image"> 77 <img src="url/img"> 78 <span class="card-title"></span> 79 </div> 80 <div class="card-content"> 81 card content #3 82 </div> 83 <div class="card-action"> 84 <a href="ulr/article" class="btn"> 85 Detail 86 </a> 87 </div> 88 </div> 89 </div> 90 <div class="col s12 m4 l3 margin-clear"> 91 <div class="card"> 92 <div class="card-image"> 93 <img src="url/img"> 94 <span class="card-title"></span> 95 </div> 96 <div class="card-content"> 97 card content #4 98 </div> 99 <div class="card-action"> 100 <a href="ulr/article" class="btn"> 101 Detail 102 </a> 103 </div> 104 </div> 105 </div> 106 <div class="col s12 m4 l3 margin-clear"> 107 <div class="card"> 108 <div class="card-image"> 109 <img src="url/img"> 110 <span class="card-title"></span> 111 </div> 112 <div class="card-content"> 113 card content #5 114 </div> 115 <div class="card-action"> 116 <a href="ulr/article" class="btn"> 117 Detail 118 </a> 119 </div> 120 </div> 121 </div> 122 <div class="col s12 m4 l3 margin-clear"> 123 <div class="card"> 124 <div class="card-image"> 125 <img src="url/img"> 126 <span class="card-title"></span> 127 </div> 128 <div class="card-content"> 129 card content #6 130 </div> 131 <div class="card-action"> 132 <a href="ulr/article" class="btn"> 133 Detail 134 </a> 135 </div> 136 </div> 137 </div> 138 </div> 139 </div> 140 </body> 141</html>
回答1件
0
ベストアンサー
とりあえずこういう形かなと。
CSS
1.card { 2 box-sizing: border-box; 3 height: calc(100% - 1.5rem); /* margin の .5rem + 1rem を引いている */ 4 padding-bottom: 76px; /* ボタン分浮かす */ 5} 6.card .card-action { 7 bottom: 0; 8 position: absolute; 9 width: 100%; 10} 11```**動くサンプル：**[https://jsfiddle.net/j8750o8s/1/show/](https://jsfiddle.net/j8750o8s/1/show/) （ [https://jsfiddle.net/j8750o8s/1/](https://jsfiddle.net/j8750o8s/1/) ）
投稿2017/01/27 14:35
総合スコア69407
早速のご回答、誠にありがとうございます。まさに、目的の表示が実現できました。
（独学のため）理解をきちんと深めておきたいので、お手数でなければ、私の解釈が間違っていないか確認させてください。
【.card について】
「box-sizing : border-box;」
padding, borderの幅・高さを含めたサイズ指定を可能にする
「height : calc(100%)-1.5rem);」
Materializeの「.card」で定義している「margin: 0.5rem 0 1rem 0;」を高さから減算
このとき、100%は親要素を基準にした割合になっているのでしょうか？（親要素に対して明示的に高さを指定していないので、こういう指定の仕方が考えられませんでした）
「padding-bottom : 76px;」
「.btn」の高さ36px、「.card-action」のpadding-topの20px と padding-bottom の 20px を合算した76pxを「.card」の下側の「.card-action」分の余白を確保
【.card .card-action について】
「bottom : 0;
position: absolute;」
親要素を基準にして、bottomとの距離を0にする
「position: absolute;
width: 100%;」
親要素を基準にして、100%の幅を確保する
> padding, borderの幅・高さを含めたサイズ指定を可能にする
その通りです。width/heightの[100%」は高さを持つ親要素を基準になるため、padding の値に左右されないように指定してあります。
> （親要素に対して明示的に高さを指定していないので、こういう指定の仕方が考えられませんでした）
仕様のどこという提示はぱっとできませんが、Flex は明示しなくても高さを持っているはずです。
> 76px
> 親要素を基準にして、100%の幅を確保する
その通りです。
> 親要素を基準にして、bottomとの距離を0にする
position: absolute;やposition: relative;など起点になる親要素の中の一番近い要素を基準にします。
ご教示、誠にありがとうございますm(_ _ )m
大変勉強になりました。
あなたの回答
tips
プレビュー
