[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
2カラムをやる方法はいろいろある。
2カラムで表示したい親の要素のスタイルに display:box; 群を入れる。子ではない点に注意。
<div style="width: 500px;display:box;display: -webkit-box;display: -moz-box;border: 2px solid green;">
<div style="width: 200px; background-color: #ffa0a0;">
左側の箱<br />
<br />
左側の箱
</div>
<div style="width: 300px; background-color: #a0a0ff;">
右側の箱<br />
右側の箱
</div>
</div>
高さが何もしなくてもそろってくれるのが魅力。しかし、幅はきっちり指定しないと自動設定になるので注意。例えば以下のようになる。
<div style="width: 500px;display:box;display: -webkit-box;display: -moz-box;border: 2px solid green;">
<div style="background-color: #ffa0a0;">
左側の箱<br />
<br />
左側の箱
</div>
<div style="background-color: #a0a0ff;">
右側の箱<br />
右側の箱
</div>
</div>
<div style="width: 500px; border: 2px solid green;"> <div style="display: inline-block; background-color: #ffa0a0;">左側の箱</div> <div style="display: inline-block; background-color: yellow;"><br />中央<br />の箱</div> <div style="display: inline-block; background-color: #a0a0ff;"><br />右側の箱</div> </div>
底辺を自動でそろえてくれる。これだけだと box の方が便利そうだが、次のような使い方もできる。
<div style="width: 300px; border: 2px solid green;"> <div style="margin: 5px; display: inline-block; background-color: #ffa0a0; border: red double 2px; border-radius: 8px;">なんか<br />リストっぽい<br />アイテム</div> <div style="margin: 5px; display: inline-block; background-color: #ffa0a0; border: red double 2px; border-radius: 8px;">なんか<br />リストっぽい<br />アイテム</div> <div style="margin: 5px; display: inline-block; background-color: #ffa0a0; border: red double 2px; border-radius: 8px;">なんか<br />リストっぽい<br />アイテム</div> <div style="margin: 5px; display: inline-block; background-color: #ffa0a0; border: red double 2px; border-radius: 8px;">なんか<br />リストっぽい<br />アイテム</div> <div style="margin: 5px; display: inline-block; background-color: #ffa0a0; border: red double 2px; border-radius: 8px;">なんか<br />リストっぽい<br />アイテム</div> </div> <div style="width: 400px; border: 2px solid green;"> <div style="margin: 5px; display: inline-block; background-color: #ffa0a0; border: red double 2px; border-radius: 8px;">なんか<br />リストっぽい<br />アイテム</div> <div style="margin: 5px; display: inline-block; background-color: #ffa0a0; border: red double 2px; border-radius: 8px;">なんか<br />リストっぽい<br />アイテム</div> <div style="margin: 5px; display: inline-block; background-color: #ffa0a0; border: red double 2px; border-radius: 8px;">なんか<br />リストっぽい<br />アイテム</div> <div style="margin: 5px; display: inline-block; background-color: #ffa0a0; border: red double 2px; border-radius: 8px;">なんか<br />リストっぽい<br />アイテム</div> <div style="margin: 5px; display: inline-block; background-color: #ffa0a0; border: red double 2px; border-radius: 8px;">なんか<br />リストっぽい<br />アイテム</div> </div>
検索結果をカード状にして並べて表示したい、といった場合に便利。
inline-block と似たようなことを float でも実現できる。
しかし、末尾の clear:left; がなければ後の要素の表示に影響する。それを意識して HTML を書く必要があり、あまりお勧めできない。
<div style="width: 300px; border: 2px solid green;"> <div style="margin: 5px; float:left; background-color: #ffa0a0; border: red double 2px; border-radius: 8px;">なんか<br />リストっぽい<br />アイテム</div> <div style="margin: 5px; float:left; background-color: #ffa0a0; border: red double 2px; border-radius: 8px;">なんか<br />リストっぽい<br />アイテム</div> <div style="margin: 5px; float:left; background-color: #ffa0a0; border: red double 2px; border-radius: 8px;">なんか<br />リストっぽい<br />アイテム</div> <div style="margin: 5px; float:left; background-color: #ffa0a0; border: red double 2px; border-radius: 8px;">なんか<br />リストっぽい<br />アイテム</div> <div style="margin: 5px; float:left; background-color: #ffa0a0; border: red double 2px; border-radius: 8px;">なんか<br />リストっぽい<br />アイテム</div> <div style="clear: left;"></div> </div>
each 関数を使った計算の関数や検索の関数で期待した結果が返ってこない時の対処法。
each 関数が呼び出す callback 関数が返す値は、外側のスコープの関数 (その each 関数を呼んでいる関数) の返り値にはならない。そのため、each 関数を使った計算の関数や検索の関数で期待した結果が返ってこない、ということになってしまうことがある。
下記のコードを実行した際、 console には決められた条件の文字列が表示されることが期待される。しかし、実行すると undefined が返る。
// ＜Sample Code＞
/**
* 文字列の配列を受け取り、最初に見つかった長さが5である要素を返す
* @param {Array.<string>} array 検索対象の配列
* @return {string|undefined} 引数の中で最初に見つかった長さ5の要素 見つからなければ undefined
*/
var getLengthFive = function(array) {
array.forEach(function(v, i) {
if(v.length === 5) {
return v;
}
});
};
console.log(getLengthFive(["abc","de","abcde","ab"]));
上記間違った例10行目の return はどの関数の return だろうか。
return は forEach の引数となる関数 (下記例では isLengthFive) のものであり、
外側の関数 (getLengthFive) のものではない。
そのため、 getLengthFive は何も返すことなく終了する。
// ＜Sample Code＞
/**
* 文字列を受け取り、長さが5であれば引数を返す。そうでなければ undefined を返す
* @param {string} array 確認対象の文字列
* @return {string|undefined} 引数の中で最初に見つかった長さ5の要素 見つからなければ undefined
*/
var isLengthFive = function(v, i) {
if(v.length === 5) {
return v;
}
}
/**
* 文字列の配列を受け取り、最初に見つかった長さが5である要素を返す
* @param {Array.<string>} array 検索対象の配列
* @return {string|undefined} 引数の中で最初に見つかった長さ5の要素 見つからなければ undefined
*/
var getLengthFive = function(array) {
array.forEach(isLengthFive);
};
each 関数の利用をあきらめ、 for 文の内側でチェックを行う方法。この場合、 return は getLengthFive 関数の return として機能する。
そのため、 getLengthFive 関数は条件にマッチした文字列を返すことができる。
// ＜Sample Code＞
/**
* 文字列の配列を受け取り、最初に見つかった長さが5である要素を返す
* @param {Array.<string>} array 検索対象の配列
* @return {string|undefined} 引数の中で最初に見つかった長さ5の要素 見つからなければ undefined
*/
var getLengthFive = function(array) {
for(var i = 0; i < array.length; i++) {
if(array[i].length === 5) {
return array[i];
}
}
};
console.log(getLengthFive(["abc","de","abcde","ab"]));
Array の find 関数を使用する方法が好ましい。
しかしながら、find 関数が使えないブラウザも現時点では多い。
そのため代替手段として解決策１を使うのは手段の一つである。
// ＜Sample Code＞
/**
* 文字列の配列を受け取り、最初に見つかった長さが5である要素を返す
* @param {Array.<string>} array 検索対象の配列
* @return {string|undefined} 引数の中で最初に見つかった長さ5の要素 見つからなければ undefined
*/
var getLengthFive = function(array) {
return array.find(function(v, i) {
return v.length === 5;
});
};
forEach と find についての詳細は以下を参照。