バンフートレーニングスクール Illustrator/Photoshop/InDesign/Web作成が学べるスクール

03-5229-8285

カウンセリング

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

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

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

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

ネガティブマージン。

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

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

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

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

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

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

margin-left : -50px ;

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

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

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

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


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

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

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

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

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

The following two tabs change content below.
アバター画像

スタッフ 「ほ」

ホームページ制作講座、イラストレーター講座、フォトショップ講座を担当しています。カップヌードルはシーフード派。 Webクリエイター能力認定試験 認定インストラクター

▲トップ

無料体験へのお申込み

バンフートレーニングスクールでは3種類の無料体験をご用意しております。
ご希望の体験を選択していただくと詳細とお申込みのページへ移動します。

ポストカード制作

イラストレーターとフォトショップを使ってのポストカード制作体験です。グラフィック制作の流れを体験していただけます。

パンフレット制作

インデザインを使ってのパンフレット制作体験です。文字と画像の流し込みからページ番号設定、文字への装飾まで行います。

ホームページ制作

WindowsやMacintoshでHTMLを記述してホームページを作成します。ページの基本である文字、画像、リンクの設定を行います。

資料のご請求

スクールのパンフレットを画面上でご覧いただけます。

パンフレット(PDF)を今すぐ見る

パンフレットの郵送をご希望の方は以下のフォームよりご請求ください。

お名前必須
フリガナ必須
ご住所必須
-
メールアドレス必須
備考

下記、プライバシーポリシーをお読みいただき、ご同意いただいた上で次の画面にお進みください

プライバシーポリシーを開く

同意して次へ