Illustrator CC ポイント文字とエリア内文字

大分暑さがやわらぎ、夏が過ぎ去ってゆく寂しさを感じているスタッフ『の』です。
やっぱり夏は長い方がいい!!

さて、来年の夏が待ち遠しい話はさておきまして、今回はIllustratorでいきたいと思います。
『CC』の目立った新機能というより地味ですが便利になった機能を一つ紹介します。

Illustratorの文字入力方法は、クリックして入力する方法とドラッグして範囲を作って入力する方法があります。

ドラッグして入力すると『エリア内文字』の扱いとなり、バウンディングボックスでのサイズ変更が困難となります。

『CC』でどちらのタイプでも入力し、『選択ツール』で選択してみると…

バウンディングボックスの右側に尻尾のようなものがあります。

尻尾には塗りつぶされているのといないのがあります。
塗りつぶされていない方が『ポイント文字』で、塗りつぶされている方が『エリア内文字』です。

ポイント文字をエリア内文字に、もしくはエリア内文字をポイント文字に変えたい場合は尻尾の先端部分をダブルクリックすると変換されます。

間違えて入力してしまっても簡単に変換できるようになりました。
エリア内文字もポイント文字に変換されればバウンディングボックスでのサイズ変更が可能になります。

さて、そもそも新機能よりもIllustratorの基本操作から学びたい!という方、【Illustrator講座】でお待ちしております。

以上、

スタッフ『の』でした。

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[css]マージンの相殺

毎日暑いですね。
こんにちは、スタッフ「ほ」です。

みなさま、夏休みはすでに取られましたでしょうか?それともこれからでしょうか?

私は、大型連休ではなく、中型連休を2回いただくことができそうです。どこかに旅行に行くわけではないのですが、ちょくちょく近場で出かける用事があるので、毎日忙しく過ごせそうな予定です。

どこかで見かけたら声かけてください。

授業の中で、とある生徒さんからの質問を受けたので、今回のエントリーで解説をしておこうと思います。

たとえば以下のようにdivボックスが2つ上下に並んでいたとします。上のボックスを「boxA」、下のボックスを「boxB」としておきます。

それぞれのボックスに以下の設定をします。

#boxA {
	margin-bottom:10px;
}

#boxB {
	margin-top:10px;
}

boxAは下に10pxのマージンを取っており、boxBは上に10pxのマージンを取っています。
単純に考えれば、下図のように2つのボックスの間には20pxの隙間があくはずですが……

実際には、これらのマージンは重なって相殺されるため、間には10pxしか隙間があきません。

これは「マージンの相殺」と呼ばれ、上下に並んだパーツのマージンで起こる現象です。

ちなみに左右に並べたボックスの左右マージンでは、この現象は起きず、単純に合算したサイズの隙間が空きます。

さらに、この上下マージンの相殺は、いつでも起きるわけではなく、以下のシチュエーションで起こります。

1.上下に隣接するボックスのマージン

上記の例であげたパターンです。

上下に並んでいる要素が持つマージンは相殺されます。

数値を変更して、boxAが下に20px、boxBが上に10pxのマージンを持つ場合、2つのマージンが合算されて30pxの隙間があきそうな気がしますが……

実際は、2つのマージンは重なって、大きい数字が優先となり、小さい数値は相殺されるため、ボックス間には20pxの隙間が空きます。

2.親ボックスに含まれる最初の子要素の上マージンと親ボックスの上マージン/最後の子要素の下マージンと親要素の下マージン

これはちょっとわかりづらいでしょうか。

先ほどの同じようにboxAとboxBを用意します。

今回は、boxBに上マージンを10px指定し、boxBに含まれる見出し要素h2に上マージン20pxを指定します。

イメージとして以下のような状態を期待している感じです。

ですが、実際は以下のようになります。

boxBの内部には隙間は発生せず、boxAとboxBの間に20pxの隙間が発生します。

boxBの最初の子要素に上マージンを発生させると、このマージンは親要素(boxB)の内側ではなく、外側に飛び出して発生します。

この時に親要素が持っている上マージンと、外に飛び出た子要素の上マージンで相殺が起きるため、大きな数値である20pxが採用されます。

この場合、怖いのは子要素のマージンが親要素の外側に飛び出してしまうことです。

boxAとboxBはくっつけたまま隙間を発生させたくない、でもh2の上には隙間を開けたい場合に、h2の上マージンを発生させると、希望とは裏腹に、divボックス同士の間に隙間が発生してしまいます。

ただ、この場合の相殺は、2つのマージンの間にボーダーやパディング要素が存在する場合は発生しません。

たとえば、boxBにボーダーを指定すると、以下のようになります。

h2の上マージンがboxBの内側で発生しているのがわかります。

boxBに上パディングを10px指定し、h2要素に上マージン20pxを指定した場合も相殺は起きず、boxBの上に30pxの内余白が発生します。

……どうでしょう?ちょっとわかりづらかったでしょうか。今回のお話は実際にみなさんが制作中に体験しないとピンとこない内容かと思いますので、今後サイト作成をしていて、上下のマージン指定において「あれ?」と思うことがあった時に、もう一度読み返してみてください。


バンフートレーニングスクールでは、ホームページ制作講座を開講しています。

このブログで記事を書いているスタッフ「ほ」が特別なアプリケーションを使わずに基本的なWebページを構築する方法をレクチャー。

まったくの初心者の方大歓迎!ステップアップ編としてDreamweaverというアプリケーションを使った実践編もご用意しております。

詳しくは、下記詳細ページをご覧ください。

ホームページ制作基礎講座の詳細

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

新・キャンペーン開始!

8月に入りましたね。
夏休みが待ち遠しい!
学生さんが羨ましい!!
すたっふ「な」です。

ちなみにスクールはお盆期間中も講座開講中★
お休みだけど、どこに行く予定もないという方!
時間のある夏休みにスキルアップするのも
「アリ」だと思います。
バンフートレーニングスクールなら
まだ間にあいますよ♪
開講スケジュール
https://www.vanfu-vts.jp/cgi-bin/course/schedule.php
お申込(お申込ボタンよりお進みください)
http://www.vanfu-vts.jp/

さて、受講中の方に朗報です!
このたびスクールでは、
「ご紹介・リピーター」特典を開始いたしました!
受付にて優待チケットを受け取り、
専用サイトからクーポンNo.の入力で
10%割引にて講座をご利用いただけます★(※)
新規講座申込に使って頂けますので、
ご自分に使ってもOK♪
もちろんお友達にご紹介してもOK♪♪

詳しくはロビーのチラシ又は受付までお問合せ下さい。
(※各種割引制度とは併用できません)
(※在学期間中の受講生様向けサービスとなります。
ご希望の方はご来校時に優待チケットをお受取下さい)
(※チケットには有効期限がございます。ご注意下さい)

10月のスケジュール公開しました!
https://www.vanfu-vts.jp/cgi-bin/course/schedule.php

★★★直接指導だから理解度が違う!★★★

イラストレーター (Illustrator) / フォトショップ (Photoshop)
WEB基礎 (HTML+CSS) / ドリームウィーバー (Dreamweaver)
インデザイン (InDesign) / フラッシュ(Flash)

短期間×低価格×バンフートレーニングスクール
=仕事で使える制作スキルがすぐ身につく!!
―☆入学金0円☆教材費0円☆ ―

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ