背景:四角模様
ここでは背景に使う四角模様を作成しています。
完成予想素材:
ファイルの新規作成
上部メニューのファイルから新規→白紙ファイルを選び新規にファイルを作成します。
幅:3px 高さ:3px 解像度:72px カラーモード:RGBカラー カンバスカラー:透明とします。
斜めにつながるように作る
今回の背景画像の大きさは3×3ピクセルと非常に小さいです。

鉛筆ツールなどを使い上の画像のように作ります。これで完成です。簡単ですね。
気になるのはどうしてこのような形になるのかですが今回もCSSを使い背景画像を繰り返し表示させるので画像と画像がつながることを考えるとこのような形になります。








上の画像のつながりを見れば繰り返し表示することによりちゃんと四角模様ができているとわかります。
こういった繰り返す画像を作る場合まず繰り返している背景を思い浮かべます。
そしてその大きな背景のどこで区切れば同じ画像になるかを考えるのがポイントとなります。
↓完成画像:CSSで繰り返し表示させています
違うバージョン
区切る場所を変えても同じような画像ができる場合も多々あります。

上の画像は一見繰り返してもつながらないように見えますがちゃんとつながります。








並べてみるとわかりますがしっかりとつながっています。しかも前回作成した四角模様と似たような表示となります。
このように一見違う画像でも繰り返し表示させると似たような背景ができることもあります。
↓完成画像:CSSで繰り返し表示させています
