[CSS]ネガティブマージン

一年で春と秋が大好きです。
暑いのと寒いのは苦手です。早く!早く!春よ来い!

こんにちは。基本的にガッツが足りないスタッフ「ほ」です。

今回のネタはCSSで行きます。

ネガティブマージン。

知っておくと、デザインにちょっとした変化がほしい時に役立ちます。

「マージン」というのは、オブジェクトにつける外余白のことです。

例えば、こんな感じの入れ子のボックスがあったとして・・・

この黄色いボックスに「左マージン」を設定すると、黄色いボックスの左側に外余白が発生するので、ボックスが右に押し出されます。

このようにして余白を発生させたり、ボックスを移動するのが目的で利用しますが、このマージンの値には「マイナス」が使えるんです。

例えば、上記の黄色いボックスに対して

margin-left : -50px ;

のような指定を行うと、ボックスがエリアから飛び出して左側に移動します。

これを使うと、↓こんなこと↓ができたりしますね!

サンプルページを作成しました
参考にしてみてください。

「まずはCSSのキホンから知りたいんだけど・・・」という方は、バンフートレーニングスクールのWeb基礎講座にてお待ちしております。


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

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

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

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

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

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

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

4月の開講スケジュール公開!

こんにちは、もうすぐ3月だというのに
寒い日が続きますね。

春の暖かさが待ち遠しい毎日です。

さて、この頃にはもう薄手コートを羽織り、
春物の衣服に衣替えをしているでしょう。

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

新学期を迎え、新たなスタートをきる方も多い季節。
スキルという目に見えない武器を身に付け、
すばらしい新生活のはじまりを迎えられるよう
スクールもお手伝いしたいと思っています!!

春休みなどで時間のある学生さん!
卒業前までなら「学割」サービスが使えますので
お急ぎ下さいね。
http://www.vanfu-vts.jp/campaign/student.html

年度末でお忙しい社会人の皆さん!
バンフートレーニングスクールの講座は
どれも短期修得が可能です!
時間を有効に活用して、スキルを身に付けてくださいね。
http://www.vanfu-vts.jp/index.html

 

 

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

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

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

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

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

ハッピーバレンタイン★

こんにちは、甘いもの大好きスタッフ「な」です。
バレンタインに限らず、チョコレートは年中受付中♪

さてさて、そんな2月のマンスリーギフトは、
そのものズバリ!チョコレート★

Monthly gift

パッケージの内側には、世界中の言葉で「ありがとう」が紹介されています!

実はこのパッケージの印刷や加工、
全てスクールの母体「株式会社 帆風」でおこなっています。
そう、バンフートレーニングスクールの母体は「印刷会社」!

 

スクールに通って身に付けたスキルを使って
印刷物を作りたいなぁと思っている方、
いらっしゃいませんか!?

例えば・・・
■ 印刷物を出したいけれど、難しいイメージ・・・
■ ポートフォリオをキレイに仕上げたいなぁ!
■ スクールでならったテクニックを使って
 自分だけのオリジナル名刺を作りたい!
・・・などなど。
 
 
そんな方にお得な情報です★
 
 
受講生様に限り、
印刷物のご依頼が優待価格(2割引)
ご利用いただけるサービスが
今月からスタートいたしました!!
(※飯田橋店限定・受講期限内)

印刷物は初めてという方でも、
イチからご案内しますので、
安心してご依頼いただけます!

 

データ作りのことならバンフートレーニングスクールへ、
印刷物のことならバンフーメディアステーションへ。

 

詳しくはスクールにお越しの際に
受付スタッフまでお声掛け下さい。
(ご利用には優待チケットのご提示が必要です)

 

 

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

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

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

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

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

パノラマ写真とコンテンツに応じた塗りつぶし

ここ数日そんなに寒くないなぁ…と、思ってたら雪!

春を飛び越えて夏が待ち遠しいスタッフ『の』です。

さて、今回は久しぶりにPhotoshopでいきます。

↑ 4点の写真を使用してパノラマ写真を作成してみます。

Photoshopの自動処理を使えば簡単に出来ます。

まずはファイルメニュー→自動処理→Photomergeでクリックします。

ダイアログが出ましたら、パノラマ写真を作成したい画像の入ってるフォルダーを選択。

もしくは、パノラマにしたい写真を開いておいて『開いてるファイルを追加』をクリックします。

後は、Photoshopが働いてくれるので暫く待ってると…

↑このようにくっつけてくれました。

あっちこっちに隙間が目立ちますので、以前はトリミングして完成としておりましたが、

CS5からの機能『塗りつぶし(コンテンツに応じる)』を使用して隙間までPhotoshopに埋めて頂きましょう。

でもその前にこの方法を使用する場合、選択範囲を写真に食込ませるように!ってadobeさんがセミナーで言ってました。

そこで、自動選択ツール等で透明部分の選択範囲を作成し、選択範囲メニューから選択範囲を拡張します。

その後、編集メニューから塗りつぶしをクリックし、使用欄を『コンテンツに応じる』にしてOKをクリックします。

はい、完成!

色々あやしい箇所も見られますが、その辺は加工しましょう。

さて、そもそもPhotoshopを基礎から習得されたい、とお考えの方『Photoshop講座』でお待ちしております。

以上、スタッフ『の』でした。


バンフートレーニングスクールでは、フォトショップ講座を開講しています。

このブログで記事を書いているスタッフ「の」やスタッフ「ほ」が基本操作からマニアックなテクニックまで幅広くレクチャー!

まったくの初心者の方大歓迎!ある程度ご経験のある方向けの実践編もご用意しております。

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

フォトショップ講座の詳細

 

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

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