区切り線:ドット線
ここでは区切り線に使うドット線を作成しています。
完成予想素材:
ファイルの新規作成
上部メニューのファイルから新規→白紙ファイルを選び新規にファイルを作成します。
幅:2px 高さ:1px 解像度:72px カラーモード:RGBカラー カンバスカラー:透明とします。
ドット線は簡単
![]()
まず最初に上の画像をつくります。これで完成です。笑
解説をするなら鉛筆ツールを使い好きな色で1ピクセルだけ塗りつぶします。
そして残った1ピクセルはそのままにします。
↓完成画像:CSSで繰り返し表示させています
これだけなら画像を使わなくてもできますがどのブラウザでも同じように見せたい場合は画像を使ったほうが確実です。
さらにこの線を増やしてみます。
線を増やす
![]()
上の画像のようにまず新規ファイルの大きさを2×3にして好きな色で塗りつぶします。
↓完成画像:CSSで繰り返し表示させています
さらに線を増やす
![]()
上の画像のようにまず新規ファイルの大きさを2×5にして好きな色で塗りつぶします。
↓完成画像:CSSで繰り返し表示させています
簡単に解説しますと線が3本の場合は線3ピクセルと間隔をあけている2ピクセルを足して高さが5ピクセルとなります。
