デザインを制すための10個の余白系CSSプロパティ

| コメント(0) | トラックバック(0)


Webデザインをおこなうにあたっては、初歩の初歩だけど、

@ITの記事にも掲載されていたので、自分自身でまとめてみた。

 

CSS(Cascading Style Sheets )を使用して、Webデザインを行うための

基本的であり、頻繁に利用するプロパティ(属性値)

 

10個と記述されているが、大きく分けると、たった2つ。

marginプロパティと、paddigプロパティ

 

どちらもレイアウト上の余白を設定するためのものだが、

イメージを書くと次の通り。

css.jpg

 

まず基本となる要素(例の場合、box部分の黒い線のボックス)が基準とする。

基準の要素の中に文字の情報を書き込むが、この際に、ボックスの枠線と、

文字の間に余白を取りたい場合は、Webのデザインはもとより、様々な文書を

書く際でもよくあると思う。

このときに、ボックスの要素に対して設定するプロパティが、paddingプロパティ。

 

また、ボックス要素の外側にも様々なコンテンツがあるが、それらとの間にも

余白を取りたい(距離を空けたい)場合に設定するプロパティが、marginプロパティ。

 

上記のプロパティを設定すると、上下左右の余白が同一の値に設定される(数字を

並べて個別に細かく設定することも可能)が、上下左右、それぞれ個別に設定する

ためのプロパティが、それぞれ4つ用意されている(margin-left、paddinf-bottom 等)

で、合計10個ののプロパティ。

 

ほら、簡単ですよね!!

 

具体的な使用方法については、

有名なリファレンスサイトが多くあるので、以下を参照してください。

 

marginプロパティ

paddingプロパティ

とほほのスタイルシート入門

トラックバック(0)

トラックバックURL: http://pg2se.com/mt6/mt-tb.cgi/65

コメントする