今回はJavaScriptを使ってHTMLを操作し、画像を並べる方法を解説していきます。非常に簡単な上、画像だけでなく色々と応用が効くので是非自由な発想で様々なことにチャレンジしてみてください！
今回の目標はこんな感じです。
見た目は前回と変わりませんが、JavaScriptを使って画像を並べています。
JavaScriptで画像を表示させる
前回、HTMLにベタ書きで画像を並べた書き方は以下のようなものでした。前回の記事のリンクも貼っておきます▼▼
<div id="table">
<img src="../../images/ura.png">
<img src="../../images/ura.png">
<!-- . -->
<!-- . -->
<!-- . -->
<!-- 略 -->
<img src="../../images/ura.png">
</div>もちろん数が少なく動きもないページならこのようにしてもいいのですが、大量の画像を並べるとしたら大変ですし、冗長で読みづらくなってしまいます。特に規則的に並べたい時はJavaScriptで画像を表示させると便利です。
まずは画像を一つ書いてみましょう。HTMLの変更点は大胆です。画像を全部消しましょう。
<div id="table">
</div>もちろんこのままでは何も表示されませんが、画像(カード)を並べていた親要素(ここではtableというid名をつけています)のHTMLをJavaScriptで書き換えることによってHTMLにベタ書きせずとも画像を表示させることができます。
idを指定してHTMLの要素を取得する
まずはJavaScriptで以下のように書きましょう。
var table = document.getElementById("table");
document.getElementById(“id名“);とすることでid名で指定したHTMLの要素を取得できます。画像を表示させる親要素に適当なid名をつけてこれを取得しましょう。取得したらこのように変数に入れとくとよいです。
HTMLを書き換える
次はこれを用いて画像を表示させます。
var table = document.getElementById("table");
//HTMLのimgタグの「文字列」
var text='<img src="../../images/ura.png">';
//取得した要素のHTMLを書き換える
table.innerHTML = text;
一番下の行でHTMLを書き換えています。噛み砕いて書くと、
document.getElementById(“id名”).innerHTML = “文字列”;
でid名で指定した要素のHTMLを”文字列”に書き換えることができます。ここの文字列に画像タグを書けば、JavaScriptで画像を表示させることができるわけです。
forループで画像を複数枚並べる
JavaScriptで画像が表示できるようになると、大量の画像もあっさりと並べることができるようになります。
var N = 5; //並べたい画像の枚数
var text="";
var table = document.getElementById("table");
for (var i = 0; i < N; i++) { //並べたい回数だけ画像タグを書き加える
text += '<img src="games/images/ura.png">';
}
//HTMLを書きかえる
table.innerHTML = text;
forループ文の中で画像タグを並べたいだけ書き足せばいいだけです。ひたすら横に並べるだけならですが。後で変更を簡単にするため、並べたい画像の数は変数に格納しておくとよいです(定数とするのも良いかもしれません)。変数 += “文字列”;をループの文に入れると、文字列の後ろにさらに文字列を結合したものを変数にあらためて代入することになります。たとえば、
var people = "";
for(var i=0;i<20;i++){
people += "_:(´ཀ`」 ∠):";
}とすると、変数peopleには最終的に文字列「_:(´ཀ`」 ∠):_:(´ཀ`」 ∠):_:(´ཀ`」 ∠):_:(´ཀ`」 ∠):_:(´ཀ`」 ∠):_:(´ཀ`」 ∠):_:(´ཀ`」 ∠):_:(´ཀ`」 ∠):_:(´ཀ`」 ∠):_:(´ཀ`」 ∠):_:(´ཀ`」 ∠):_:(´ཀ`」 ∠):_:(´ཀ`」 ∠):_:(´ཀ`」 ∠):_:(´ཀ`」 ∠):_:(´ཀ`」 ∠):_:(´ཀ`」 ∠):_:(´ཀ`」 ∠):_:(´ཀ`」 ∠):_:(´ཀ`」 ∠):」が入ります。
if文条件分岐で規則的に改行する
上では5枚しか並べていないので問題ないですが、もっと大量に並べるときには定期的に改行したくなるでしょう。学んだfloat,clearを使って規則的な周期で改行をしてみましょう。
これも非常に簡単です。ループ文の中で条件を満たすときだけ特別な処理をさせればよいのです。
var N = 14; //並べたい画像の枚数
var text="";
var table = document.getElementById("table");
for (var i = 0; i < N; i++) { //並べたい回数だけ画像タグを書き加える
if(i%5==0){//5で割り切れるときだけ
text += '<img src="games/images/ura.png" class="clear">';
}else{//その他の条件
text += '<img src="games/images/ura.png">';
}
}
//HTMLを書きかえる
table.innerHTML = text;
５枚ずつ画像を並べたら改行する処理をしたければ、ループ文の中で条件分岐をさせ、並び順が5で割り切れるときだけ特殊なことをすれば良いです。今回は５回ごとにclass名に”clear”をつけ、CSSで特殊なスタイルを指定します。
img{
float:left;
/*その他諸々サイズなどの指定*/
}
.clear{
clear:both;
}
とりあえず画像に全てfloat:left;で左詰めにして、５枚ごとにclear:bothでfloatを解除し、回り込みを無効にすることで改行しています。float,clearについては前回記事に書きました。
次回予告
今回ループ文とその中で条件分岐をしながらJavaScriptで画像を並べることができました。
ただ今回は全て同じ画像でしたが、次回は異なる画像を並べる方法についてみていきたいと思います。
コメント