HTML・レイアウトの操作：
カラムレイアウトを構築
親Nodeと、その中にある複数の子Nodeという構成に対してカラムレイアウトを生成。
生成したカラムをリセット(初期化)するオプションもある。
String1
カラム要素として使用するclass値を渡す
Number
カラム数を数値で指定 省略するとリセット(カラムを破棄)する。これを省略する場合は次のString2も省略する。
String2
横方向の間隔と縦方向の間隔を半角スペースで区切った文字列で渡す
- ※横方向の間隔は、指定カラム数で親Nodeの横幅内に収まりきらない場合に、class要素の横幅を自動調整する際の計算に使用する。
- ※横方向の単位は px か % ・ 縦方向の単位は px のみ
- 例）横幅の自動調整アリ="3% 20px" ・ 横幅の自動調整ナシ="20px" ←縦方向のみ指定
●必須引数 ●オプション引数(省略可能)
記述例
$makeColumns('newsbox', 3, '20px 20px')
$makeColumns('newsbox', 3, '15px')
$makeColumns('newsbox')
注意点
指定したClassは、可能ならCSSで設定した横幅のままカラム配置するが、親Nodeの横幅内に指定したカラム数で収まらない場合には、第3引数の設定に従って❶横幅を自動調整するか、❷カラム数を減らす処理を行う。
指定したClassは「position: absolute」に設定される。
指定したClassの親Nodeの position が未設定の場合には「position: relative」に設定される。また、height は自動調整される。設定されている padding は考慮される。
この関数は、繰り返し実行されても問題ない。
動作サンプル
【sample1】3カラムを生成。親Nodeの横幅に余裕があるので、横方向の間隔指定「20px」は適用されない。
親NodeのPaddingも考慮してレイアウトされる。
❶sample_box1：カラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテム。
❷sample_box1：カラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテム。
❸sample_box1：カラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテム。
❹sample_box1：カラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテム。
❺sample_box1：カラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテム。
❻sample_box1：カラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテム。
❼sample_box1：カラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテム。
HTML :
<div id="columns1">
<div class="sample_box1">❶–––</div>
<div class="sample_box1">❷–––</div>
：
</div>
Sass :
div.sample_box1 {
width: 270px;
}
Javascript :
$makeColumns('sample_box1',3,'20px 25px');
$makeColumns('sample_box1'); //リセット
2カラムを生成。親Nodeの横幅に余裕があるので、横方向の間隔指定「15px」は適用されない。
親NodeのPaddingも考慮してレイアウトされる。
❶sample_box1：カラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテム。
❷sample_box1：カラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテム。
❸sample_box1：カラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテム。
❹sample_box1：カラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテム。
❺sample_box1：カラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテム。
❻sample_box1：カラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテム。
HTML :
<div id="columns1">
<div class="sample_box1">❶–––</div>
<div class="sample_box1">❷–––</div>
：
</div>
Sass :
div.sample_box1 {
width: 142px;
}
Javascript :
$makeColumns('sample_box1',2,'15px 15px');
$makeColumns('sample_box1'); //リセット
【sample2】4カラムを生成。指定classにCSSで設定されたwidthのままでは指定カラム数に入りきらないので、classの横幅を自動調整。
❶sample_box2：カラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテム。
❷sample_box2：カラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテム。
❸sample_box2：カラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテム。
❹sample_box2：カラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテム。
❺sample_box2：カラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテム。
❻sample_box2：カラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテム。
❼sample_box2：カラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテム。
❽sample_box2：カラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテム。
HTML :
<div id="columns2">
<div class="sample_box2">❶–––</div>
<div class="sample_box2">❷–––</div>
：
</div>
Sass :
div.sample_box2 {
width: 290px;
}
Javascript :
$makeColumns('sample_box2',4,'3% 20px');
$makeColumns('sample_box2'); //リセット
【sample3】4カラム指定だが、指定classにCSSで設定されたwidthのままでは指定カラム数に入りきらず、また、横幅自動調整もナシの設定なので、カラム数を少なく調整する処理となる。
❶sample_box3：カラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテム。
❷sample_box3：カラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテム。
❸sample_box3：カラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテム。
❹sample_box3：カラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテム。
HTML :
<div id="columns3">
<div class="sample_box3">❶–––</div>
<div class="sample_box3">❷–––</div>
：
</div>
Sass :
div.sample_box3 {
width: 430px;
}
Javascript :
$makeColumns('sample_box3',4,'20px');
$makeColumns('sample_box3'); //リセット
【sample4】3カラムを生成。親Nodeの幅が可変の設定となっているので、それに対応する使い方として、❶指定classのwidthを親Node幅に近い大きな数値にする。❷$makeColumns()の第3引数で縦横の間隔を指定し横幅の自動調整をONにする。この2つの対応で、任意のカラム数を構築可能。
ブラウザサイズが変更され、親Nodeの幅も変わる場合に対応するには、<body>の onresize で一旦リセットして再構築すれば問題ない。
❶sample_box4：カラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテム。
❷sample_box4：カラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテム。
❸sample_box4：カラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテム。
❹sample_box4：カラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテム。
❺sample_box4：カラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテムカラム生成関数のアイテム。
HTML :
<div id="columns4">
<div class="sample_box4">❶–––</div>
<div class="sample_box4">❷–––</div>
：
</div>
Sass :
div.sample_box4 {
width: 900px;
}
Javascript :
$makeColumns('sample_box4',3,'30px 20px');
$makeColumns('sample_box4'); //リセット
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。