マージンとパディング

AD Area
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Table of Contents

マージン0/パディング0

今回はテキストウィジェットを使って実験を行う。テキストウィジェットを挿入したばかりの状態は下記のようになる(「吾輩は猫である」のダミーテキストが入った段落)。

吾輩は猫である。名前はまだない。どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

このままではデフォルトの状態、マージンやパディングを追加した状態がよく分からない。よってセクションを緑色に塗り、テキストウィジェットを黄色に塗ってみた。

吾輩は猫である。名前はまだない。どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

デフォルトの状態では、セクションより一回り小さい感じでテキストウィジェットが配置されているのが分かる。では早速、マージンを入れてみよう。

マージン90/パディング0

まずは、テキストウィジェットの上下左右にマージンを90px取ってみる。

吾輩は猫である。名前はまだない。どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

マージンを追加した段落が、中央に寄ったのが分かる。上下の段落との間隔も大きい。しかし、これだとマージンを追加したことで何がどう変わったかが分からない。そこで、セクションとテキストウィジェットを着色してみるとこうなる。

吾輩は猫である。名前はまだない。どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

セクションとテキストウィジェットとの間に大きな余白が出来ていることが分かる。セクションは上下左右に広がり、テキストウィジェットは中央に寄せられている。その結果、テキストの上下左右に大きな余白が出来ている。

このように、マージンを追加すると「セクションとテキストウィジェットとの間隔が変動する」ことが分かる。しかし、テキストウィジェットとテキストそのものの間隔は変わっていない(余白が無いまま)。この点を覚えておく必要がある。

マージン-20/パディング0

マージンを追加した際の挙動が分かったところで、次の実験に移る。マージンはプラスの値だけでなく、マイナスの値も入力できる。なので今度はテキストウィジェットの上下左右にマージンを-20px取ってみる。

吾輩は猫である。名前はまだない。どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

マイナスのマージンを入れると、通常の段落よりも左右に広がっていることが分かる。セクションとテキストウィジェットを着色してみよう。

吾輩は猫である。名前はまだない。どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

マイナスのマージンを追加すると、テキストがセクションを突き破って外にはみ出すことが分かる。閲覧の大半がモバイルだということを考えると、使える場面は限られるような気もするが、ちょっとしたアクセントとして使うのは良いかもしれない。

マージン0/パディング90

続いて、パディングを入れた時の挙動を確認する。まずは、テキストウィジェットの上下左右にパディングを90px取ってみる。

吾輩は猫である。名前はまだない。どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

パディングを追加した段落が、中央に寄ったのが分かる。上下の段落との間隔も大きい。パッと見、マージンを追加したときと変わらないように見える。では、マージンとの違いは何だろうか?セクションとテキストウィジェットを着色してみよう。

吾輩は猫である。名前はまだない。どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

セクションとテキストウィジェットとの間隔は変わっていない。だが、テキストウィジェットとテキストそのものの間隔が広がっていることが分かる。パッと見はマージンを追加したのと同じように見えるが、実際は似て非なるものという訳だ。

このように、パディングを追加すると「テキストウィジェットとテキストそのものの間隔が変動する」ことが分かる。テキストそのものは中央に寄せられているが、テキストウィジェット自体の幅は変わっていないことに注目。

マージン0/パディング-20

パディングを追加した際の挙動が分かったところで、次はマイナスの値を入れた場合の挙動を確認する。テキストウィジェットの上下左右にマージンを-20px取ってみるとこうなる。

吾輩は猫である。名前はまだない。どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

見る限り、何が変わったのか分からない。セクションとテキストウィジェットを着色してみよう。

吾輩は猫である。名前はまだない。どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

ちなみに、パディング0の状態がこれ。

吾輩は猫である。名前はまだない。どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

違いが分からない、というか全く同じに見える。パディングの場合は、マイナスの値を追加してもデフォルトのままのようだ(=やる意味無し)。

Recommends
Sleeping Puppy

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Recent posts
This is the Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Table of Contents

BIOHAZARD®は株式会社カプコンの登録商標です。
Play Station®は株式会社ソニー・インタラクティブエンタテインメントの登録商標です。

もっと楽しみたい?それならこちらをチェック
あなたは、CAPCOMが運営する「バイオハザードポータル」をご存じだろうか? 最新情報はもちろん、世界中のプレイヤーのデータを見たり、オンラインイベント、ランキング、チャレンジへ参加したりと楽しい仕掛けが満載だ。 バイオハザードポータルの登録は無料。今すぐ下のボタンからアクセスして、詳細を確認して欲しい。
Shingo Matsuura
Shingo Matsuura

マーケター/コピーライター。STRATEGY SUPPLIER所属。お気に入りゲームは「バイオハザードシリーズ」。最近「バイオハザード0 HD」にどっぷりハマったのがきっかけで、このサイトの題材として取り上げることとしました。