0Pricing
HTML for Kids · レッスン

マージン

マージン

「マージン」はCoddyKit上の無料HTML for Kidsレッスンです。 これはレッスン1/1です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML for Kids学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML for Kidsコースには全1レッスンが含まれています。

はじめに

MarginはCSSで最も重要なトピックの1つです。 

Marginとは、要素の境界の周囲に作成する余白です。

マージン — イラスト1

Marginの各方向

要素の種類にかかわらず、marginを作成するときは、4方向（top、right、bottom、left）として考える必要はありません。

<style>
   .box{
      margin-top:10px;
      margin-right:10px;
      margin-bottom:10px;
      margin-left:10px;
      width:100px;
      height:100px;
      background-color: powderblue;
   }
</style>

<div class="box">Box with margin</div>
<div class="box">Box with margin</div>

警告

marginの値には具体的な値だけでなく、パーセント値も指定できます。

注意

marginには具体的な値だけでなく、パーセント値も指定できます。

Marginのショートハンド

前の例では、ボックスの4方向すべてにmarginを設定するために、4行のコードを書く必要がありました。

CSSには、コードを短く記述するためのmarginのショートカットがあります。

marginプロパティを定義した後、値をスペースで区切って、top、right、bottom、leftの順に指定できます（時計回りの順です）。

<style>

.box {
  margin: 10px 10px 10px 10px;
  background-color: powderblue;
}
</style>

<div class="box">Box with margin</div>

負のmarginに関する注意

Marginには負の値を指定できます。一方、次のレッスンで学ぶpaddingには負の値を指定できません。

margin auto

marginプロパティのauto値を使用すると、要素を水平方向の中央に配置できます。画面の解像度にかかわらず、要素は水平方向の中央に配置されます。

画面幅が1200px、要素の幅が400pxだとします。この場合、要素の左右には400pxの余白ができ、中央に配置されます。

<style>
.box {
  width:200px;
  margin: auto;
  background-color: powderblue;
}
</style>
<div class="box">
     This element will be horizontally
      centered because
       it has margin: auto;
</div>

おめでとうございます

おめでとうございます 🎉

このセクションでは、CSS Marginsについて学びました。

次のセクションでは、CSS Paddingsについて学びます。

マージン — イラスト8

よくある質問

「マージン」レッスンは無料ですか？

はい。「マージン」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML for Kidsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML for Kidsコースには全1レッスンが含まれています。

「マージン」で何を学びますか？

マージン ブラウザで直接実行するハンズオンコードでHTML for Kidsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML for Kidsを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML for Kidsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/1です。

「マージン」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML for Kidsレッスンでコードを書いて実行できますか？

はい。すべてのHTML for Kidsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

← HTML for Kidsに戻る