演習課題「上下左右のマージンを個別で指定してみよう - その1」
現在、ブラウザでは、ぱいじょの生徒として霧島京子、六村リオ、緑川つばめと表示されています。
ここで、margin-topプロパティとmargin-rightプロパティ、margin-bottomプロパティ、margin-leftプロパティを用いて、h1要素の上のマージンを50pxに、右のマージンを30pxに、下のマージンを10pxに、左のマージンを40pxに指定してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
演習課題「上下左右のマージンを個別で指定してみよう - その2」
現在、ブラウザでは、ぱいじょの生徒として霧島京子、六村リオ、緑川つばめと表示されています。
ここで、marginプロパティを用いて、h1要素の上のマージンを50pxに、右のマージンを30pxに、下のマージンを10pxに、左のマージンを40pxに指定してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
演習課題「上、左右、下のマージンをそれぞれ指定してみよう」
現在、ブラウザでは、ぱいじょの生徒として霧島京子、六村リオ、緑川つばめと表示されています。
ここで、marginプロパティを用いて、h1要素の上のマージンを50pxに、左右のマージンを10pxに、下のマージンを40pxに指定してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
演習課題「上下、左右のマージンをそれぞれ個別で指定してみよう」
現在、ブラウザでは、霧島京子、六村リオ、緑川つばめと表示されています。
ここで、marginプロパティを用いて、h1要素の上下のマージンを50pxに、左右のマージンを10pxに指定してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃03:上下左右のマージンの個別指定(margin-top/margin-bottom/margin-left/margin-right)
このチャプターでは、上下左右のマージンの個別指定を学習します。
以下のプロパティを使用することで、上下左右のマージンサイズを個別に指定することができます。
・ 上のマージンを調整するmargin-top
・ 下のマージンを調整するmargin-bottom
・ 左のマージンを調整するmargin-left
・ 右のマージンを調整するmargin-right
marginプロパティだけでも上下左右のマージンサイズを個別に指定することができます。
・ margin: a b c dでは、値aが上マージン、値bが右マージン、値cが下マージン、値dが左マージンと時計回りの順に指定しています。
・ margin: a b cでは、値aが上マージン、値bが左右マージン、値cが下マージンと上から順に指定しています。
・ margin: a bでは、値aが上下マージン、値bが左右マージンと「上下左右」を二つに分けたときの言葉の順に指定しています。
@charset "UTF-8";
h2 {
margin-top: 40px;
margin-right: 20px;
margin-bottom: 5px;
margin-left: 60px;
background-color: yellow;
}
@charset "UTF-8";
h2 {
margin: 40px 20px 5px 60px;
background-color: yellow;
}
@charset "UTF-8";
h2 {
margin: 40px 20px 5px;
background-color: yellow;
}