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

上の画像は縦横に4ピクセルずつ間を空けた背景となっています。これを繰り返し表示させてちゃんと表示されるか心配ですのでちょっと並べて見ます。











上の画像のつながりを見てもらえればわかりますがちゃんと繰り返し表示させてもすべてのしま模様がつながるとわかります。
考え方は主力の線が1ピクセルとその間隔4ピクセルなので画像の大きさは1+4=5ピクセルとなります。
ここからはアレンジです。

新規にレイヤーを作り背景色を薄い色にして線と背景色の色を少し近づけました。基本的に背景画像は目立ってはいけません。より見やすくするために薄い色で作るのもコツとなります。
↓完成画像:CSSで繰り返し表示させています
間隔が3ピクセルの場合
3ピクセルの場合は主力の線が1pxで間隔が3pxなので1+3で4ピクセルの画像となります。
新規ファイルから4×4の大きさでファイルを作ります。

そして上の画像のように塗りつぶします。









できた画像を並べてみるとちゃんと線と線がつながっているとわかると思います。
↓完成画像:CSSで繰り返し表示させています
