リピート素材って知ってる?

ホームページのデザインをする時「リピート素材」というのを使うことがあります。

文字通り、素材をリピートさせて使う方法です。

近年サイトデザインは単色でスッキリ、もしくは1枚の写真を画面に大きく表示させる方法が流行していますが、サイトタイトルの背景や、ちょっと目立たせたい箇所の背景として今でもリピート素材は使われています。リピート素材のメリットは画像の軽さ!例えばホームページ全面に表示されるような1枚写真に比べて、画像が小さいのでデータも軽く、サイトを表示させるスピードがあがります。

そんなリピート素材。
実際に使うとどんな感じなのか?
今回は下記の①~⑧の画像をサンプルにリピート背景を作ってみたいと思います。

※下記画像は模様がわかりやすいように、拡大したデータです。実際は10px✖10px

画像の素材は10ピクセルの正方形で、白の素材、背景は透過してあるものを使っています。
リピート素材は上記の表のように、小さい素材を縦横両方向にリピートさせて利用することができます。
上記のサンプルでは、リピートした背景素材の上に画像を配置していますが、もちろん文字を入れることも可能です。

リピート素材が重宝する理由はこれだけではありません!白部分は素材なので変更できませんが、水色の部分はコーディングで指定している色なので、変更可能です。

更には素材をコーディングで縮小することも可能!元の素材を5分の1にしてみました。

画像素材というと、それぞれ画像を用意しなくてはいけないと思うかもしれませんが、リピート素材は1枚の画像からいろいろな見せることができます。
画像素材を1個ずつ用意するよりも読み込む負担も少なく、制作としても難しくはないことなので、是非活用してみてください。