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

Webサイト制作

横幅指定の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 の幅のボックスは、画面中央に配置されることになります。

見出し枠にborderを設定

h1{
  border : solid 1px #000000;
}

section h1{
  text-align : center;
}

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

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

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

ホームページ基礎講座 CSS編 6回目の動画

06 ホームページ制作基礎講座 CSS編 (Adobe Bracketsを使って)
タイトルとURLをコピーしました