0Pricing
HTML for Kids · レッスン

パディング

パディング

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

はじめに

こんにちは。

CSS Paddingのレッスンへようこそ。

Paddingは、HTML要素の境界の内側に余白を作成するために使用します。

Marginと同じように、要素に4方向のpaddingを追加できます。

パーセント値

前の例では、px単位の固定値を取るpadding値を指定しました。marginと同じように、パーセント値も設定できます。

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  background-color: lightblue;
  padding-top:10%;
  padding-right: 10%;
  padding-left: 10%;
  padding-bottom:10%;
  border: 1px solid black;
}
</style>
</head>
<body>

<div class="box">
    We assign percentage type 
     padding to this div element.
</div>

</body>
</html>
パディング — イラスト2

コードを短くする

marginと同じように、paddingのショートハンド構文を使えば、1行で定義できます。

top、right、bottom、leftのpadding値を、それぞれスペースで区切って追加できます。

サンプルコードを確認すると、marginとよく似ていることがわかります。

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  border: 1px solid black;
  padding: 20px 10px 25px 10px;
  background-color: powderblue;
}
</style>
</head>
<body>

<div class="box">
   Lorem ipsum dolor sit amet, 
   consectetur
</div>

</body>
</html>

おめでとうございます

おめでとうございます 🎉

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

次のセクションでは、Color and Backgroundについて学びます。

パディング — イラスト4

よくある質問

「パディング」レッスンは無料ですか？

はい。「パディング」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと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に戻る