フィルタリング
filtering-workファイルを使用
01 画像をダウンロード
フォトアルバムに使用する写真を「PIXABAY」などからダウンロード。
名前をつけて「img」フォルダーへ入れる。
※ダウンロードサイズ／640pxでOK
※写真の枚数／6～12枚
※写真のサイズは高さも同じになるように編集してください／width:150px height:150px
windowsのペイント、photoshopなどで編集
※写真の名前は各カテゴリー別につける
例：red1,red2,red3／blue1,blue2／yellow1,yellow2など
02 タイトルを変更
サンプルではタイトルやh1が「Flower」となっていますので写真にマッチした名前に変更してください。
HTML
<title>Flower</title>
<h1>Flower</h1>
03 jQueryのリンク・JavaScript を確認
</body>の上にjQuery本体と自作script.jsを入れてあります
HTML
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/script.js"></script>
</body>
04 CSSでデザインを変更
●bodyのbackground-color
●h1のcolorやsize
●リンクボタンのcolorなど
イメージに合わせて変更しましょう
05 ボタンリンクの変更
作成する内容に合わせてbutton valueを変更（赤文字）
表示されるボタンの名前も変更（青文字）
HTML
<div id="buttons">
<button value="all">All</button>
<button value="rose">バラ</button>
<button value="tulip">チューリップ</button>
<button value="margaret">マーガレット</button>
<button value="pansy">パンジー</button>
</div>
06 ul リストにclass名をつける
写真に合わせて名前を分けてつけます
<li><img src="img/rose1.jpg"></li>
↓
<li class="rose"><img src="img/rose1.jpg"></li>
POINT! 写真は同じ種類で並べない。ランダムにいれましょう。
HTML
<ul id="list">
<li class="rose"><img src="img/rose1.jpg"></li>
<li class="tulip"><img src="img/tulip1.jpg"></li>
<li class="margaret"><img src="img/margaret1.jpg"></li>
<li class="pansy"><img src="img/pansy1.jpg"></li>
<li class="rose"><img src="img/rose2.jpg"></li>
<li class="tulip"><img src="img/tulip2.jpg"></li>
<li class="margaret"><img src="img/margaret2.jpg"></li>
<li class="rose"><img src="img/rose3.jpg"></li>
<li class="pansy"><img src="img/pansy2.jpg"></li>
<li class="margaret"><img src="img/margaret3.jpg"></li>
<li class="tulip"><img src="img/tulip3.jpg"></li>
</ul>
07 ul リストにclass名を2以上つける場合
class名に「花の名前」「花の色」と二つ以上入れることもできます。
<li class="rose blue"><img src="img/rose1.jpg"></li>
この場合ボタンリンクは以下のようになります。
<button value="blue">ブルー</button>
サンプルダウンロード（filtering-arange.zip）
08 画像解像度の確認
最後にもう一度、画像解像度（image resolution）をチェックしてください
