IT英語 (16)：Padding・Margin・Alignmentの意味と使い方｜Webデザイン英語

Padding・Margin・Alignmentの違いを示すWebデザインの概念図

WebデザインやUI制作の打ち合わせでは、padding、margin、alignmentという英語が頻繁に登場します。どれもレイアウトに関する言葉ですが、示している場所と役割は異なります。

この記事では、3語の違いを日本語の意味、実務で使える例文、CSSとの関係から分かりやすく整理します。

Padding・Margin・Alignmentの違いを先に確認

単語	日本語の意味	覚え方
padding	要素の内側の余白	内容と枠線の間
margin	要素の外側の余白	要素と周囲の間
alignment	配置・整列	左・中央・右などの位置関係

内側がpadding、外側がmargin、位置をそろえるのがalignmentと覚えると区別しやすくなります。

1. Padding（内側の余白）

Paddingは、テキストや画像などの内容と、その要素の枠線との間にある内側の余白です。ボタン内の文字が枠に近すぎる場合などに調整します。

例文：Increase the padding inside the button to make it easier to tap.

訳：ボタン内の余白を広げて、タップしやすくしてください。

実務表現：Could you add a little more padding around the text?

訳：テキストの周囲にもう少し内側の余白を追加してもらえますか。

2. Margin（外側の余白）

Marginは、ある要素と周囲の要素との間にある外側の余白です。見出しと画像の距離や、カード同士の間隔を調整するときに使います。

例文：Add a 24-pixel margin below the heading.

訳：見出しの下に24ピクセルの外側余白を追加してください。

実務表現：The margin between these two sections is too narrow.

訳：この2つのセクション間の余白が狭すぎます。

3. Alignment（配置・整列）

Alignmentは、テキストや画像などの要素を基準線に沿って配置することです。左揃え、中央揃え、右揃えなどを表します。

例文：Change the text alignment from left to center.

訳：テキストの配置を左揃えから中央揃えに変更してください。

実務表現：Check the alignment of the icons before exporting the design.

訳：デザインを書き出す前に、アイコンの整列を確認してください。

CSSでの使われ方

• padding：要素の内側の余白を指定するプロパティ
• margin：要素の外側の余白を指定するプロパティ
• text-align：テキストの水平方向の配置を指定するプロパティ

なお、alignは「そろえる」という動詞、alignmentは「配置・整列」という名詞です。指示では “Align the logo with the heading.” のように動詞が使われることもあります。

確認問題

次の英文の（　）に入る最も適切な単語を選んでください。

1. Add more（　）inside the card so the text does not touch the border.
   A. padding　B. margin　C. alignment
2. Increase the（　）between the hero image and the next section.
   A. padding　B. margin　C. alignment
3. Set the text（　）to center.
   A. padding　B. margin　C. alignment

解答と解説

1. A. padding

カードの内側で、テキストと枠線の間を広げるため、paddingが適切です。

2. B. margin

ヒーロー画像と次のセクションという別々の要素の間隔なので、marginが適切です。

3. C. alignment

テキストを中央に配置することを表すため、alignmentが適切です。

まとめ

• Padding：要素の内側の余白
• Margin：要素の外側の余白
• Alignment：要素の配置・整列

3語はWebデザイン、Photoshop、Illustrator、CSSの指示でよく使われます。内側・外側・配置の3つに分けて覚えておくと、英語でのデザイン修正にも対応しやすくなります。

関連記事

• Bevel・Blur・Bounding Boxの意味と使い方
• IT英語の記事一覧

この記事が役立ったら、読者登録やコメントで教えていただけるとうれしいです。

IT英語 (15)：グラフィックデザイナー関連（Bevel, Blur, Bounding Boxの意味と使い方）

グラフィックデザインや画像編集で使われる単語の記事は、毎日午後9時に更新しています。こちらの記事では、ITの中でもPhotoshopやIllustratorを使う人が海外に行って仕事をしたり、日本にいても外国人と仕事をすることになった人用に作成している記事になります。これから始めようとしている人だけでなく、今までPhotoshopやIllustratorを使ったことがない人でも、知識を一緒に増やして学べるように日本語の意味の解説もあるので、みてくださいね！毎日3つずつでも継続すると1カ月、2カ月と差は大きく出てきますので、一緒に継続して勉強できれば幸いです:D

グラフィックデザイナー関連（Bevel, Blur, Bounding Boxの意味と使い方）

＜単語の意味と例文＞

1. Bevel (ベベル):

オブジェクトやテキストの端を斜めに切り取る効果で、立体的な外観を与えます。

例文: Apply a bevel effect to the text to make it look more three-dimensional.

訳: テキストにベベル効果を適用して、より立体的に見せてください。

2. Blur (ぼかし):

画像の部分をぼかす効果で、対象のエリアのディテールを減少させます。

例文: Use the blur tool to soften the background and bring focus to the subject.

訳: ぼかしツールを使用して背景を柔らかくし、主題に焦点を当ててください。

3. Bounding Box (バウンディングボックス):

オブジェクトや要素の境界を示す矩形の枠で、移動や変形を行う際に使用されます。

例文: Drag the bounding box to resize the object proportionally.

訳: オブジェクトを比例してリサイズするために、バウンディングボックスをドラッグしてください。

＜問題＞

次の英文の( )に入る適切な単語を選びなさい。

1. Apply a ( ) effect to the text to make it look more three-dimensional.

(A) Bevel
(B) Blur
(C) Bounding Box

2. Use the ( ) tool to soften the background and bring focus to the subject.

(A) Bevel
(B) Blur
(C) Bounding Box

3. Drag the ( ) to resize the object proportionally.

(A) Bevel
(B) Blur
(C) Bounding Box

＜解答＞

1. (A) Bevel

2. (B) Blur

3. (C) Bounding Box

＜解説＞

1. Apply a ( ) effect to the text to make it look more three-dimensional.

解説: オブジェクトやテキストの端を斜めに切り取る効果は「Bevel（ベベル）」で、これを適用することで立体的な外観を与えます。

2. Use the ( ) tool to soften the background and bring focus to the subject.

解説: 画像の部分をぼかす効果は「Blur（ぼかし）」で、これを使用して背景を柔らかくすることで主題に焦点を当てることができます。

3. Drag the ( ) to resize the object proportionally.

解説: オブジェクトや要素の境界を示す矩形の枠は「Bounding Box（バウンディングボックス）」で、これをドラッグしてオブジェクトを比例してリサイズすることができます。

48. 破壊する: destroy, demolish, ruin 英単語の違い

似たような英語の違いの記事は、毎日午後12時と6時に更新しています。毎日チェックしてもらうと合計6個の単語を覚えられるように構成してありますので、よかったら確認してくださいね。

destroy, demolish, ruin 英単語の違い

意味解説

1. destroy: 完全に壊す、消滅させることを指します。例えば、「建物を破壊する」は "destroy a building" となります。

2. demolish: 特に建物や構造物を取り壊すことを指します。例えば、「古い建物を解体する」は "demolish an old building" と表現されます。

3. ruin: 何かを破壊し、その価値や美しさを失わせることを指します。例えば、「景色を台無しにする」は "ruin the view" となります。

問題

1. The earthquake caused extensive damage and ( ) many historical landmarks in the city.

A) destroy

B) demolish

C) ruin

2. The old factory was scheduled to be ( ) to make way for a new shopping center.

A) destroy

B) demolish

C) ruin

3. The heavy rainfall threatened to ( ) the crops that had been carefully cultivated for months.

A) destroy

B) demolish

C) ruin

解答と解説

1. 正解: A. destroy

解説: 地震が都市内の多くの歴史的な名所を広範囲に破壊しました。ここでは、完全に壊す、消滅させるという意味で「destroy」が最も適切です。「demolish」は特に建物や構造物を取り壊すことを指し、「ruin」は何かを破壊し、その価値や美しさを失わせることを指しますが、この文脈では適切ではありません。

2. 正解: B. demolish

解説: 古い工場は新しいショッピングセンター建設のために解体される予定でした。ここでは、特に建物や構造物を取り壊すという意味で「demolish」が最も適切です。「destroy」は一般的に物を完全に壊すことを指しますが、「demolish」は特に建物や構造物の取り壊しを指します。「ruin」は価値や美しさを失わせることを指しますが、この文脈では適切ではありません。

3. 正解: C. ruin

解説: 豪雨が数か月間丹精込めて育てられた作物を台無しにする恐れがありました。ここでは、何かを破壊し、その価値や美しさを失わせるという意味で「ruin」が最も適切です。「destroy」は一般的に物を完全に壊すことを指しますが、「ruin」は特に価値や美しさを失わせることを指します。「demolish」は建物や構造物を取り壊すことを指しますが、この文脈では適切ではありません。

47. 保存する: save, preserve, conserve 英単語の違い

似たような英語の違いの記事は、毎日午後12時と6時に更新しています。毎日チェックしてもらうと合計6個の単語を覚えられるように構成してありますので、よかったら確認してくださいね。

save, preserve, conserve 英単語の違い

意味解説

1. save: 物や人の危機や災害から守り、安全を確保することを指します。例えば、「生命を救う」は "save a life" となります。

2. preserve: 物や自然をそのままの状態で保ち、変化や損傷を防ぐことを指します。例えば、「歴史的な建造物を保存する」は "preserve historic buildings" と表現されます。

3. conserve: 資源や環境を効率的に使用し、無駄を減らして保存することを指します。例えば、「水を節約する」は "conserve water" となります。

問題

1. The firefighters worked tirelessly to ( ) the family from the burning house.

A) save

B) preserve

C) conserve

2. It is important to ( ) the rainforest to protect its biodiversity.

A) save

B) preserve

C) conserve

3. We need to ( ) energy by using renewable sources and reducing waste.

A) save

B) preserve

C) conserve

解答と解説

1. 正解: A. save

解説: 消防士が家族を燃えている家から救い出すことを指します。ここでは、物や人を危機や災害から守り安全を確保する意味で「save」が最も適切です。一方で、「preserve」は物をそのままの状態で保ち、変化や損傷を防ぐことを指し、「conserve」は資源や環境を効率的に使用し、無駄を減らして保存することを指しますが、この文脈では適切ではありません。

2. 正解: B. preserve

解説: 雨林の生物多様性を保護するために雨林をそのままの状態で保つことが重要です。ここでは、物をそのままの状態で保ち、変化や損傷を防ぐ意味で「preserve」が最も適切です。「save」は物や人を危機や災害から守り安全を確保することを指し、「conserve」は資源や環境を効率的に使用し、無駄を減らして保存することを指しますが、この文脈では適切ではありません。

3. 正解: C. conserve

解説: エネルギーを再生可能な資源を使用したり、無駄を減らすことで節約することが必要です。ここでは、資源や環境を効率的に使用し、無駄を減らして保存する意味で「conserve」が最も適切です。「save」は物や人を危機や災害から守り安全を確保することを指し、「preserve」は物をそのままの状態で保ち、変化や損傷を防ぐことを指しますが、この文脈では適切ではありません。

毎日2種類の単語、合計6つずつ解説していきます。TOEIC、TOEFL、英検、IELTSなど様々な資格などにお役に経てば幸いです。

IT英語 (14)：グラフィックデザイナー関連（Desaturate, Adjustment, Aspect Ratioの意味と使い方）

グラフィックデザインや画像編集で使われる単語の記事は、毎日午後9時に更新しています。こちらの記事では、ITの中でもPhotoshopやIllustratorを使う人が海外に行って仕事をしたり、日本にいても外国人と仕事をすることになった人用に作成している記事になります。これから始めようとしている人だけでなく、今までPhotoshopやIllustratorを使ったことがない人でも、知識を一緒に増やして学べるように日本語の意味の解説もあるので、みてくださいね！毎日3つずつでも継続すると1カ月、2カ月と差は大きく出てきますので、一緒に継続して勉強できれば幸いです:D

IT英語 (14)：グラフィックデザイナー関連（Desaturate, Adjustment, Aspect Ratioの意味と使い方）

＜単語の意味と例文＞

1. Desaturate (脱色):

画像や色彩の彩度を低下させることで、色をより鈍くする効果があります。

例文: Use the desaturate tool to create a black and white version of the image.

訳: 画像の白黒バージョンを作成するために脱色ツールを使用してください。

2. Adjustment (調整):

画像編集ソフトウェアで行われる、色や明るさなどのパラメーターを変更する操作です。

例文: Apply color adjustments to enhance the overall appearance of the photograph.

訳: 写真の全体的な外観を向上させるために色の調整を適用してください。

3. Aspect Ratio (アスペクト比):

画像やビデオの幅と高さの比率を指し、縦横比とも呼ばれます。

例文: Maintain the aspect ratio when resizing the image to prevent distortion.

訳: 画像をリサイズする際に歪みを防ぐためにアスペクト比を維持してください。

＜問題＞

次の英文の( )に入る適切な単語を選びなさい。

1. Use the ( ) tool to create a black and white version of the image.

(A) Desaturate
(B) Adjustment
(C) Aspect Ratio

2. Apply color ( ) to enhance the overall appearance of the photograph.

(A) Desaturate
(B) Adjustment
(C) Aspect Ratio

3. Maintain the ( ) when resizing the image to prevent distortion.

(A) Desaturate
(B) Adjustment
(C) Aspect Ratio

＜解答＞

1. (A) Desaturate

2. (B) Adjustment

3. (C) Aspect Ratio

＜解説＞

1. Use the ( ) tool to create a black and white version of the image.

解説: 画像や色彩の彩度を低下させるのは「Desaturate（脱色）」で、これを使用して白黒バージョンの画像を作成します。

2. Apply color ( ) to enhance the overall appearance of the photograph.

解説: 色や明るさなどのパラメーターを変更するのは「Adjustment（調整）」です。写真の全体的な外観を向上させるために使用されます。

3. Maintain the ( ) when resizing the image to prevent distortion.

解説: 画像やビデオの幅と高さの比率を指すのは「Aspect Ratio（アスペクト比）」で、これを維持することで歪みを防ぐことができます。

46. 防ぐ: prevent, block, stop 英単語の違い

似たような英語の違いの記事は、毎日午後12時と6時に更新しています。毎日チェックしてもらうと合計6個の単語を覚えられるように構成してありますので、よかったら確認してくださいね。

防ぐ: prevent, block, stop 英単語の違い

意味解説

1. prevent: ある事態が起こるのを事前に防止することを指します。例えば、「病気を予防する」は "prevent illness" となります。

2. block: 物理的な障壁や障害を設けて進行を阻止することを指します。例えば、「道をブロックする」は "block the road" と表現されます。

3. stop: ある活動や出来事を終了させることを指します。例えば、「車を停止する」は "stop the car" となります。

問題

1. The vaccine helps to ( ) the spread of the virus.

A) prevent

B) block

C) stop

2. The fallen tree ( ) the path, so we had to find another route.

A) prevent

B) block

C) stop

3. The police officer managed to ( ) the thief before he could escape.

A) prevent

B) block

C) stop

解答と解説

1. 正解: A. prevent

解説: ワクチンはウイルスの拡散を防ぐのに役立ちます。ここでは、事態が起こるのを事前に防止するという意味で「prevent」が適切です。一方で、「block」は物理的な障害を設けて進行を阻止することを指し、「stop」は活動や出来事を終了させることを指しますが、ワクチンが行うのは事態の発生自体を防ぐことであるため、「prevent」が最も適しています。

2. 正解: B. block

解説: 倒れた木が道を塞いでいたので、別の経路を探さなければなりませんでした。ここでは、物理的な障害を設けて進行を阻止するという意味で「block」が適切です。「prevent」は事態が起こるのを事前に防止することを指し、「stop」は活動や出来事を終了させることを指しますが、この文脈では木が道を塞ぐという物理的な障害を示しており、「block」が最も適しています。

3. 正解: C. stop

解説: 警官は泥棒が逃げる前に彼を止めることに成功しました。ここでは、「stop」が適切です。警官が行ったのは泥棒の行動を終了させることであり、「block」や「prevent」とは異なります。「prevent」は事態が起こるのを事前に防止することを指し、「block」は物理的な障害を設けて進行を阻止することを指しますが、警官が泥棒を捕まえるのは彼の行動を直接終了させることなので、「stop」が最も適しています。

45. 攻撃する: attack, assault, strike 英単語の違い

似たような英語の違いの記事は、毎日午後12時と6時に更新しています。毎日チェックしてもらうと合計6個の単語を覚えられるように構成してありますので、よかったら確認してくださいね。

攻撃する: attack, assault, strike 英単語の違い

意味解説

1. attack: 敵や対象に対して暴力的な行為や攻撃を行うことを指します。攻撃的な行動や攻撃的な言動も含みます。例えば、「敵を攻撃する」は "attack the enemy" となります。

2. assault: 特に身体的な暴力や性的な攻撃を意味します。法的には、他人に身体的な害を加える行為や脅迫を含みます。例えば、「暴行を加える」は "assault someone" と表現されます。

3. strike: 物理的な打撃を与えることを指します。通常、手や道具などで対象を直接打つ行為を指します。例えば、「彼にパンチをする」は "strike him with a punch" となります。

問題

1. The army launched a(n) ( ) on the enemy camp under the cover of darkness.

A) attack

B) assault

C) strike

2. She was a victim of a brutal ( ) on her way home from work.

A) attack

B) assault

C) strike

3. The lightning ( ) the tree with such force that it split in half.

A) attack

B) assault

C) strike

解答と解説

1. 正解: A. attack

解説: 軍隊が夜の暗闇の中で敵のキャンプに攻撃を仕掛けたという文脈で、「attack」が適切です。この文脈では、軍隊が敵に対して暴力的な行動や攻撃を行うことを指しています。一方で、「assault」は身体的な暴力や性的な攻撃を指すことが一般的であり、軍隊が行うような大規模な攻撃を指すには少し限定的です。そのため、「assault」はこの文脈では少し適切でないです。

2. 正解: B. assault

解説: 彼女が仕事から帰宅途中に残虐な暴行の被害者になったという文脈で、「assault」が適切です。この文脈では、彼女が身体的な暴力や攻撃を受けたことを指しています。一方で、「attack」は一般的な攻撃行為を指す言葉であり、具体的に身体的な暴力や攻撃を示すためには「assault」が適しています。

3. 正解: C. strike

解説: 稲妻が木に強い力で直撃し、木を二つに割ったという文脈で、「strike」が適切です。この文脈では、稲妻が物理的な打撃を与えることを指しています。一方で、「attack」や「assault」は通常人や物を対象にした攻撃行為を指すため、自然現象による打撃を表現するには「strike」が適切です。

以上が修正した解答と解説です。

毎日2種類の単語、合計6つずつ解説していきます。TOEIC、TOEFL、英検、IELTSなど様々な資格などにお役に経てば幸いです。