【イラレ】パターンの書き出し（その1：単純なパターンなら単純な方法でパターンを切り出す）

コーディングの際に絶対に必要になってくるパターンの書き出し！

今回は最も簡単と思われる単純なパターンの書き出し方法について紹介します。

とりあえず参考に3つほど(ドット、縦ボーダー、横ボーダー)例に出しました。

そもそもパターンって？？

パターンというのは、一定の型が繰り返し敷き詰められている状態です。

そのため、一定の型のみ作ればいいわけです。

一定の型を作ったら、cssで「右にも下にもその型を繰り返し敷き詰めてね」とお願いすればその願いを叶えてくれます。

（たぶん）最も簡単な書き出し方法

丸と四角の描画とグループ化ができればパターンが作成できちゃいます。

他のブログでは「スウォッチにパターンを登録してうんぬん….」と書かれていますが単純なものならこれから紹介する方法で良いと思います。

順序1.　パターンとしてどこを切り取るか考える

パターンとしてどこを切り取るかさえ分かれば順序2以降は全て同じです。

ドットの場合

パターンの一部分として切り出すべき場所は上記写真赤枠部分。

上と左は余白なし。右と下に余白あり。

この赤枠部分を右にも下にも連結させるとパターンができますね。

横方向のボーダーの場合

ボーダーはわかりやすいですね。

縦方向のバーダーの場合

縦のボーダーもわかりやすい。

順序2.　パターンの一部を作る

考え方は同じなのでドットのみ解説します。

順序1の赤枠内と同じ図形を作成します。

方法1

四角と丸を作成。

それぞれ40px、30pxです。

四角と丸を重ねて左上揃えにします。

隙間が空くとダメなので、イラレの整列機能を使いましょう。

方法2

クリッピングマスクで赤枠部分を取り出す方法もありますね。

40pxの四角を赤枠部分に乗せて、

順序3. 画像を書き出す

順序4. CSSのバックグラウンドプロパティで(必要があれば)調整する

例)

background-image: url(../img/dots.png)
background-size: ○%

background-sizeで直接数値を入れるとドットが大きくなったり小さくなったりするので、お好みで調整します。

ちなみに、初期値でbackground-repeat: repeatになっているため該当範囲がドットで埋め尽くされます。