06 ホームページ基礎講座　CSS　幅のwidth 線のborder

2020年4月2日 2020年11月24日 Yoshiko先生

横幅指定のwidth を使う　

HTMLの中に書くスタイルシート　内包スタイルシートを使って、CSSを適用していきます。今回はwidthを使うので、横幅が一定の距離で折り返すというところになります

article{
   width:600px;
   border:1px solid #000000;
   padding:2em;
　　　margin : 0 auto;
}

上記のコードは、外枠のarticle に横幅600pxで折り返し、その600px 分のborderを指定。その線から内側のテキストまでの距離を2em(2文字分)とするという指定です。

この中のmargin : 0 auto という　外部余白　margin プロパティを使って　横幅がwidth600px の時　上下の余白は　0　　左右の余白は　auto 自動であると書きます。

この指定で、600px の幅のボックスは、画面中央に配置されることになります。

h1{
  border : solid 1px #000000;
}

section h1{
  text-align : center;
}

上記の設定は、見出し　h1 要素に1px の黒の実線を外枠に書いています。

その下のコードは同じh1 に書くんだけれど、sectionという親要素の中のh1 だよという指定になるので、全部のh1 が中央揃えになるとは限りません。

この指定を子孫セレクタといいます。