演習課題「見出しに枠線を付ける」

右側のコードエリアのhtmlは、「hello paiza」という見出しを表示します。
headタグ上のstyleタグにスタイルを追加して、h1タグの枠線(border)を付けてください。プロパティの設定値は、「solid #00A0A0」とします。

コードの実行をして、エラーが出なければ、演習課題クリアです!

期待する出力値

hello paiza


演習課題「bodyの内側に余白を付ける」

右側のコードエリアのhtmlは、「hello paiza」という見出しを表示します。
headタグ上のstyleタグにスタイルを追加して、bodyタグの内側の余白(padding)を100ピクセルにしてください。

コードの実行をして、エラーが出なければ、演習課題クリアです!

期待する出力値

hello paiza


演習課題「見出しの外側に余白を追加する」

右側のコードエリアのhtmlは、「hello paiza」という見出しを表示します。
headタグ上のstyleタグにスタイルを追加して、h1タグのの外側の余白(margin)を80ピクセルにしてください。

コードの実行をして、エラーが出なければ、演習課題クリアです!

期待する出力値

hello paiza


※有料会員になるとこの動画をご利用いただけます
詳しい説明を読む

#04:CSSのレイアウト指定を理解しよう

ここではCSSを使ったパーツのレイアウトに挑戦します。そのために、CSSを使った余白や間隔の指定方法について学習しましょう。