diadia

興味があることをやってみる

ボックスのスタイル

ベース記事

css使い方

内容

  1. ブロックタイプレベルとインラインレベル
  2. widthとheightの使い方
  3. 外側の余白を調整する
  4. 内側の余白を調整する
  5. 境界線をつける
  6. インラインタイプをブロックタイプに変換する方法
  7. ボックスの角を丸くする

1.ブロックタイプレベルとインラインレベル

htmlのタグにはブロックタイプレベルとインラインレベルがある。これは何か?それはタグの領域がどこまであるのかである。ブロックタイプにはh1やpタグがある。インラインタイプにはaタグがある。ブロックタイプはウィンドウの横幅いっぱいに広がるもの。ボックスがウィンドウ横幅いっぱいまで広がるから別のタグを直下に置くと改行されたように見える。

ボックスが持つ領域は4つある。コンテンツ領域、パディング領域、ボーダー領域、マージン領域である。ボーダー領域はパディング領域とマージン領域の堺を示す。

2.widthとheightの使い方

横幅と縦幅を設定するには以下のプロパティを用いる。

プロパティ 役割
width 横幅の指定 px, %, auto
height 縦幅の指定 px, %, auto

heightの値としてはautoにしとくと良い。

3.外側の余白を調整する





プロパティ 役割 使い方
margin 外側余白を作る margin : 上 右 下 左 ;
使用例 -- -- margin : 12px 20 px 30 px 0 ;
使用例 -- -- margin : 20px ;
使用例 margin-top 上部の余白のみ margin-top : 20px ;
上、下、右、左だけ余白を外側に追加したい場合は、それぞれmargin-top,margin-bottom,margin-right,margin-leftを使う。

marginが上下で設置された場合は重複分は相殺される。

4.内側の余白を調整する

コンテンツ領域内に余白部分を設けるプロパティはpaddingである。paddingを設定した場合、背景色が継続して適用される。使い方はmarginと同じ。

(参考)背景色を白にしたいときは
background-color : #fff ;を用いる

5.境界線をつける

paddingとmarginの境界を作成するプロパティはborderを使う。

プロパティ 使い方 使用例
border border : 線のサイズ 線の種類 色 border : 10px solid red
border-bottom border-bottom : 線のサイズ 線の種類 色 border-bottom : 10px solid red
border-top, border-right, border-bottom, border-leftがある。

説明
noneボーダーなし、初期値
solid一本線
dashed破線
dotted点線
double二本線
groove立体的に窪んだ線
ridge立体的に隆起した線
inset全体が立体的に窪んだ線
outset全体が立体的に隆起した線


6.インラインタイプをブロックタイプに変換する方法

aタグのようなインライン要素をh1,pのようなブロック要素に変換するにはdisplayのプロパティを用いる。これは通常aタグに対してmarginは使えないのでmarginが使えるブロックタイプに変換するためにある。
displayの値は以下のものである。

説明
blockブロックレベル要素に変更(横幅100%になる)
inline-blockインライン&ブロックレベル要素に変更(横幅は文章までのブロック)
inlineインライン要素に変更


a{ display : inline-block } これを使ってmarginとpadingで調整する手続きで取る。

7.ボックスの角を丸くする

border-radiusを用いて角を丸くする。

border : 左上 右上 右下 左下;と使う

ex border-radius : 10px 5px 5px 10px ;

すべて10pxの場合は
border-radius : 10 px ; と書くことができる。