CSS

divタグを使ってみよう

レイアウトのために使えるdivタグを使いながらスタイリングを進めていきます。

  • div
  • class
  • 中央揃えのやり方

div

・領域を確保するために<div>というタグを使います。例えば、ヘッダーの中に更に四角い領域を作りその四角い領域ごと移動したりスタイリングをしたりしたい場合によく使われます。

・今の状態だと左詰めになってしまっていてヘッダーを移動させる方法しかありませんが情報を<div>タグを使うことによって情報をヘッダーの中で自由にスタイルを変えていきます。

・<div></div>でまとめたい情報を囲ってあげます。

class

・また、divはよく使うタグで複数回同じページで出てくるので名前をつけることができます。識別子といい<div class=“”>というふうにして””の中に好きに名前をつけることができます。

中央揃えのやり方

・あとはクラス属性を付けた要素は.(ドット)を先頭ににつけてセレクターとして呼び出すことができます。あとはいつもと同じように{}(波括弧)でプロパティを指定していきます。

・なれないうちはbackground-colorプロパティで目立つ色に変えてからCSSを書いていくと領域がはっきりわかりコードを書きやすいです。

・中央揃えにする方法をみていきます。幅を指定する必要だあるので好きな横幅を指定します。今回はwidth: 400px;と指定します。

・あとは左右の余白を均等にしてあげれば中央に来るので、margin-leftmargin-rightauto;(オート)に指定してあげればいいです。

ー広告ー

 

 






-CSS