CSS（スタイルシート）属性の役割や使い方を説明したスタイルシート属性辞典

CSS（スタイルシート）を定義する為に最も勉強が必要となる部分は、

要素（タグ） or クラスセレクタ or IDセレクタ{属性:値;}

の属性と値の部分です。ここの記述方法がわからないとCSSを始められません。

ここでは、その属性と値について私の使っている必要最低限のCSS属性と値を属性名、備考、記述例で簡単に紹介させて頂いておりますので、コピペして値を変更して使ってみて下さい。

ここに記載しているスタイルシートの記述は、あくまでも例文ですので、使い方は様々です。

CSS＋属性名で検索すれば、詳しい説明をしてくれている方がいらっしゃると思いますので、使い方を詳しく知りたい方は、各自調べてみて下さい。

必要最低限のCSS（スタイルシート）属性と値辞典

• 属性名　⇒　備考
  { 記述例 }

文字

• color　⇒　文字の色
  { color : #000000 ; }
• font-size　⇒　文字のサイズ
  { font-size : 12px ; }
• font-family　⇒　優先表示する書式
  { font-family : "Verdana", "Tahoma", "ＭＳ ゴシック" ; }
• text-align　⇒　文字の左右配置
  { text-align : left ; }
  ※left（左揃え）・center（中揃え）・right（右揃え）
• text-align　⇒　文字の上下配置
  { vertical-align : top ; }
  ※top（上揃え）・middle（中揃え）・bottom（下揃え）

幅・余白・行間・縦横の配置

• width　⇒　幅
  { width : 940px ; }
• margin　⇒　外側の余白
  { margin : 10px 5px 10px 5px ; }　（上・右・下・左 の順番）
  または
  {
  margin-top : 10px ;
  margin-left : 5px ;
  margin-right : 5px ;
  margin-bottom : 10px ;
  }
• padding　⇒　内側の余白
  { padding : 10px 5px 10px 5px ; }　（上・右・下・左 の順番）
  または
  {
  padding-top : 10px;
  padding-left : 5px;
  padding-right : 5px;
  padding-bottom : 10px;
  } 
• line-height　⇒　行間
  { line-height : 120% ; }

ボーダー（枠線）

• border　⇒　ボーダー
  { border : 1px solid #000000 ; }　（4辺を同じに表示）
  または上・右・左・下を別のボーダーにする場合は、それぞれを以下のように指定することもできます。
  {
  border-top : 1px solid #000000 ;
  border-right : 1px double #0000ff ;
  border-left : 1px dotted #ff0000 ;
  border-bottom : 1px dashed #ff00ff ;
  }
  
  ※1pxはボーダーの太さ、solid・double・dotted・dashedはボーダーの種類、#000000等はボーダーの色を指定しています。これらを変更することにより、様々なボーダーが表示できるので、どんなボーダーが表示されるか試してみて下さい。当サイトは、これらでページの枠組みを作っています。

背景

• background-color　⇒　背景の色
  { background-color : #000000 ; }
• background-image　⇒　背景画像
  { background-image : url('http://画像のURL') ; } 

回り込み

• float　⇒　回り込み
  { float : left ; }
  ※left（左回りこみ）・right（右回り込み） 
• float　⇒　回り込み解除
  { clear : both ; }
  ※回り込みの解除を行なわないとデザインが崩れる原因となります。　.space{clear: both;}　というスタイルをCSSに記述し、回り込みを行なった後は必ず、　<br class="space" />　などでスタイルを呼びだし回り込みの解除行なって下さい。