円を描いて任意の数に等分割する描きかた


①楕円形ツールで真円を描く

楕円ツールで円を描く

楕円ツールで円を描く

②画面(又は、表示)
・ポイントにスナップとスマートガイドにチェックを付ける

ポイントスナップとスマートガイドにチェック

ポイントスナップとスマートガイドにチェック

③ペンツールで円の中心をクリック

ペンツールで円の中心をクリック

ペンツールで円の中心をクリック

④Shiftを押したままで円の外をクリック(円の半径よりも長い直線を描く)

Shiftを押したままで円の外をクリック

Shiftを押したままで円の外をクリック

⑤回転ツールをクリック
・回転ツールでAltを押したままで円の中心をクリック
・角度を入力(360度/分割数)
・コピー

回転ツールをクリック

回転ツールをクリック

Ctrl+Dキーを円が等分割になるまで押す

Ctrl+Dキーを円が等分割になるまで押す

⑥全体を選択ツールで選択

全体を選択ツールで選択

全体を選択ツールで選択

パスファインダパレット内の「分割」をクリック

パスファインダパレット内の「分割」をクリック

⑦オブジェクト
・グループ解除

オブジェクト→グループ解除

オブジェクト→グループ解除

⑧分割した図形を個別に選択・編集。
分割した図形を個別に選択・編集

効果的に画像を重ねて使うCSS方法

  • 2013年02月05日
  • CSS

画像を重ねて表示するとは?

例えば次の画像のように、「商品」の画像と「送料無料」の画像 2枚を重ねて表示するような場合を言っています。

サンプルを用意しました。(サンプルをご覧ください

効果的に画像を重ねて使う方法(1)
▼コチラのサイトを参考にしました▼
http://kumacrow.blog111.fc2.com/blog-entry-492.html#comment878

①HTMLコード

<a href="~"><img src="(画像1)" width="240" height="240" /></a><br />
<a href="~"><img src="(画像2)" class="souryou" width="140" height="30" /></a>

②CSSコード

.souryou {
 position: relative;
 top: -55px;
 left: 195px;
}

画像1が背面に配置する画像で、画像2が前面に配置する画像です。そして、画像2には classで「souryou」を指定します。

クラス名「souryou」では、position(配置)プロパティで、relative(相対配置)を行っています。画像の大きさにあわせて、数値を変更します。

ちょっと問題なのが、「position: relative;」している画像の大きさだけ、画像同士の間が空いてしまいます。

効果的に画像を重ねて使う方法(2)

(1)の方法よりもいい方法を

①HTMLコード

<div class="goods">
<a href="~" class="goods-menu"><img src="(画像1)" width="240" height="240" /></a>
<a href="~" class="order"><img src="(画像2)" width="140" height="30" /></a>
</div>

②CSSコード

.fw_cellin_3 a{display: block; }

.fw_cellin_3 {
	margin-bottom: 5px;
	width:240px;
        height: 24px;
        position: relative;
	color:#333;
	text-align:center;
	font-weight:bold;
	font-size:12px;
}
a.goods-menu {
 border: 1px solid #777;
 width: 250px;
 height: 188px;
}
a.order {
 position: absolute;
 top: 133px;
 left: 195px;
 width: 50px;
 height: 50px;
}

サンプルを用意しました。(サンプルをご覧ください