高さを揃える（レスポンシブ対応）
ブロック要素の高さを揃える機能が標準で実装されています。「ブロック要素の高さを揃える（autoheight）」とは違い、行ごとのに内包している要素の高さを揃えます。ウィンドウ幅が可変したときも動作し、レスポンシブ対応版になります。（Ver. 2.5.0より）
デフォルトの設定
この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。
//-------------
// autoHeightR
autoHeightRMark : '.js-autoheight-r',
autoHeightRConf : {
style : 'min-height',
element : '',
offset : 0,
parent : 'parent',
list : ''
},
autoHeightRArray: [
// {
// 'mark' : '',
// 'config' : {}
// }
],
| autoHeightRMark | 基準となる高さをもつ要素のクラス名を設定 |
|---|---|
| style | style:CSSで設定される高さ（height,min-height,max-height） |
| element | 高さのスタイルを適応するクラスを設定（空の場合はautoHeightRMarkの要素に適応）autoHeightRMark以下の要素を指定してください。 |
| offset | 設定した高さにオフセットを設定 |
| parent | 実際に並んでいる要素の親要素のクラスを設定（parentを設定した場合、autoHeightRMarkの親要素） |
| list | 実際に並んでいる要素のクラスを指定（指定してない場合、autoHeightRMarkの要素） |
設定のカスタマイズ
config.jsのデフォルトの設定からカスタマイズする場合、別途作成したJSファイルに下記のように記述します。
ACMS.Ready(function(){
ACMS.Config.autoHeightRMark = '.js-autoheight-r';
ACMS.Config.autoHeightRConf = {
style : 'min-height',
element : '',
offset : 0,
parent : 'parent',
list : ''
}
});
autoHeightRArrayでは配列を渡せるようになっているので、複数の設定を指定したいときに使います。
configにはautoHeightRConfの設定を指定できます。
class属性を.ah-markにし、parent、listなどの項目を追加する場合には以下のように記述します。
ACMS.Ready(function(){
ACMS.Config.autoHeightRArray = [
{
mark: '.ah-mark',
config: {
style: 'height',
element: '',
offset: 0,
parent: '.ah-container',
list: '.ah-list'
}
}
];
});
並んでいる要素間で高さを揃えたい場合
HTML
<div class="acms-grid">
<div class="js-autoheight-r acms-col-md-4" style="background:#ee8;">
<p style="height: 50px;">1つめの要素</p>
</div>
<div class="js-autoheight-r acms-col-md-4" style="background:#e8e;">
<p style="height: 25px;">2つめの要素</p>
</div>
<div class="js-autoheight-r acms-col-md-4" style="background:#8ee;">
<p style="height: 75px;">3つめの要素</p>
</div>
<div class="js-autoheight-r acms-col-md-4" style="background:#eee;">
<p style="height: 40px;">4つめの要素</p>
</div>
</div>
デモ
1つめの要素
2つめの要素
3つめの要素
4つめの要素
並んでいる要素の子要素の高さを基準に揃えたい場合
※設定を追加したい場合は、,で配列を繋いでもいいですが、pushを使って設定を追加することもできます。別のJavaScriptファイルから設定を追加したいときに便利です。
HTML
<script>
ACMS.Ready(function(){
ACMS.Config.autoHeightRArray.push({
mark: '.ah-mark',
config: {
style: 'height',
element: '',
offset: 0,
parent: '.ah-container',
list: '.ah-list'
}
});
});
</script>
<div class="ah-container acms-grid">
<div class="ah-list acms-col-md-4">
<div class="ah-mark" style="background:#ee8;">
<p style="height: 50px;">1つめの要素</p>
</div>
</div><!-- /.ah-list -->
<div class="ah-list acms-col-md-4">
<div class="ah-mark" style="background:#e8e;">
<p style="height: 25px;">2つめの要素</p>
</div>
</div>
<div class="ah-list acms-col-md-4">
<div class="ah-mark" style="background:#8ee;">
<p style="height: 75px;">3つめの要素</p>
</div>
</div>
<div class="ah-list acms-col-md-4">
<div class="ah-mark" style="background:#eee;">
<p style="height: 40px;">4つめの要素</p>
</div>
</div>
</div>
デモ
1つめの要素
2つめの要素
3つめの要素
4つめの要素
