丸角：××pxの白画像で作る丸角

ここでは応用力の高い簡単な丸角の作り方を掲載しています。1pxの白画像で作る丸角の応用版です。

ファイルの新規作成

上部メニューのファイルから新規→白紙ファイルを選び新規にファイルを作成します。
今回は4ピクセルと6ピクセルの丸角を作るのでそれぞれ下記の設定になります。

4ピクセルの場合
幅：4px　高さ：4px　解像度：72px　カラーモード：RGBカラー　カンバスカラー：透明とします。

6ピクセルの場合
幅：6px　高さ：6px　解像度：72px　カラーモード：RGBカラー　カンバスカラー：透明とします。

4×4ピクセルの白の画像を作る。

4×4ピクセルのの画像を作ります。青の部分はわかりやすいように色をつけているだけで本来透明です。
またサイトの背景色が白ということを仮定して色を白にしています。サイトの背景色が白以外の場合その色に合わせて作ります。

作り方は鉛筆ツールを使い一番右上の部分から塗りつぶしていきます。コツは中心の部分を少し残すような感じで周りから塗りつぶすことです。
これは右の部分に使うので左右反対にし左用も作っておきます。

6×6ピクセルの白の画像を作る。

6×6ピクセルのの画像を作ります。青の部分はわかりやすいように色をつけているだけで本来透明です。
またサイトの背景色が白ということを仮定して色を白にしています。サイトの背景色が白以外の場合その色に合わせて作ります。

作り方は鉛筆ツールを使い一番右上の部分から塗りつぶしていきます。上の画像は4px塗りつぶした状態です。

　
左が5×5の範囲を塗りつぶした状態で右が完成となります。
サイズが大きくなればなるほど難しくなるのでまずは小さな丸角で丸く作るコツをつかみ、大きなサイズは確認しながら作りましょう。
これは右の部分に使うので左右反対にし左用も作っておきます。

CSSで丸角を配置

1px同様で白の画像を丸角にしたい部分にCSSを使い配置します。
画像へのURL（パス）を変更するだけでいいので簡単です。

htmlです。

<div><p>丸角</p></div>

cssです。

div{/*左の上に白の画像を指定*/
　width:100px;
　background:url("××pxの左の白の画像へのパス") no-repeat left top #0000ff;
}
div p{/*右の上に白の画像を指定*/
　margin:0;
　padding:0;
　background:url("××pxの右の白の画像へのパス") no-repeat right top;
　color:#fff;
　text-align:center;
}

結果

解説

1pxの場合は上下左右すべて同じなので使い回しが利きましたが、4pxまたは6pxの場合は右向き用と左向き用を作る必要があります。
しかし左右反対にするだけなので簡単に作れます。

そして今回作った丸角は1pxの白画像よりも丸さが増していると実感できると思います。

▲トップ