Webコーディングする時によく使うCss編

「whidth」とは要素の横幅を設定するCss

whidth:100px;/*横幅100px*/

max-whidth:100px;/*最大の横幅100px*/

min-whidth:100px;/*最小の横幅100px*/

サンプル画像

「height」とは要素の高さを設定するCss

height:100px;/*縦幅100px*/

max-height:100px;/*最大の縦幅100px*/

min-height:100px;/*最小の縦幅100px*/

サンプル画像

「padding」とは要素の内側にスペースを開けるCss

padding:10px 10px 10px 10px;/*上/右/下/左の順番*/
 
padding-top:10px;/*上側だけにスペースを開ける場合*/
 
padding-right:10px;/*右側だけにスペースを開ける場合*/

padding-bottom:10px;/*下側だけにスペースを開ける場合*/
 
padding-left:10px;/*左側だけにスペースを開ける場合*/

サンプル画像

「margin」とは要素の外側にスペースを開けるCss

margin:10px 0px 0px 0px;/*上/右/下/左の順番*/
 
margin-top:10px;/*上側だけにスペースを開ける場合*/
 
margin-right:10px;/*右側だけにスペースを開ける場合*/
 
margin-left:10px;/*左側だけにスペースを開ける場合*/

サンプル画像

「text-align」とは要素の内側のテキストなどの位置を調整Css

text-align: center;/*テキストをセンター寄せ/
 
text-align: right;/*テキストを右寄せ/
 
text-align: left;/*テキストを左寄せ/

サンプル画像

「border」とは要素の枠線を指定するCss

border:１px　solid #000;/*線の太さ/線の形状/色を指定*/
 
border-top:１px　solid #ff0000;/*上側だけに線の太さ/線の形状/色を指定*/
 
border-right:１px　solid #0006ff;/*右側だけに線の太さ/線の形状/色を指定*/

border-bottom:１px　solid #00ff1e;/*右側だけに線の太さ/線の形状/色を指定*/

border-left:１px　solid #ffd800;/*左側だけに線の太さ/線の形状/色を指定*/

サンプル画像

「font-size」とは要素のテキストの大きさを調整Css

font-size: 16px;/*pxでテキストの大きさを指定*/

font-size: 100%;/*%でテキストの大きさを指定*/

font-size: 16em;/*emでテキストの大きさを指定*/

font-size: 16rem;/*remでテキストの大きさを指定*/

「list-style」とはulタグを使った際の「・」を調整Css

  list-style: none;

「color」とはフォントの色を調整Css

  color: #000000;/*#カラーコードを指定*/

「position」とは要素の位置などを調整Css

  position: relative;/*基準点の指定*/

  position: absolute;/*基準点からの位置を指定*/

  position: absolute;/*基準点からの位置を指定*/
  top: 0;/*トップからの位置を指定*/
  left: 0;/*左からの位置を指定*/
  right: 0;/*右からの位置を指定*/
  bottom: 0px;/*下からの位置を指定*/

  position: fixed;/*位置を固定して追従したりするように指定*/

「background-color」とは要素の背景色を指定するCss

background-color: #カラーコード;/*カラーコードを入れて色を指定*/
 
background-color: #rgba(255, 0, 0, 0.5);;/*rgbで色を指定し、最後の数値で透明度を指定*/

「background-image」とは要素の背景に画像を指定するCss

background-image:　url("画像のパスを指定");/*画像のパス部分にスタイルシートから画像までの場所を指定*/