ユーザ用ツール

サイト用ツール


よく使うcssその1

差分

この文書の現在のバージョンと選択したバージョンの差分を表示します。

この比較画面にリンクする

よく使うcssその1 [2013/12/02 10:47] (現在)
luis_lee 作成
ライン 1: ライン 1:
 +
 +
 +====== よく使うcssその1 ======
 + 
 +
 +http://​www.tohoho-web.com/​css/​reference.htm
 +
 +padding
 +
 +
 +マージン(外側の余白)
 +
 +   ​margin-top:​ top (C1/e3/N4)
 +   ​margin-right:​ right (C1/e3/N4)
 +   ​margin-bottom:​ bottom (C1/e3/N4)
 +   ​margin-left:​ left (C1/e3/N4)
 +
 +パディング(内側の余白)
 +
 +   ​padding:​ 2px; … [上下左右] を指定
 +   ​padding:​ 2px 4px; … [上下] と [左右] を指定
 +   ​padding:​ 2px 4px 6px; … [上] と [左右] と [下] を指定
 +   ​padding:​ 2px 4px 6px 8px; … [上] と [右] と [下] と [左] を指定
 +
 +
 +上辺のパディング(枠内余白)を指定する
 +   ​padding-top
 +下辺のパディング(枠内余白)を指定する
 +   ​padding-bottom
 +左辺のパディング(枠内余白)を指定する
 +   ​padding-left
 +右辺のパディング(枠内余白)を指定する
 +   ​padding-right
 +
 +
 +
 +margin
 +   ​margin:​ 2px; … [上下左右] を指定
 +   ​margin:​ 2px 4px; … [上下] と [左右] を指定
 +   ​margin:​ 2px 4px 6px; … [上] と [左右] と [下] を指定
 +   ​margin:​ 2px 4px 6px 8px; … [上] と [右] と [下] と [左] を指定
 +
 +
 +border
 +
 +ボーダー(枠線)
 +
 +   ​border:​ width style color (C1/e4/N4)
 +   ​border-top:​ width style color (C1/e4/N4)
 +   ​border-right:​ width style color (C1/e4/N4)
 +   ​border-bottom:​ width style color (C1/e4/N4)
 +   ​border-left:​ width style color (C1/e4/N4)
 +
 +   ​border:​ は上下左右すべての、border-xxx:​ は上下左右それぞれのボーダー(枠線)の width, style, color を一度に指定します。
 +
 +<div style="​border:​ 1px solid gray;">​あああ</​div>​
 +   ​border-width:​ top right bottom left (C1/e4/N4)
 +   ​border-top-width:​ width (C1/e4/N4)
 +   ​border-right-width:​ width (C1/e4/N4)
 +   ​border-bottom-width:​ width (C1/e4/N4)
 +   ​border-left-width:​ width (C1/e4/N4)
 +
 +   ​border-width:​ は上下左右すべての、border-xxx-width:​ は上下左右それぞれののボーダー(枠線)の太さを、thin(細線)、medium(既定値:中太線)、thick(太線)のいずれか、または 1px(幅指定) などのような単位付きの数値で指定します。border-width:​ は引数を 1~4個指定可能で、省略時の解釈は margin と同様になります。
 +
 +H1 { border-width:​ 1px; border-style:​ solid; }
 +   ​border-style:​ top right bottom left (C1/e4/N4)
 +   ​border-top-style:​ style (C2/e4/N6)
 +   ​border-right-style:​ style (C2/e4/N6)
 +   ​border-bottom-style:​ style (C2/e4/N6)
 +   ​border-left-style:​ style (C2/e4/N6)
 +
 +   ​border-style:​ は上下左右すべての、border-xxx-style:​ は上下左右それぞれののボーダー(枠線)のスタイルを、none(線無し)、dotted(点線)、dashed(粗い点線)、solid(実線)、double(二重線)、groove(谷線)、ridge(山線)、inset(内線)、outset(外線)、inherit(継承)のいずれかで指定します。border-style:​ は引数を 1~4個指定可能で、省略時の解釈は margin と同様になります。
 +
 +   H1 { border-width:​ 1px; border-style:​ solid; }
 +   
 +   ​border-color:​ color (C1/e4/N4)
 +   ​border-top-color:​ color (C2/e4/N6)
 +   ​border-right-color:​ color (C2/e4/N6)
 +   ​border-bottom-color:​ color (C2/e4/N6)
 +   ​border-left-color:​ color (C2/e4/N6)
 +
  
よく使うcssその1.txt · 最終更新: 2013/12/02 10:47 by luis_lee